diff --git a/.changeset/giant-planes-juggle.md b/.changeset/giant-planes-juggle.md
new file mode 100644
index 00000000..b29cfbb1
--- /dev/null
+++ b/.changeset/giant-planes-juggle.md
@@ -0,0 +1,7 @@
+---
+'@smile/react-front-kit-shared': minor
+'@smile/react-front-kit-table': minor
+'@smile/react-front-kit': minor
+---
+
+Reworked action/confirm types and moved then in `react-front-kit-shared` then refactored types in `Table`, `Thumbnail` and `ConfirmModal` , Added `ThumbnailGrid` and `TableGridView` components,
diff --git a/packages/react-front-kit-shared/src/types/actions.ts b/packages/react-front-kit-shared/src/types/actions.ts
new file mode 100644
index 00000000..4ac140f6
--- /dev/null
+++ b/packages/react-front-kit-shared/src/types/actions.ts
@@ -0,0 +1,35 @@
+import type { MantineColor, ModalProps } from '@mantine/core';
+import type { ReactNode } from 'react';
+
+export interface IConfirmModal extends Omit<ModalProps, 'title'> {
+  cancelColor?: MantineColor;
+  cancelLabel?: string;
+  confirmColor?: MantineColor;
+  confirmLabel?: string;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  title?: string;
+}
+
+export interface IActionConfirmModalProps<Item>
+  extends Omit<IConfirmModal, 'onCancel' | 'onClose' | 'onConfirm' | 'opened'> {
+  onCancel?: (item: Item) => false | void;
+  onClose?: () => void;
+  onConfirm?: (item: Item) => false | void;
+}
+
+export interface IAction<Item> {
+  color?: string;
+  confirmModalProps?: IActionConfirmModalProps<Item>;
+  confirmation?: boolean;
+  icon: ReactNode;
+  id: number | string;
+  isItemAction?: boolean;
+  isMassAction?: boolean;
+  label: string;
+  onAction?: (item: Item) => void;
+}
+
+export interface IConfirmAction<Item> extends IAction<Item> {
+  item: Item;
+}
diff --git a/packages/react-front-kit-shared/src/types/index.ts b/packages/react-front-kit-shared/src/types/index.ts
index 5f30ef38..b914401a 100644
--- a/packages/react-front-kit-shared/src/types/index.ts
+++ b/packages/react-front-kit-shared/src/types/index.ts
@@ -1 +1,2 @@
+export * from './actions';
 export * from './options';
diff --git a/packages/react-front-kit-table/src/Components/Table/Table.mock.tsx b/packages/react-front-kit-table/src/Components/Table/Table.mock.tsx
new file mode 100644
index 00000000..e192cfe9
--- /dev/null
+++ b/packages/react-front-kit-table/src/Components/Table/Table.mock.tsx
@@ -0,0 +1,146 @@
+import type { ITableProps } from './Table';
+
+import {
+  DownloadSimple,
+  Eye,
+  PencilSimple,
+  ShareNetwork,
+  Star,
+  Trash,
+} from '@phosphor-icons/react';
+import { FolderMove } from '@smile/react-front-kit-shared';
+import { action } from '@storybook/addon-actions';
+
+export const tableMock: ITableProps<Record<string, unknown>> = {
+  actions: [
+    {
+      icon: <FolderMove />,
+      id: 'move',
+      isMassAction: true,
+      label: 'Move in tree',
+      onAction: action('Move in tree'),
+    },
+    {
+      icon: <Eye />,
+      id: 'open',
+      label: 'Open document',
+      onAction: action('Open document'),
+    },
+    {
+      icon: <PencilSimple />,
+      id: 'edit',
+      label: 'Edit document',
+      onAction: action('Edit document'),
+    },
+    {
+      icon: <Star />,
+      id: 'favorite',
+      label: 'Add to favorites',
+      onAction: action('Add to favorites'),
+    },
+    {
+      confirmation: true,
+      icon: <ShareNetwork />,
+      id: 'share',
+      label: 'Share',
+      onAction: action('Share'),
+    },
+    {
+      icon: <DownloadSimple />,
+      id: 'download',
+      label: 'Download',
+      onAction: action('Download'),
+    },
+    {
+      color: 'red',
+      confirmModalProps: {
+        children: 'Are you sure you want to delete ?',
+        confirmColor: 'red',
+        confirmLabel: 'Delete',
+        onCancel: action('Delete:Cancel'),
+        onConfirm: action('Delete:Confirm'),
+        title: 'Delete ?',
+      },
+      confirmation: true,
+      icon: <Trash />,
+      id: 'delete',
+      isMassAction: true,
+      label: 'Delete',
+      onAction: action('Delete'),
+    },
+  ],
+  columns: [
+    {
+      accessorKey: 'id',
+      header: 'id',
+    },
+    {
+      accessorKey: 'format',
+      header: 'Format',
+    },
+    {
+      accessorKey: 'title',
+      header: 'Titre',
+    },
+    {
+      accessorKey: 'creator',
+      header: 'Créateur',
+    },
+    {
+      accessorKey: 'date',
+      header: 'Date publication',
+    },
+  ],
+  data: [
+    {
+      creator: 'Valentin Perello',
+      date: '16/05/2022',
+      format: 'SVG',
+      id: 1,
+      title: 'Doc test 1',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '17/05/2022',
+      format: 'PDF',
+      id: 2,
+      title: 'Doc test 2',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '18/05/2022',
+      format: 'PDF',
+      id: 3,
+      title: 'Doc test 3',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '19/05/2022',
+      format: 'PDF',
+      id: 4,
+      title: 'Doc test 4',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '20/05/2022',
+      format: 'PDF',
+      id: 5,
+      title: 'Doc test 5',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '21/05/2022',
+      format: 'PDF',
+      id: 6,
+      title: 'Doc test 6',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '22/05/2022',
+      format: 'PDF',
+      id: 7,
+      title: 'Doc test 7',
+    },
+  ],
+  rowActionNumber: 3,
+};
diff --git a/packages/react-front-kit-table/src/Components/Table/Table.stories.tsx b/packages/react-front-kit-table/src/Components/Table/Table.stories.tsx
index f1c9dde2..52ae231e 100644
--- a/packages/react-front-kit-table/src/Components/Table/Table.stories.tsx
+++ b/packages/react-front-kit-table/src/Components/Table/Table.stories.tsx
@@ -1,17 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import {
-  DownloadSimple,
-  Eye,
-  PencilSimple,
-  ShareNetwork,
-  Star,
-  Trash,
-} from '@phosphor-icons/react';
-import { FolderMove } from '@smile/react-front-kit-shared';
-import { action } from '@storybook/addon-actions';
-
 import { Table as Cmp } from './Table';
+import { tableMock } from './Table.mock';
 
 const meta = {
   component: Cmp,
@@ -25,115 +15,6 @@ type IStory = StoryObj<typeof meta>;
 
 export const Table: IStory = {
   args: {
-    actions: [
-      {
-        icon: <FolderMove />,
-        isMassAction: true,
-        label: 'Move in tree',
-        onAction: action('Move in tree'),
-      },
-      {
-        icon: <Eye />,
-        label: 'Open document',
-        onAction: action('Open document'),
-      },
-      {
-        icon: <PencilSimple />,
-        label: 'Edit document',
-        onAction: action('Edit document'),
-      },
-      {
-        icon: <Star />,
-        label: 'Add to favorites',
-        onAction: action('Add to favorites'),
-      },
-      {
-        confirmation: true,
-        icon: <ShareNetwork />,
-        label: 'Share',
-        onAction: action('Share'),
-      },
-      {
-        icon: <DownloadSimple />,
-        label: 'Download',
-        onAction: action('Download'),
-      },
-      {
-        color: 'red',
-        confirmModalProps: {
-          children: 'Are you sur you want to delete ?',
-          confirmColor: 'red',
-          confirmLabel: 'Delete',
-          onCancel: action('Delete:Cancel'),
-          onConfirm: action('Delete:Confirm'),
-          title: 'Delete ?',
-        },
-        confirmation: true,
-        icon: <Trash />,
-        isMassAction: true,
-        label: 'Delete',
-        onAction: action('Delete'),
-      },
-    ],
-    columns: [
-      {
-        accessorKey: 'id',
-        header: 'id',
-      },
-      {
-        accessorKey: 'format',
-        header: 'Format',
-      },
-      {
-        accessorKey: 'title',
-        header: 'Titre',
-      },
-      {
-        accessorKey: 'creator',
-        header: 'Créateur',
-      },
-      {
-        accessorKey: 'date',
-        header: 'Date publication',
-      },
-    ],
-    data: [
-      {
-        creator: 'Valentin Perello',
-        date: '20/05/2022',
-        format: 'SVG',
-        id: 1,
-        title: 'Doc test',
-      },
-      {
-        creator: 'Valentin Perello',
-        date: '20/05/2022',
-        format: 'PDF',
-        id: 2,
-        title: 'Doc test',
-      },
-      {
-        creator: 'Valentin Perello',
-        date: '20/05/2022',
-        format: 'PDF',
-        id: 3,
-        title: 'Doc test',
-      },
-      {
-        creator: 'Valentin Perello',
-        date: '20/05/2022',
-        format: 'PDF',
-        id: 4,
-        title: 'Doc test',
-      },
-      {
-        creator: 'Valentin Perello',
-        date: '20/05/2022',
-        format: 'PDF',
-        id: 5,
-        title: 'Doc test',
-      },
-    ],
-    rowActionNumber: 3,
+    ...tableMock,
   },
 };
diff --git a/packages/react-front-kit-table/src/Components/Table/Table.tsx b/packages/react-front-kit-table/src/Components/Table/Table.tsx
index 6b5d3c0c..9b1605de 100644
--- a/packages/react-front-kit-table/src/Components/Table/Table.tsx
+++ b/packages/react-front-kit-table/src/Components/Table/Table.tsx
@@ -6,12 +6,10 @@
 
 'use client';
 import type { FloatingPosition } from '@mantine/core/lib/Floating';
-import type {
-  IConfirmModalProps,
-  IPaginationProps,
-} from '@smile/react-front-kit';
+import type { IPaginationProps } from '@smile/react-front-kit';
+import type { IAction, IConfirmAction } from '@smile/react-front-kit-shared';
 import type { MRT_Row, MRT_TableOptions } from 'mantine-react-table';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement } from 'react';
 
 import { ActionIcon, Button, Flex, Menu, Space, Tooltip } from '@mantine/core';
 import {
@@ -35,35 +33,17 @@ import { useState } from 'react';
 
 import { useStyles } from './Table.style';
 
-export interface IActionConfirmModalProps<Data extends Record<string, unknown>>
-  extends Omit<
-    IConfirmModalProps,
-    'onCancel' | 'onClose' | 'onConfirm' | 'opened'
-  > {
-  onCancel?: (row: MRT_Row<Data> | MRT_Row<Data>[]) => false | void;
-  onClose?: () => void;
-  onConfirm?: (row: MRT_Row<Data> | MRT_Row<Data>[]) => false | void;
-}
-
-export interface IAction<Data extends Record<string, unknown>> {
-  color?: string;
-  confirmModalProps?: IActionConfirmModalProps<Data>;
-  confirmation?: boolean;
-  icon: ReactNode;
-  isMassAction?: boolean;
-  isRowAction?: boolean;
-  label: string;
-  onAction?: (row: MRT_Row<Data> | MRT_Row<Data>[]) => void;
-}
+type ITableAction<Data extends Record<string, unknown>> = IAction<
+  MRT_Row<Data> | MRT_Row<Data>[]
+>;
 
-export interface IConfirmAction<Data extends Record<string, unknown>>
-  extends IAction<Data> {
-  row: MRT_Row<Data> | MRT_Row<Data>[];
-}
+type ITableConfirmAction<Data extends Record<string, unknown>> = IConfirmAction<
+  MRT_Row<Data> | MRT_Row<Data>[]
+>;
 
 export interface ITableProps<Data extends Record<string, unknown>>
   extends MRT_TableOptions<Data> {
-  actions?: IAction<Data>[];
+  actions?: ITableAction<Data>[];
   menuLabel?: string;
   paginationProps?: Partial<IPaginationProps>;
   rowActionNumber?: number;
@@ -94,14 +74,14 @@ export function Table<Data extends Record<string, unknown>>(
   const { enablePagination = true, manualPagination } = mantineTableProps;
   const { classes } = useStyles();
   const [confirmAction, setConfirmAction] =
-    useState<IConfirmAction<Data> | null>(null);
+    useState<ITableConfirmAction<Data> | null>(null);
   const [openedMenuRowIndex, setOpenedMenuRowIndex] = useState<number | null>(
     null,
   );
 
   // Calculated values
   const massActions = actions.filter(({ isMassAction }) => isMassAction);
-  const rowActions = actions.filter(({ isRowAction = true }) => isRowAction);
+  const rowActions = actions.filter(({ isItemAction = true }) => isItemAction);
   const visibleRowActions = rowActions.slice(0, rowActionNumber);
   const menuRowActions = rowActions.slice(rowActionNumber);
 
@@ -115,19 +95,19 @@ export function Table<Data extends Record<string, unknown>>(
   }
 
   function handleAction(
-    row: MRT_Row<Data> | MRT_Row<Data>[],
-    action: IAction<Data>,
+    item: MRT_Row<Data> | MRT_Row<Data>[],
+    action: ITableAction<Data>,
   ): void {
     if (action.confirmation) {
-      setConfirmAction({ ...action, row });
+      setConfirmAction({ ...action, item });
     } else {
-      action.onAction?.(row);
+      action.onAction?.(item);
     }
   }
 
   function handleCancel(): void {
     if (
-      confirmAction?.confirmModalProps?.onCancel?.(confirmAction.row) !== false
+      confirmAction?.confirmModalProps?.onCancel?.(confirmAction.item) !== false
     ) {
       setConfirmAction(null);
     }
@@ -140,10 +120,11 @@ export function Table<Data extends Record<string, unknown>>(
 
   function handleConfirm(): void {
     if (
-      confirmAction?.confirmModalProps?.onConfirm?.(confirmAction.row) !== false
+      confirmAction?.confirmModalProps?.onConfirm?.(confirmAction.item) !==
+      false
     ) {
       setConfirmAction(null);
-      confirmAction?.onAction?.(confirmAction.row);
+      confirmAction?.onAction?.(confirmAction.item);
     }
   }
 
diff --git a/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.mock.tsx b/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.mock.tsx
new file mode 100644
index 00000000..bbc15e0e
--- /dev/null
+++ b/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.mock.tsx
@@ -0,0 +1,136 @@
+import type { ITableGridViewProps } from './TableGridView';
+import type { IThumbnail } from '@smile/react-front-kit';
+import type { IThumbnailAction } from '@smile/react-front-kit/src';
+import type { HandlerFunction } from '@storybook/addon-actions';
+
+import {
+  DownloadSimple,
+  Eye,
+  PencilSimple,
+  ShareNetwork,
+  Star,
+  Trash,
+} from '@phosphor-icons/react';
+import { FolderMove } from '@smile/react-front-kit';
+import { action } from '@storybook/addon-actions';
+
+import { tableMock } from '../Table/Table.mock';
+
+const thumbnailActionsMock: IThumbnailAction[] = [
+  {
+    icon: <FolderMove />,
+    id: 'move',
+    label: 'Move in tree',
+    onAction: action('Move in tree'),
+  },
+  {
+    icon: <Eye />,
+    id: 'open',
+    label: 'Open document',
+    onAction: action('Open document'),
+  },
+  {
+    icon: <PencilSimple />,
+    id: 'edit',
+    label: 'Edit document',
+    onAction: action('Edit document'),
+  },
+  {
+    icon: <Star />,
+    id: 'favorite',
+    label: 'Add to favorites',
+    onAction: action('Add to favorites'),
+  },
+  {
+    icon: <ShareNetwork />,
+    id: 'share',
+    label: 'Share',
+    onAction: action('Share'),
+  },
+  {
+    icon: <DownloadSimple />,
+    id: 'download',
+    label: 'Download',
+    onAction: action('Download'),
+  },
+  {
+    color: 'red',
+    confirmModalProps: {
+      cancelLabel: 'Abort',
+      children: <p>Are you sure ?</p>,
+      confirmColor: 'red',
+      confirmLabel: 'Remove',
+      title: 'Remove File',
+    },
+    confirmation: true,
+    icon: <Trash />,
+    id: 'delete',
+    label: 'Delete',
+    onAction: action('Delete'),
+  },
+];
+
+const baseThumbnailMock: Omit<IThumbnail, 'id' | 'label'> = {
+  actions: thumbnailActionsMock,
+  iconType: 'PDF',
+};
+
+const thumbnailsMock: IThumbnail[] = [
+  {
+    id: '1',
+    label: 'Debit_Suivi_PREV',
+    ...baseThumbnailMock,
+  },
+  {
+    id: '2',
+    label: 'Debit_Suivi_PREV_2',
+    ...baseThumbnailMock,
+    selected: true,
+  },
+  {
+    id: '3',
+    label: 'Debit_Suivi_PREV_3',
+    ...baseThumbnailMock,
+  },
+];
+
+const thumbnailGridMock = {
+  cols: 5,
+  gridActions: [
+    {
+      icon: <FolderMove size={16} />,
+      id: 'move',
+      label: 'Move in tree',
+      onAction: action('Move selected in tree'),
+    },
+    {
+      color: 'red',
+      confirmModalProps: {
+        cancelLabel: 'Abort',
+        children: <p>Are you sure ?</p>,
+        confirmColor: 'red',
+        confirmLabel: 'Remove',
+        title: 'remove x files ?',
+      },
+      confirmation: true,
+      icon: <Trash size={16} />,
+      id: 'delete',
+      label: 'Delete',
+      onAction: action('Delete selected'),
+    },
+  ],
+  onThumbnailClick: (): HandlerFunction => action('Thumbnail clicked'),
+  spacing: 25,
+  thumbnails: thumbnailsMock,
+  verticalSpacing: 25,
+};
+
+const { data, ...tableProps } = tableMock;
+const { thumbnails, ...gridProps } = thumbnailGridMock;
+
+export const tableGridViewProps: ITableGridViewProps<Record<string, unknown>> =
+  {
+    data,
+    gridProps: { ...gridProps, idFieldName: 'id', labelFieldName: 'title' },
+    tableProps,
+  };
diff --git a/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.stories.tsx b/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.stories.tsx
new file mode 100644
index 00000000..4e678cd6
--- /dev/null
+++ b/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TableGridView as Cmp } from './TableGridView';
+import { tableGridViewProps } from './TableGridView.mock';
+
+const meta = {
+  component: Cmp,
+  tags: ['autodocs'],
+  title: '3-custom/Components/TableGridView',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const TableGridView: IStory = {
+  args: { ...tableGridViewProps },
+};
diff --git a/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.test.tsx b/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.test.tsx
new file mode 100644
index 00000000..ec044ffa
--- /dev/null
+++ b/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.test.tsx
@@ -0,0 +1,17 @@
+import { renderWithProviders } from '@smile/react-front-kit-shared/src/test-utils';
+
+import { TableGridView } from './TableGridView';
+import { tableGridViewProps } from './TableGridView.mock';
+
+describe('TableGridView', () => {
+  beforeEach(() => {
+    // Prevent mantine random ID
+    Math.random = () => 0.42;
+  });
+  it('matches snapshot', () => {
+    const { container } = renderWithProviders(
+      <TableGridView {...tableGridViewProps} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.tsx b/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.tsx
new file mode 100644
index 00000000..804dace7
--- /dev/null
+++ b/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.tsx
@@ -0,0 +1,135 @@
+import type { ITableProps } from '../Table/Table';
+import type {
+  IDataView,
+  ISwitchableViewProps,
+  IThumbnail,
+  IThumbnailGridProps,
+} from '@smile/react-front-kit';
+import type { MRT_RowSelectionState } from 'mantine-react-table';
+import type { ReactElement } from 'react';
+
+import { createStyles } from '@mantine/styles';
+import { ListBullets, SquaresFour } from '@phosphor-icons/react';
+import {
+  SwitchableView,
+  ThumbnailGrid,
+  isNotNullNorEmpty,
+  typeGuard,
+} from '@smile/react-front-kit';
+import { useState } from 'react';
+
+import { Table } from '../Table/Table';
+
+const useStyles = createStyles(() => ({
+  tablePaper: {
+    border: 'none',
+    borderRadius: '4px',
+  },
+}));
+
+export interface ITableGridViewGridProps
+  extends Omit<IThumbnailGridProps, 'thumbnails'> {
+  idFieldName: string;
+  imageFieldName?: string;
+  labelFieldName: string;
+}
+
+export interface ITableGridViewProps<Data extends Record<string, unknown>>
+  extends Omit<ISwitchableViewProps, 'views'> {
+  data: Data[];
+  defaultView?: 'grid' | 'table';
+  gridProps: ITableGridViewGridProps;
+  tableProps: Omit<ITableProps<Data>, 'data'>;
+}
+
+export function TableGridView<Data extends Record<string, unknown>>(
+  props: ITableGridViewProps<Data>,
+): ReactElement {
+  const {
+    data,
+    defaultView = 'table',
+    gridProps,
+    tableProps,
+    ...switchableViewProps
+  } = props;
+  const { idFieldName, labelFieldName, imageFieldName, ...otherGridProps } =
+    gridProps;
+  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
+  const selectedIndexes = Object.entries(rowSelection).map((entry) =>
+    entry[1] ? entry[0] : null,
+  );
+  const { classes } = useStyles();
+
+  const extendedTableProps: ITableProps<Data> = {
+    data,
+    enableBottomToolbar: false,
+    enableRowSelection: true,
+    mantinePaperProps: {
+      className: classes.tablePaper,
+    },
+    onRowSelectionChange: setRowSelection,
+    state: { rowSelection },
+    ...tableProps,
+  };
+
+  const thumbnails: IThumbnail[] = data
+    .map((item, index) => {
+      const id = item[gridProps.idFieldName];
+      const label = item[gridProps.labelFieldName];
+      const image =
+        gridProps.imageFieldName !== undefined
+          ? (item[gridProps.imageFieldName] as string)
+          : undefined;
+      const isSelected = selectedIndexes.includes(index.toString());
+
+      if (
+        (typeGuard(id, 'number') || typeGuard(id, 'string')) &&
+        typeGuard(label, 'string')
+      ) {
+        const thumbnail: IThumbnail = {
+          ...item,
+          id,
+          image,
+          label,
+          selected: isSelected,
+        };
+        return thumbnail;
+      }
+      return null;
+    })
+    .filter(isNotNullNorEmpty);
+
+  function handleThumbnailSelect(index: number): void {
+    const newRowSelection = { ...rowSelection };
+    newRowSelection[index] = !newRowSelection[index];
+    setRowSelection(newRowSelection);
+  }
+
+  const views: IDataView[] = [
+    {
+      dataView: <Table {...extendedTableProps} />,
+      label: <ListBullets />,
+      value: 'table',
+    },
+    {
+      dataView: (
+        <ThumbnailGrid
+          thumbnails={thumbnails}
+          {...otherGridProps}
+          onThumbnailClick={(_, i) => handleThumbnailSelect(i)}
+        />
+      ),
+      label: <SquaresFour />,
+      value: 'grid',
+    },
+  ];
+
+  return (
+    <SwitchableView
+      {...switchableViewProps}
+      defaultValue={defaultView === 'table' ? 0 : 1}
+      style={{ gap: 32 }}
+      views={views}
+    />
+  );
+}
diff --git a/packages/react-front-kit-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap b/packages/react-front-kit-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap
new file mode 100644
index 00000000..32d5cb5b
--- /dev/null
+++ b/packages/react-front-kit-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap
@@ -0,0 +1,2032 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableGridView matches snapshot 1`] = `
+<div>
+  <div
+    class="mantine-Paper-root mantine-z9bo1e"
+    style="gap: 32px;"
+  >
+    <div
+      class="mantine-v9qkjz"
+    >
+      <span
+        class="mantine-qobh7"
+      >
+        <div
+          class="mantine-SegmentedControl-root mantine-np8w2m"
+        >
+          <span
+            class="mantine-SegmentedControl-indicator mantine-1dj3pci"
+          />
+          <div
+            class="___ref-control mantine-SegmentedControl-control mantine-SegmentedControl-controlActive mantine-92jry0"
+          >
+            <input
+              checked=""
+              class="mantine-1qq2b01 mantine-SegmentedControl-input"
+              id="mantine-f4bipx4bi-table"
+              name="mantine-f4bipx4bi"
+              type="radio"
+              value="table"
+            />
+            <label
+              class="___ref-label mantine-SegmentedControl-label mantine-1sk7jdh"
+              data-active="true"
+              for="mantine-f4bipx4bi-table"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 256 256"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M80,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H88A8,8,0,0,1,80,64Zm136,56H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,64H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM44,52A12,12,0,1,0,56,64,12,12,0,0,0,44,52Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,116Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,180Z"
+                />
+              </svg>
+            </label>
+          </div>
+          <div
+            class="___ref-control mantine-1ryipl8 mantine-SegmentedControl-control"
+          >
+            <input
+              class="mantine-1qq2b01 mantine-SegmentedControl-input"
+              id="mantine-f4bipx4bi-grid"
+              name="mantine-f4bipx4bi"
+              type="radio"
+              value="grid"
+            />
+            <label
+              class="___ref-label mantine-SegmentedControl-label mantine-1sk7jdh"
+              for="mantine-f4bipx4bi-grid"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 256 256"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </span>
+    </div>
+    <div
+      class="mantine-l6ko5p"
+    >
+      <div
+        class="mantine-Paper-root mantine-n32i6g"
+        data-with-border="true"
+      >
+        <div
+          class="mantine-kq5u63"
+        >
+          <div
+            class="mantine-1bd5g77"
+          >
+            <span />
+            <div
+              class="mantine-24itsn"
+            >
+              <div
+                class="mantine-hiv720"
+              >
+                <div
+                  class="mantine-1inlmjw"
+                >
+                  <button
+                    aria-label="Show/Hide filters"
+                    class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1kdujgf"
+                    type="button"
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="18"
+                      viewBox="0 0 256 256"
+                      width="18"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm108.34,72.28A15.92,15.92,0,0,0,144,139.17v55.49L112,216V139.17a15.92,15.92,0,0,0-4.32-10.94L40,56H216Z"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    aria-controls="mantine-f4bipx4bi-dropdown"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Show/Hide columns"
+                    class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1kdujgf"
+                    id="mantine-f4bipx4bi-target"
+                    type="button"
+                  >
+                    <svg
+                      fill="none"
+                      height="1em"
+                      stroke="currentColor"
+                      viewBox="0 0 12 12"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3 1.86005V10.11"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M5.99988 1.875V10.125"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M9.0083 1.88995V6.76495"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M8.9812 8.63989V10.8899"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M7.8562 9.76489H10.1062"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="mantine-11drpgf"
+            style="box-sizing: border-box; display: none; height: 0px; overflow: hidden;"
+          >
+            <div
+              style="opacity: 0; transition: opacity 200ms ease;"
+            >
+              <div
+                aria-busy="true"
+                class="mantine-Progress-root mantine-1yhs8s7"
+              >
+                <div
+                  aria-label="Loading"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  aria-valuenow="100"
+                  class="mantine-14727m2 mantine-Progress-bar"
+                  data-animate="true"
+                  data-striped="true"
+                  role="progressbar"
+                  style="width: 100%;"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="mantine-1m3tpc2"
+        >
+          <table
+            class="mantine-Table-root mantine-ftlslj"
+            data-hover="true"
+            style="--header-mrt_row_select-size: 60; --col-mrt_row_select-size: 60; --header-id-size: 180; --col-id-size: 180; --header-format-size: 180; --col-format-size: 180; --header-title-size: 180; --col-title-size: 180; --header-creator-size: 180; --col-creator-size: 180; --header-date-size: 180; --col-date-size: 180; --header-mrt_row_actions-size: 124; --col-mrt_row_actions-size: 124;"
+          >
+            <thead
+              class="mantine-cnjrhp"
+            >
+              <tr
+                class="mantine-15ayjbz"
+              >
+                <th
+                  align="left"
+                  class="mantine-1hz932c"
+                  colspan="1"
+                >
+                  <div
+                    class="mantine-TableHeadCell-Content mantine-1g7noys"
+                  >
+                    <div
+                      class="mantine-TableHeadCell-Content-Labels mantine-v9lbua"
+                    >
+                      <div
+                        class="mantine-TableHeadCell-Content-Wrapper mantine-hnifc4"
+                      >
+                        <span
+                          class=""
+                        >
+                          <div
+                            class="mantine-Checkbox-root mantine-yxmaw9"
+                          >
+                            <div
+                              class="mantine-hqx0d1 mantine-Checkbox-body"
+                            >
+                              <div
+                                class="mantine-1uaka31 mantine-Checkbox-inner"
+                              >
+                                <input
+                                  aria-label="Toggle select all"
+                                  class="mantine-xl3ql4 mantine-Checkbox-input"
+                                  id="mantine-f4bipx4bi"
+                                  type="checkbox"
+                                />
+                                <svg
+                                  class="___ref-icon mantine-q9qwbl mantine-Checkbox-icon"
+                                  fill="none"
+                                  viewBox="0 0 10 7"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    clip-rule="evenodd"
+                                    d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+                                    fill="currentColor"
+                                    fill-rule="evenodd"
+                                  />
+                                </svg>
+                              </div>
+                              <div
+                                class="mantine-1yohcga mantine-Checkbox-labelWrapper"
+                              />
+                            </div>
+                          </div>
+                        </span>
+                      </div>
+                    </div>
+                    <div
+                      class="mantine-TableHeadCell-Content-Actions mantine-1tfj5gu"
+                    />
+                  </div>
+                </th>
+                <th
+                  align="left"
+                  class="mantine-ob5ro6"
+                  colspan="1"
+                >
+                  <div
+                    class="mantine-TableHeadCell-Content mantine-1g7noys"
+                  >
+                    <div
+                      class="mantine-TableHeadCell-Content-Labels mantine-1844cz"
+                    >
+                      <div
+                        class="mantine-TableHeadCell-Content-Wrapper mantine-1uskmy4"
+                        title="id"
+                      >
+                        id
+                      </div>
+                      <div
+                        class="mantine-Indicator-root mantine-1ru0l9l"
+                      >
+                        <button
+                          aria-label="Sort by id descending"
+                          class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1cs3vwn"
+                          type="button"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 256 256"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="mantine-TableHeadCell-Content-Actions mantine-1tfj5gu"
+                    >
+                      <button
+                        aria-controls="mantine-f4bipx4bi-dropdown"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Column Actions"
+                        class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1q2z0fp"
+                        id="mantine-f4bipx4bi-target"
+                        type="button"
+                      >
+                        <svg
+                          class="tabler-icon tabler-icon-dots-vertical"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                          <path
+                            d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                          <path
+                            d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="mantine-1avyp1d"
+                    style="box-sizing: border-box; display: none; height: 0px; overflow: hidden;"
+                  >
+                    <div
+                      style="opacity: 0; transition: opacity 200ms ease;"
+                    >
+                      <div
+                        class="mantine-1fr50if"
+                      >
+                        <div
+                          class="mantine-374oww"
+                        >
+                          <div
+                            class="mantine-InputWrapper-root mantine-TextInput-root mantine-1xcks7r"
+                          >
+                            <div
+                              class="mantine-Input-wrapper mantine-TextInput-wrapper mantine-1v7s5f8"
+                            >
+                              <input
+                                aria-invalid="false"
+                                class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
+                                id="mantine-f4bipx4bi"
+                                placeholder="Filter by id"
+                                title="Filter by id"
+                                type="text"
+                                value=""
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </th>
+                <th
+                  align="left"
+                  class="mantine-rt9ixh"
+                  colspan="1"
+                >
+                  <div
+                    class="mantine-TableHeadCell-Content mantine-1g7noys"
+                  >
+                    <div
+                      class="mantine-TableHeadCell-Content-Labels mantine-1844cz"
+                    >
+                      <div
+                        class="mantine-TableHeadCell-Content-Wrapper mantine-1uskmy4"
+                        title="Format"
+                      >
+                        Format
+                      </div>
+                      <div
+                        class="mantine-Indicator-root mantine-1ru0l9l"
+                      >
+                        <button
+                          aria-label="Sort by Format ascending"
+                          class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1cs3vwn"
+                          type="button"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 256 256"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="mantine-TableHeadCell-Content-Actions mantine-1tfj5gu"
+                    >
+                      <button
+                        aria-controls="mantine-f4bipx4bi-dropdown"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Column Actions"
+                        class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1q2z0fp"
+                        id="mantine-f4bipx4bi-target"
+                        type="button"
+                      >
+                        <svg
+                          class="tabler-icon tabler-icon-dots-vertical"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                          <path
+                            d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                          <path
+                            d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="mantine-1avyp1d"
+                    style="box-sizing: border-box; display: none; height: 0px; overflow: hidden;"
+                  >
+                    <div
+                      style="opacity: 0; transition: opacity 200ms ease;"
+                    >
+                      <div
+                        class="mantine-1fr50if"
+                      >
+                        <div
+                          class="mantine-374oww"
+                        >
+                          <div
+                            class="mantine-InputWrapper-root mantine-TextInput-root mantine-1xcks7r"
+                          >
+                            <div
+                              class="mantine-Input-wrapper mantine-TextInput-wrapper mantine-1v7s5f8"
+                            >
+                              <input
+                                aria-invalid="false"
+                                class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
+                                id="mantine-f4bipx4bi"
+                                placeholder="Filter by Format"
+                                title="Filter by Format"
+                                type="text"
+                                value=""
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </th>
+                <th
+                  align="left"
+                  class="mantine-l9sc9x"
+                  colspan="1"
+                >
+                  <div
+                    class="mantine-TableHeadCell-Content mantine-1g7noys"
+                  >
+                    <div
+                      class="mantine-TableHeadCell-Content-Labels mantine-1844cz"
+                    >
+                      <div
+                        class="mantine-TableHeadCell-Content-Wrapper mantine-1uskmy4"
+                        title="Titre"
+                      >
+                        Titre
+                      </div>
+                      <div
+                        class="mantine-Indicator-root mantine-1ru0l9l"
+                      >
+                        <button
+                          aria-label="Sort by Titre ascending"
+                          class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1cs3vwn"
+                          type="button"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 256 256"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="mantine-TableHeadCell-Content-Actions mantine-1tfj5gu"
+                    >
+                      <button
+                        aria-controls="mantine-f4bipx4bi-dropdown"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Column Actions"
+                        class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1q2z0fp"
+                        id="mantine-f4bipx4bi-target"
+                        type="button"
+                      >
+                        <svg
+                          class="tabler-icon tabler-icon-dots-vertical"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                          <path
+                            d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                          <path
+                            d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="mantine-1avyp1d"
+                    style="box-sizing: border-box; display: none; height: 0px; overflow: hidden;"
+                  >
+                    <div
+                      style="opacity: 0; transition: opacity 200ms ease;"
+                    >
+                      <div
+                        class="mantine-1fr50if"
+                      >
+                        <div
+                          class="mantine-374oww"
+                        >
+                          <div
+                            class="mantine-InputWrapper-root mantine-TextInput-root mantine-1xcks7r"
+                          >
+                            <div
+                              class="mantine-Input-wrapper mantine-TextInput-wrapper mantine-1v7s5f8"
+                            >
+                              <input
+                                aria-invalid="false"
+                                class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
+                                id="mantine-f4bipx4bi"
+                                placeholder="Filter by Titre"
+                                title="Filter by Titre"
+                                type="text"
+                                value=""
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </th>
+                <th
+                  align="left"
+                  class="mantine-170rqft"
+                  colspan="1"
+                >
+                  <div
+                    class="mantine-TableHeadCell-Content mantine-1g7noys"
+                  >
+                    <div
+                      class="mantine-TableHeadCell-Content-Labels mantine-1844cz"
+                    >
+                      <div
+                        class="mantine-TableHeadCell-Content-Wrapper mantine-1uskmy4"
+                        title="Créateur"
+                      >
+                        Créateur
+                      </div>
+                      <div
+                        class="mantine-Indicator-root mantine-1ru0l9l"
+                      >
+                        <button
+                          aria-label="Sort by Créateur ascending"
+                          class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1cs3vwn"
+                          type="button"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 256 256"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="mantine-TableHeadCell-Content-Actions mantine-1tfj5gu"
+                    >
+                      <button
+                        aria-controls="mantine-f4bipx4bi-dropdown"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Column Actions"
+                        class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1q2z0fp"
+                        id="mantine-f4bipx4bi-target"
+                        type="button"
+                      >
+                        <svg
+                          class="tabler-icon tabler-icon-dots-vertical"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                          <path
+                            d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                          <path
+                            d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="mantine-1avyp1d"
+                    style="box-sizing: border-box; display: none; height: 0px; overflow: hidden;"
+                  >
+                    <div
+                      style="opacity: 0; transition: opacity 200ms ease;"
+                    >
+                      <div
+                        class="mantine-1fr50if"
+                      >
+                        <div
+                          class="mantine-374oww"
+                        >
+                          <div
+                            class="mantine-InputWrapper-root mantine-TextInput-root mantine-1xcks7r"
+                          >
+                            <div
+                              class="mantine-Input-wrapper mantine-TextInput-wrapper mantine-1v7s5f8"
+                            >
+                              <input
+                                aria-invalid="false"
+                                class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
+                                id="mantine-f4bipx4bi"
+                                placeholder="Filter by Créateur"
+                                title="Filter by Créateur"
+                                type="text"
+                                value=""
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </th>
+                <th
+                  align="left"
+                  class="mantine-1adclxe"
+                  colspan="1"
+                >
+                  <div
+                    class="mantine-TableHeadCell-Content mantine-1g7noys"
+                  >
+                    <div
+                      class="mantine-TableHeadCell-Content-Labels mantine-1844cz"
+                    >
+                      <div
+                        class="mantine-TableHeadCell-Content-Wrapper mantine-1uskmy4"
+                        title="Date publication"
+                      >
+                        Date publication
+                      </div>
+                      <div
+                        class="mantine-Indicator-root mantine-1ru0l9l"
+                      >
+                        <button
+                          aria-label="Sort by Date publication ascending"
+                          class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1cs3vwn"
+                          type="button"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 256 256"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="mantine-TableHeadCell-Content-Actions mantine-1tfj5gu"
+                    >
+                      <button
+                        aria-controls="mantine-f4bipx4bi-dropdown"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Column Actions"
+                        class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1q2z0fp"
+                        id="mantine-f4bipx4bi-target"
+                        type="button"
+                      >
+                        <svg
+                          class="tabler-icon tabler-icon-dots-vertical"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                          <path
+                            d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                          <path
+                            d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="mantine-1avyp1d"
+                    style="box-sizing: border-box; display: none; height: 0px; overflow: hidden;"
+                  >
+                    <div
+                      style="opacity: 0; transition: opacity 200ms ease;"
+                    >
+                      <div
+                        class="mantine-1fr50if"
+                      >
+                        <div
+                          class="mantine-374oww"
+                        >
+                          <div
+                            class="mantine-InputWrapper-root mantine-TextInput-root mantine-1xcks7r"
+                          >
+                            <div
+                              class="mantine-Input-wrapper mantine-TextInput-wrapper mantine-1v7s5f8"
+                            >
+                              <input
+                                aria-invalid="false"
+                                class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
+                                id="mantine-f4bipx4bi"
+                                placeholder="Filter by Date publication"
+                                title="Filter by Date publication"
+                                type="text"
+                                value=""
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </th>
+                <th
+                  align="left"
+                  class="mantine-1az7xvu"
+                  colspan="1"
+                >
+                  <div
+                    class="mantine-TableHeadCell-Content mantine-1g7noys"
+                  >
+                    <div
+                      class="mantine-TableHeadCell-Content-Labels mantine-v9lbua"
+                    >
+                      <div
+                        class="mantine-TableHeadCell-Content-Wrapper mantine-hnifc4"
+                      />
+                    </div>
+                    <div
+                      class="mantine-TableHeadCell-Content-Actions mantine-1tfj5gu"
+                    />
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="mantine-yzu17x"
+            >
+              <tr
+                class="mantine-2kfh7k"
+              >
+                <td
+                  class="mantine-iz2iwx"
+                >
+                  <span
+                    class=""
+                  >
+                    <div
+                      class="mantine-Checkbox-root mantine-yxmaw9"
+                    >
+                      <div
+                        class="mantine-hqx0d1 mantine-Checkbox-body"
+                      >
+                        <div
+                          class="mantine-1uaka31 mantine-Checkbox-inner"
+                        >
+                          <input
+                            aria-label="Toggle select row"
+                            class="mantine-xl3ql4 mantine-Checkbox-input"
+                            id="mantine-f4bipx4bi"
+                            type="checkbox"
+                          />
+                          <svg
+                            class="___ref-icon mantine-q9qwbl mantine-Checkbox-icon"
+                            fill="none"
+                            viewBox="0 0 10 7"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="mantine-1yohcga mantine-Checkbox-labelWrapper"
+                        />
+                      </div>
+                    </div>
+                  </span>
+                </td>
+                <td
+                  class="mantine-cmnkbf"
+                >
+                  1
+                </td>
+                <td
+                  class="mantine-1aycf16"
+                >
+                  SVG
+                </td>
+                <td
+                  class="mantine-1iml2fb"
+                >
+                  Doc test 1
+                </td>
+                <td
+                  class="mantine-o5n4lc"
+                >
+                  Valentin Perello
+                </td>
+                <td
+                  class="mantine-emurma"
+                >
+                  16/05/2022
+                </td>
+                <td
+                  class="mantine-vej1ag"
+                >
+                  <div
+                    class="___ref-rowActions mantine-1idxz77"
+                  >
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="none"
+                        height="1em"
+                        stroke="currentColor"
+                        viewBox="0 0 12 12"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.58333 10H1.41667C1.30616 10 1.20018 9.95564 1.12204 9.87668C1.0439 9.79771 1 9.69062 1 9.57895V2.42105C1 2.30938 1.0439 2.20229 1.12204 2.12332C1.20018 2.04436 1.30616 2 1.41667 2H4.19271C4.2828 2.00037 4.37041 2.02988 4.44271 2.08421L5.89062 3.17895C5.96292 3.23327 6.05053 3.26278 6.14062 3.26316H10.5833C10.6938 3.26316 10.7998 3.30752 10.878 3.38648C10.9561 3.46544 11 3.57254 11 3.68421V5.36842"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M6 9H11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M9 7L11 9L9 11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      aria-controls="mantine-f4bipx4bi-dropdown"
+                      aria-expanded="false"
+                      aria-haspopup="menu"
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-elystm"
+                      id="mantine-f4bipx4bi-target"
+                      type="button"
+                    >
+                      <div
+                        class="mantine-jm9ogu"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 256 256"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM128,72a12,12,0,1,0-12-12A12,12,0,0,0,128,72Zm0,112a12,12,0,1,0,12,12A12,12,0,0,0,128,184Z"
+                          />
+                        </svg>
+                      </div>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="mantine-2kfh7k"
+              >
+                <td
+                  class="mantine-iz2iwx"
+                >
+                  <span
+                    class=""
+                  >
+                    <div
+                      class="mantine-Checkbox-root mantine-yxmaw9"
+                    >
+                      <div
+                        class="mantine-hqx0d1 mantine-Checkbox-body"
+                      >
+                        <div
+                          class="mantine-1uaka31 mantine-Checkbox-inner"
+                        >
+                          <input
+                            aria-label="Toggle select row"
+                            class="mantine-xl3ql4 mantine-Checkbox-input"
+                            id="mantine-f4bipx4bi"
+                            type="checkbox"
+                          />
+                          <svg
+                            class="___ref-icon mantine-q9qwbl mantine-Checkbox-icon"
+                            fill="none"
+                            viewBox="0 0 10 7"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="mantine-1yohcga mantine-Checkbox-labelWrapper"
+                        />
+                      </div>
+                    </div>
+                  </span>
+                </td>
+                <td
+                  class="mantine-cmnkbf"
+                >
+                  2
+                </td>
+                <td
+                  class="mantine-1aycf16"
+                >
+                  PDF
+                </td>
+                <td
+                  class="mantine-1iml2fb"
+                >
+                  Doc test 2
+                </td>
+                <td
+                  class="mantine-o5n4lc"
+                >
+                  Valentin Perello
+                </td>
+                <td
+                  class="mantine-emurma"
+                >
+                  17/05/2022
+                </td>
+                <td
+                  class="mantine-vej1ag"
+                >
+                  <div
+                    class="___ref-rowActions mantine-1idxz77"
+                  >
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="none"
+                        height="1em"
+                        stroke="currentColor"
+                        viewBox="0 0 12 12"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.58333 10H1.41667C1.30616 10 1.20018 9.95564 1.12204 9.87668C1.0439 9.79771 1 9.69062 1 9.57895V2.42105C1 2.30938 1.0439 2.20229 1.12204 2.12332C1.20018 2.04436 1.30616 2 1.41667 2H4.19271C4.2828 2.00037 4.37041 2.02988 4.44271 2.08421L5.89062 3.17895C5.96292 3.23327 6.05053 3.26278 6.14062 3.26316H10.5833C10.6938 3.26316 10.7998 3.30752 10.878 3.38648C10.9561 3.46544 11 3.57254 11 3.68421V5.36842"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M6 9H11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M9 7L11 9L9 11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      aria-controls="mantine-f4bipx4bi-dropdown"
+                      aria-expanded="false"
+                      aria-haspopup="menu"
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-elystm"
+                      id="mantine-f4bipx4bi-target"
+                      type="button"
+                    >
+                      <div
+                        class="mantine-jm9ogu"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 256 256"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM128,72a12,12,0,1,0-12-12A12,12,0,0,0,128,72Zm0,112a12,12,0,1,0,12,12A12,12,0,0,0,128,184Z"
+                          />
+                        </svg>
+                      </div>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="mantine-2kfh7k"
+              >
+                <td
+                  class="mantine-iz2iwx"
+                >
+                  <span
+                    class=""
+                  >
+                    <div
+                      class="mantine-Checkbox-root mantine-yxmaw9"
+                    >
+                      <div
+                        class="mantine-hqx0d1 mantine-Checkbox-body"
+                      >
+                        <div
+                          class="mantine-1uaka31 mantine-Checkbox-inner"
+                        >
+                          <input
+                            aria-label="Toggle select row"
+                            class="mantine-xl3ql4 mantine-Checkbox-input"
+                            id="mantine-f4bipx4bi"
+                            type="checkbox"
+                          />
+                          <svg
+                            class="___ref-icon mantine-q9qwbl mantine-Checkbox-icon"
+                            fill="none"
+                            viewBox="0 0 10 7"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="mantine-1yohcga mantine-Checkbox-labelWrapper"
+                        />
+                      </div>
+                    </div>
+                  </span>
+                </td>
+                <td
+                  class="mantine-cmnkbf"
+                >
+                  3
+                </td>
+                <td
+                  class="mantine-1aycf16"
+                >
+                  PDF
+                </td>
+                <td
+                  class="mantine-1iml2fb"
+                >
+                  Doc test 3
+                </td>
+                <td
+                  class="mantine-o5n4lc"
+                >
+                  Valentin Perello
+                </td>
+                <td
+                  class="mantine-emurma"
+                >
+                  18/05/2022
+                </td>
+                <td
+                  class="mantine-vej1ag"
+                >
+                  <div
+                    class="___ref-rowActions mantine-1idxz77"
+                  >
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="none"
+                        height="1em"
+                        stroke="currentColor"
+                        viewBox="0 0 12 12"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.58333 10H1.41667C1.30616 10 1.20018 9.95564 1.12204 9.87668C1.0439 9.79771 1 9.69062 1 9.57895V2.42105C1 2.30938 1.0439 2.20229 1.12204 2.12332C1.20018 2.04436 1.30616 2 1.41667 2H4.19271C4.2828 2.00037 4.37041 2.02988 4.44271 2.08421L5.89062 3.17895C5.96292 3.23327 6.05053 3.26278 6.14062 3.26316H10.5833C10.6938 3.26316 10.7998 3.30752 10.878 3.38648C10.9561 3.46544 11 3.57254 11 3.68421V5.36842"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M6 9H11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M9 7L11 9L9 11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      aria-controls="mantine-f4bipx4bi-dropdown"
+                      aria-expanded="false"
+                      aria-haspopup="menu"
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-elystm"
+                      id="mantine-f4bipx4bi-target"
+                      type="button"
+                    >
+                      <div
+                        class="mantine-jm9ogu"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 256 256"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM128,72a12,12,0,1,0-12-12A12,12,0,0,0,128,72Zm0,112a12,12,0,1,0,12,12A12,12,0,0,0,128,184Z"
+                          />
+                        </svg>
+                      </div>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="mantine-2kfh7k"
+              >
+                <td
+                  class="mantine-iz2iwx"
+                >
+                  <span
+                    class=""
+                  >
+                    <div
+                      class="mantine-Checkbox-root mantine-yxmaw9"
+                    >
+                      <div
+                        class="mantine-hqx0d1 mantine-Checkbox-body"
+                      >
+                        <div
+                          class="mantine-1uaka31 mantine-Checkbox-inner"
+                        >
+                          <input
+                            aria-label="Toggle select row"
+                            class="mantine-xl3ql4 mantine-Checkbox-input"
+                            id="mantine-f4bipx4bi"
+                            type="checkbox"
+                          />
+                          <svg
+                            class="___ref-icon mantine-q9qwbl mantine-Checkbox-icon"
+                            fill="none"
+                            viewBox="0 0 10 7"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="mantine-1yohcga mantine-Checkbox-labelWrapper"
+                        />
+                      </div>
+                    </div>
+                  </span>
+                </td>
+                <td
+                  class="mantine-cmnkbf"
+                >
+                  4
+                </td>
+                <td
+                  class="mantine-1aycf16"
+                >
+                  PDF
+                </td>
+                <td
+                  class="mantine-1iml2fb"
+                >
+                  Doc test 4
+                </td>
+                <td
+                  class="mantine-o5n4lc"
+                >
+                  Valentin Perello
+                </td>
+                <td
+                  class="mantine-emurma"
+                >
+                  19/05/2022
+                </td>
+                <td
+                  class="mantine-vej1ag"
+                >
+                  <div
+                    class="___ref-rowActions mantine-1idxz77"
+                  >
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="none"
+                        height="1em"
+                        stroke="currentColor"
+                        viewBox="0 0 12 12"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.58333 10H1.41667C1.30616 10 1.20018 9.95564 1.12204 9.87668C1.0439 9.79771 1 9.69062 1 9.57895V2.42105C1 2.30938 1.0439 2.20229 1.12204 2.12332C1.20018 2.04436 1.30616 2 1.41667 2H4.19271C4.2828 2.00037 4.37041 2.02988 4.44271 2.08421L5.89062 3.17895C5.96292 3.23327 6.05053 3.26278 6.14062 3.26316H10.5833C10.6938 3.26316 10.7998 3.30752 10.878 3.38648C10.9561 3.46544 11 3.57254 11 3.68421V5.36842"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M6 9H11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M9 7L11 9L9 11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      aria-controls="mantine-f4bipx4bi-dropdown"
+                      aria-expanded="false"
+                      aria-haspopup="menu"
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-elystm"
+                      id="mantine-f4bipx4bi-target"
+                      type="button"
+                    >
+                      <div
+                        class="mantine-jm9ogu"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 256 256"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM128,72a12,12,0,1,0-12-12A12,12,0,0,0,128,72Zm0,112a12,12,0,1,0,12,12A12,12,0,0,0,128,184Z"
+                          />
+                        </svg>
+                      </div>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="mantine-2kfh7k"
+              >
+                <td
+                  class="mantine-iz2iwx"
+                >
+                  <span
+                    class=""
+                  >
+                    <div
+                      class="mantine-Checkbox-root mantine-yxmaw9"
+                    >
+                      <div
+                        class="mantine-hqx0d1 mantine-Checkbox-body"
+                      >
+                        <div
+                          class="mantine-1uaka31 mantine-Checkbox-inner"
+                        >
+                          <input
+                            aria-label="Toggle select row"
+                            class="mantine-xl3ql4 mantine-Checkbox-input"
+                            id="mantine-f4bipx4bi"
+                            type="checkbox"
+                          />
+                          <svg
+                            class="___ref-icon mantine-q9qwbl mantine-Checkbox-icon"
+                            fill="none"
+                            viewBox="0 0 10 7"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="mantine-1yohcga mantine-Checkbox-labelWrapper"
+                        />
+                      </div>
+                    </div>
+                  </span>
+                </td>
+                <td
+                  class="mantine-cmnkbf"
+                >
+                  5
+                </td>
+                <td
+                  class="mantine-1aycf16"
+                >
+                  PDF
+                </td>
+                <td
+                  class="mantine-1iml2fb"
+                >
+                  Doc test 5
+                </td>
+                <td
+                  class="mantine-o5n4lc"
+                >
+                  Valentin Perello
+                </td>
+                <td
+                  class="mantine-emurma"
+                >
+                  20/05/2022
+                </td>
+                <td
+                  class="mantine-vej1ag"
+                >
+                  <div
+                    class="___ref-rowActions mantine-1idxz77"
+                  >
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="none"
+                        height="1em"
+                        stroke="currentColor"
+                        viewBox="0 0 12 12"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.58333 10H1.41667C1.30616 10 1.20018 9.95564 1.12204 9.87668C1.0439 9.79771 1 9.69062 1 9.57895V2.42105C1 2.30938 1.0439 2.20229 1.12204 2.12332C1.20018 2.04436 1.30616 2 1.41667 2H4.19271C4.2828 2.00037 4.37041 2.02988 4.44271 2.08421L5.89062 3.17895C5.96292 3.23327 6.05053 3.26278 6.14062 3.26316H10.5833C10.6938 3.26316 10.7998 3.30752 10.878 3.38648C10.9561 3.46544 11 3.57254 11 3.68421V5.36842"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M6 9H11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M9 7L11 9L9 11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      aria-controls="mantine-f4bipx4bi-dropdown"
+                      aria-expanded="false"
+                      aria-haspopup="menu"
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-elystm"
+                      id="mantine-f4bipx4bi-target"
+                      type="button"
+                    >
+                      <div
+                        class="mantine-jm9ogu"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 256 256"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM128,72a12,12,0,1,0-12-12A12,12,0,0,0,128,72Zm0,112a12,12,0,1,0,12,12A12,12,0,0,0,128,184Z"
+                          />
+                        </svg>
+                      </div>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="mantine-2kfh7k"
+              >
+                <td
+                  class="mantine-iz2iwx"
+                >
+                  <span
+                    class=""
+                  >
+                    <div
+                      class="mantine-Checkbox-root mantine-yxmaw9"
+                    >
+                      <div
+                        class="mantine-hqx0d1 mantine-Checkbox-body"
+                      >
+                        <div
+                          class="mantine-1uaka31 mantine-Checkbox-inner"
+                        >
+                          <input
+                            aria-label="Toggle select row"
+                            class="mantine-xl3ql4 mantine-Checkbox-input"
+                            id="mantine-f4bipx4bi"
+                            type="checkbox"
+                          />
+                          <svg
+                            class="___ref-icon mantine-q9qwbl mantine-Checkbox-icon"
+                            fill="none"
+                            viewBox="0 0 10 7"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="mantine-1yohcga mantine-Checkbox-labelWrapper"
+                        />
+                      </div>
+                    </div>
+                  </span>
+                </td>
+                <td
+                  class="mantine-cmnkbf"
+                >
+                  6
+                </td>
+                <td
+                  class="mantine-1aycf16"
+                >
+                  PDF
+                </td>
+                <td
+                  class="mantine-1iml2fb"
+                >
+                  Doc test 6
+                </td>
+                <td
+                  class="mantine-o5n4lc"
+                >
+                  Valentin Perello
+                </td>
+                <td
+                  class="mantine-emurma"
+                >
+                  21/05/2022
+                </td>
+                <td
+                  class="mantine-vej1ag"
+                >
+                  <div
+                    class="___ref-rowActions mantine-1idxz77"
+                  >
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="none"
+                        height="1em"
+                        stroke="currentColor"
+                        viewBox="0 0 12 12"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.58333 10H1.41667C1.30616 10 1.20018 9.95564 1.12204 9.87668C1.0439 9.79771 1 9.69062 1 9.57895V2.42105C1 2.30938 1.0439 2.20229 1.12204 2.12332C1.20018 2.04436 1.30616 2 1.41667 2H4.19271C4.2828 2.00037 4.37041 2.02988 4.44271 2.08421L5.89062 3.17895C5.96292 3.23327 6.05053 3.26278 6.14062 3.26316H10.5833C10.6938 3.26316 10.7998 3.30752 10.878 3.38648C10.9561 3.46544 11 3.57254 11 3.68421V5.36842"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M6 9H11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M9 7L11 9L9 11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      aria-controls="mantine-f4bipx4bi-dropdown"
+                      aria-expanded="false"
+                      aria-haspopup="menu"
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-elystm"
+                      id="mantine-f4bipx4bi-target"
+                      type="button"
+                    >
+                      <div
+                        class="mantine-jm9ogu"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 256 256"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM128,72a12,12,0,1,0-12-12A12,12,0,0,0,128,72Zm0,112a12,12,0,1,0,12,12A12,12,0,0,0,128,184Z"
+                          />
+                        </svg>
+                      </div>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="mantine-2kfh7k"
+              >
+                <td
+                  class="mantine-iz2iwx"
+                >
+                  <span
+                    class=""
+                  >
+                    <div
+                      class="mantine-Checkbox-root mantine-yxmaw9"
+                    >
+                      <div
+                        class="mantine-hqx0d1 mantine-Checkbox-body"
+                      >
+                        <div
+                          class="mantine-1uaka31 mantine-Checkbox-inner"
+                        >
+                          <input
+                            aria-label="Toggle select row"
+                            class="mantine-xl3ql4 mantine-Checkbox-input"
+                            id="mantine-f4bipx4bi"
+                            type="checkbox"
+                          />
+                          <svg
+                            class="___ref-icon mantine-q9qwbl mantine-Checkbox-icon"
+                            fill="none"
+                            viewBox="0 0 10 7"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="mantine-1yohcga mantine-Checkbox-labelWrapper"
+                        />
+                      </div>
+                    </div>
+                  </span>
+                </td>
+                <td
+                  class="mantine-cmnkbf"
+                >
+                  7
+                </td>
+                <td
+                  class="mantine-1aycf16"
+                >
+                  PDF
+                </td>
+                <td
+                  class="mantine-1iml2fb"
+                >
+                  Doc test 7
+                </td>
+                <td
+                  class="mantine-o5n4lc"
+                >
+                  Valentin Perello
+                </td>
+                <td
+                  class="mantine-emurma"
+                >
+                  22/05/2022
+                </td>
+                <td
+                  class="mantine-vej1ag"
+                >
+                  <div
+                    class="___ref-rowActions mantine-1idxz77"
+                  >
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="none"
+                        height="1em"
+                        stroke="currentColor"
+                        viewBox="0 0 12 12"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.58333 10H1.41667C1.30616 10 1.20018 9.95564 1.12204 9.87668C1.0439 9.79771 1 9.69062 1 9.57895V2.42105C1 2.30938 1.0439 2.20229 1.12204 2.12332C1.20018 2.04436 1.30616 2 1.41667 2H4.19271C4.2828 2.00037 4.37041 2.02988 4.44271 2.08421L5.89062 3.17895C5.96292 3.23327 6.05053 3.26278 6.14062 3.26316H10.5833C10.6938 3.26316 10.7998 3.30752 10.878 3.38648C10.9561 3.46544 11 3.57254 11 3.68421V5.36842"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M6 9H11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M9 7L11 9L9 11"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
+                      type="button"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 256 256"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      aria-controls="mantine-f4bipx4bi-dropdown"
+                      aria-expanded="false"
+                      aria-haspopup="menu"
+                      class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-elystm"
+                      id="mantine-f4bipx4bi-target"
+                      type="button"
+                    >
+                      <div
+                        class="mantine-jm9ogu"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 256 256"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM128,72a12,12,0,1,0-12-12A12,12,0,0,0,128,72Zm0,112a12,12,0,1,0,12,12A12,12,0,0,0,128,184Z"
+                          />
+                        </svg>
+                      </div>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+            <tfoot
+              class="mantine-1fbon9v"
+            />
+          </table>
+        </div>
+      </div>
+      <div
+        class="mantine-1cw9ra3"
+      />
+      <div
+        class="mantine-z9baz5"
+        data-testid="pagination"
+      >
+        <div
+          class="mantine-Group-root mantine-11nlj0o"
+          data-testid="pagination-page"
+        >
+          <button
+            aria-current="page"
+            class="mantine-UnstyledButton-root mantine-Pagination-control mantine-v1qgro"
+            data-active="true"
+            type="button"
+          >
+            1
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/react-front-kit/src/Components/ConfirmModal/ConfirmModal.tsx b/packages/react-front-kit/src/Components/ConfirmModal/ConfirmModal.tsx
index ff2e1042..5b8e710a 100644
--- a/packages/react-front-kit/src/Components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/react-front-kit/src/Components/ConfirmModal/ConfirmModal.tsx
@@ -1,21 +1,13 @@
 'use client';
 
-import type { MantineColor, ModalProps } from '@mantine/core';
+import type { IConfirmModal } from '@smile/react-front-kit-shared/src/types/actions';
 import type { ReactElement } from 'react';
 
 import { Button, Modal } from '@mantine/core';
 
 import { useStyles } from './ConfirmModal.style';
 
-export interface IConfirmModalProps extends ModalProps {
-  cancelColor?: MantineColor;
-  cancelLabel?: string;
-  confirmColor?: MantineColor;
-  confirmLabel?: string;
-  onCancel?: () => void;
-  onConfirm?: () => void;
-  title?: string;
-}
+type IConfirmModalProps = IConfirmModal;
 
 export function ConfirmModal(props: IConfirmModalProps): ReactElement {
   const {
diff --git a/packages/react-front-kit/src/Components/SwitchableView/SwitchableView.tsx b/packages/react-front-kit/src/Components/SwitchableView/SwitchableView.tsx
index f6ffd2e7..2afa1287 100644
--- a/packages/react-front-kit/src/Components/SwitchableView/SwitchableView.tsx
+++ b/packages/react-front-kit/src/Components/SwitchableView/SwitchableView.tsx
@@ -45,7 +45,7 @@ export interface IDataView extends SegmentedControlItem {
   dataView: ReactNode;
 }
 
-interface ISwitchableViewProps extends PaperProps {
+export interface ISwitchableViewProps extends PaperProps {
   /** Default index of the active view */
   defaultValue?: number;
   /** Called when active view changes */
diff --git a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.mock.tsx b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.mock.tsx
new file mode 100644
index 00000000..285b153e
--- /dev/null
+++ b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.mock.tsx
@@ -0,0 +1,66 @@
+import type { IThumbnailAction } from './Thumbnail';
+
+import {
+  DownloadSimple,
+  Eye,
+  PencilSimple,
+  ShareNetwork,
+  Star,
+  Trash,
+} from '@phosphor-icons/react';
+import { FolderMove } from '@smile/react-front-kit-shared';
+import { action } from '@storybook/addon-actions';
+
+export const thumbnailActions: IThumbnailAction[] = [
+  {
+    icon: <FolderMove />,
+    id: 'move',
+    label: 'Move in tree',
+    onAction: action('Move in tree'),
+  },
+  {
+    icon: <Eye />,
+    id: 'open',
+    label: 'Open document',
+    onAction: action('Open document'),
+  },
+  {
+    icon: <PencilSimple />,
+    id: 'edit',
+    label: 'Edit document',
+    onAction: action('Edit document'),
+  },
+  {
+    icon: <Star />,
+    id: 'favorite',
+    label: 'Add to favorites',
+    onAction: action('Add to favorites'),
+  },
+  {
+    icon: <ShareNetwork />,
+    id: 'share',
+    label: 'Share',
+    onAction: action('Share'),
+  },
+  {
+    icon: <DownloadSimple />,
+    id: 'download',
+    label: 'Download',
+    onAction: action('Download'),
+  },
+  {
+    color: 'red',
+    confirmModalProps: {
+      cancelLabel: 'Abort',
+      children: <p>Are you sure ?</p>,
+      confirmColor: 'red',
+      confirmLabel: 'Remove',
+      title: 'Remove File',
+    },
+    confirmation: true,
+    icon: <Trash />,
+    id: 'delete',
+    label: 'Delete',
+    onAction: action('Delete'),
+  },
+];
diff --git a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.stories.tsx b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.stories.tsx
index 6b259858..896445c1 100644
--- a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.stories.tsx
+++ b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.stories.tsx
@@ -1,17 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import {
-  DownloadSimple,
-  Eye,
-  PencilSimple,
-  ShareNetwork,
-  Star,
-  Trash,
-} from '@phosphor-icons/react';
-import { FolderMove } from '@smile/react-front-kit-shared';
-import { action } from '@storybook/addon-actions';
-
 import { Thumbnail as Cmp } from './Thumbnail';
+import { thumbnailActions } from './Thumbnail.mock';
 
 const meta = {
   component: Cmp,
@@ -24,53 +14,9 @@ type IStory = StoryObj<typeof meta>;
 
 export const Thumbnail: IStory = {
   args: {
-    action: [
-      {
-        icon: <FolderMove />,
-        label: 'Move in tree',
-        onAction: action('Move in tree'),
-      },
-      {
-        icon: <Eye />,
-        label: 'Open document',
-        onAction: action('Open document'),
-      },
-      {
-        icon: <PencilSimple />,
-        label: 'Edit document',
-        onAction: action('Edit document'),
-      },
-      {
-        icon: <Star />,
-        label: 'Add to favorites',
-        onAction: action('Add to favorites'),
-      },
-      {
-        icon: <ShareNetwork />,
-        label: 'Share',
-        onAction: action('Share'),
-      },
-      {
-        icon: <DownloadSimple />,
-        label: 'Download',
-        onAction: action('Download'),
-      },
-      {
-        color: 'red',
-        confirmModalProps: {
-          cancelLabel: 'Abord',
-          children: <p>Are you sur ?</p>,
-          confirmColor: 'red',
-          confirmLabel: 'Remove',
-          title: 'Remove File',
-        },
-        confirmation: true,
-        icon: <Trash />,
-        label: 'Delete',
-        onAction: action('Delete'),
-      },
-    ],
+    actions: thumbnailActions,
     iconType: 'PDF',
+    id: '1',
     label: 'Debit_Suivi_PREV',
     selected: false,
   },
diff --git a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.style.tsx b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.style.tsx
index 80b3190a..d47f02a7 100644
--- a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.style.tsx
+++ b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.style.tsx
@@ -50,7 +50,8 @@ export const useStyles = createStyles((theme) => ({
   root: {
     background: theme.colors.gray[1],
     borderRadius: '16px',
-    heigh: 'auto',
+    cursor: 'pointer',
+    height: 'auto',
     padding: '16px',
     width: 'auto',
   },
diff --git a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.test.tsx b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.test.tsx
index f8d32278..a16ebb00 100644
--- a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.test.tsx
+++ b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.test.tsx
@@ -4,7 +4,7 @@ import { Thumbnail } from './Thumbnail';
 
 describe('Thumbnail', () => {
   it('matches snapshot', () => {
-    const { container } = renderWithProviders(<Thumbnail />);
+    const { container } = renderWithProviders(<Thumbnail id="test" />);
     expect(container).toMatchSnapshot();
   });
 });
diff --git a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx
index cf7c4a1f..c107ca38 100644
--- a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx
+++ b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx
@@ -1,7 +1,10 @@
 'use client';
 
-import type { IConfirmModalProps } from '../ConfirmModal/ConfirmModal';
-import type { ReactElement, ReactNode } from 'react';
+import type {
+  IAction,
+  IActionConfirmModalProps,
+} from '@smile/react-front-kit-shared/src/types/actions';
+import type { ReactElement } from 'react';
 
 import {
   ActionIcon,
@@ -21,34 +24,26 @@ import { ConfirmModal } from '../ConfirmModal/ConfirmModal';
 
 import { useStyles } from './Thumbnail.style';
 
-export type IActionConfirmModalProps = Omit<
-  IConfirmModalProps,
-  'onClose' | 'opened'
->;
-
-export interface IThumbnailAction {
-  color?: string;
-  confirmModalProps?: IActionConfirmModalProps;
-  confirmation?: boolean;
-  icon: ReactNode;
-  label: string;
-  onAction: () => void;
-}
-
-export interface IThumbnailProps {
-  action?: IThumbnailAction[];
+export interface IThumbnail extends Record<string, unknown> {
   iconType?: string;
+  id: number | string;
   image?: string;
   label?: string;
   onClick?: () => void;
   selected?: boolean;
 }
 
+export type IThumbnailAction = IAction<IThumbnail>;
+
+export interface IThumbnailProps extends IThumbnail {
+  actions?: IThumbnailAction[];
+}
+
 export function Thumbnail(props: IThumbnailProps): ReactElement {
   const { classes } = useStyles();
   const theme = useMantineTheme();
   const {
-    action = [],
+    actions = [],
     iconType,
     image = defaultImage,
     label,
@@ -57,9 +52,9 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
   } = props;
 
   const [confirmAction, setConfirmAction] =
-    useState<IActionConfirmModalProps | null>(null);
+    useState<IActionConfirmModalProps<IThumbnail> | null>(null);
 
-  function clearconfirmAction(): void {
+  function clearConfirmAction(): void {
     setConfirmAction(null);
   }
 
@@ -75,7 +70,7 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
       children: action.confirmModalProps?.children,
       confirmColor: action.confirmModalProps?.confirmColor,
       confirmLabel: action.confirmModalProps?.confirmLabel,
-      onConfirm: action.onAction,
+      onConfirm: () => action.onAction?.(props),
       title: action.confirmModalProps?.title,
     });
   }
@@ -84,15 +79,16 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
     if (action.confirmation) {
       setModal(action);
     } else {
-      action.onAction();
+      action.onAction?.(props);
     }
   }
 
   function handleClose(): void {
-    clearconfirmAction();
+    clearConfirmAction();
   }
-  function handleModalButton(onAction?: () => void): void {
-    onAction && onAction();
+
+  function handleModalButton(onAction?: (item: IThumbnail) => void): void {
+    onAction && onAction(props);
     handleClose();
   }
 
@@ -118,13 +114,14 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
             </Text>
           </div>
           <div>
-            {action.length > 0 && (
+            {actions.length > 0 && (
               <Menu radius={4} shadow="lg" width={200}>
                 <Menu.Target>
                   <ActionIcon
                     className={
                       selected ? classes.menuButtonSelected : classes.menuButton
                     }
+                    onClick={(e) => e.stopPropagation()}
                     radius={4}
                     type="button"
                   >
@@ -137,8 +134,8 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
                     </div>
                   </ActionIcon>
                 </Menu.Target>
-                <Menu.Dropdown>
-                  {action.map((action, index) => (
+                <Menu.Dropdown onClick={(e) => e.stopPropagation()}>
+                  {actions.map((action, index) => (
                     <Menu.Item
                       // eslint-disable-next-line react/no-array-index-key
                       key={index}
diff --git a/packages/react-front-kit/src/Components/Thumbnail/__snapshots__/Thumbnail.test.tsx.snap b/packages/react-front-kit/src/Components/Thumbnail/__snapshots__/Thumbnail.test.tsx.snap
index 63a70d38..478c41c2 100644
--- a/packages/react-front-kit/src/Components/Thumbnail/__snapshots__/Thumbnail.test.tsx.snap
+++ b/packages/react-front-kit/src/Components/Thumbnail/__snapshots__/Thumbnail.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Thumbnail matches snapshot 1`] = `
 <div>
   <div
-    class="mantine-1c8qzc3"
+    class="mantine-af86sk"
   >
     <div
       class="mantine-Group-root mantine-p1wipv"
diff --git a/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.mock.tsx b/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.mock.tsx
new file mode 100644
index 00000000..6c20c00f
--- /dev/null
+++ b/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.mock.tsx
@@ -0,0 +1,63 @@
+import type { IThumbnail } from '../Thumbnail/Thumbnail';
+import type { HandlerFunction } from '@storybook/addon-actions';
+
+import { Trash } from '@phosphor-icons/react';
+import { FolderMove } from '@smile/react-front-kit-shared';
+import { action } from '@storybook/addon-actions';
+
+import { thumbnailActions } from '../Thumbnail/Thumbnail.mock';
+
+export const baseThumbnail: Omit<IThumbnail, 'id' | 'label'> = {
+  actions: thumbnailActions,
+  iconType: 'PDF',
+};
+
+export const thumbnails: IThumbnail[] = [
+  {
+    id: '1',
+    label: 'Debit_Suivi_PREV',
+    ...baseThumbnail,
+  },
+  {
+    id: '2',
+    label: 'Debit_Suivi_PREV_2',
+    ...baseThumbnail,
+    selected: true,
+  },
+  {
+    id: '3',
+    label: 'Debit_Suivi_PREV_3',
+    ...baseThumbnail,
+  },
+];
+
+export const thumbnailGridMock = {
+  cols: 5,
+  gridActions: [
+    {
+      icon: <FolderMove size={16} />,
+      id: 'move',
+      label: 'Move in tree',
+      onAction: action('Move selected in tree'),
+    },
+    {
+      color: 'red',
+      confirmModalProps: {
+        cancelLabel: 'Abort',
+        children: <p>Are you sure ?</p>,
+        confirmColor: 'red',
+        confirmLabel: 'Remove',
+        title: 'remove x files ?',
+      },
+      confirmation: true,
+      icon: <Trash size={16} />,
+      id: 'delete',
+      label: 'Delete',
+      onAction: action('Delete selected'),
+    },
+  ],
+  onThumbnailClick: (): HandlerFunction => action('Thumbnail clicked'),
+  spacing: 25,
+  thumbnails,
+  verticalSpacing: 25,
+};
diff --git a/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.stories.tsx b/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.stories.tsx
new file mode 100644
index 00000000..93eb6303
--- /dev/null
+++ b/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ThumbnailGrid as Cmp } from './ThumbnailGrid';
+import { thumbnailGridMock } from './ThumbnailGrid.mock';
+
+const meta = {
+  component: Cmp,
+  tags: ['autodocs'],
+  title: '3-custom/Components/ThumbnailGrid',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const ThumbnailGrid: IStory = {
+  args: { ...thumbnailGridMock },
+};
diff --git a/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.test.tsx b/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.test.tsx
new file mode 100644
index 00000000..c3c9c385
--- /dev/null
+++ b/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.test.tsx
@@ -0,0 +1,17 @@
+import { renderWithProviders } from '@smile/react-front-kit-shared/src/test-utils';
+
+import { ThumbnailGrid } from './ThumbnailGrid';
+import { thumbnails } from './ThumbnailGrid.mock';
+
+describe('ThumbnailGrid', () => {
+  beforeEach(() => {
+    // Prevent mantine random ID
+    Math.random = () => 0.42;
+  });
+  it('matches snapshot', () => {
+    const { container } = renderWithProviders(
+      <ThumbnailGrid thumbnails={thumbnails} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.tsx b/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.tsx
new file mode 100644
index 00000000..81339ddf
--- /dev/null
+++ b/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+import type { IThumbnail } from '../Thumbnail/Thumbnail';
+import type { SimpleGridProps } from '@mantine/core';
+import type {
+  IAction,
+  IActionConfirmModalProps,
+} from '@smile/react-front-kit-shared';
+import type { ReactElement } from 'react';
+
+import { Button, Group, SimpleGrid } from '@mantine/core';
+import { createStyles } from '@mantine/styles';
+import { useState } from 'react';
+
+import { ConfirmModal } from '../ConfirmModal/ConfirmModal';
+import { Thumbnail } from '../Thumbnail/Thumbnail';
+
+const useStyles = createStyles((theme) => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 24,
+  },
+  topBar: {
+    alignItems: 'center',
+    background: theme.fn.primaryColor(),
+    borderRadius: 4,
+    color: 'white',
+    display: 'inline-flex',
+    justifyContent: 'space-between',
+    padding: '16px 24px',
+  },
+}));
+
+function defaultSelectedElementsText(n: number): string {
+  return `${n} selected file${n > 1 ? 's' : ''}`;
+}
+
+type IGridAction = IAction<IThumbnail[]>;
+type IGridActionConfirmModalProps = IActionConfirmModalProps<IThumbnail[]>;
+
+export interface IThumbnailGridProps extends SimpleGridProps {
+  gridActions?: IGridAction[];
+  onThumbnailClick?: (item: IThumbnail, index: number) => void;
+  selectedElementsText?: (numberOfSelectedElements: number) => string;
+  thumbnails: IThumbnail[];
+}
+
+/** Additional props will be forwarded to the [Mantine SimpleGrid component](https://mantine.dev/core/simple-grid) */
+export function ThumbnailGrid(props: IThumbnailGridProps): ReactElement {
+  const {
+    gridActions = [],
+    onThumbnailClick,
+    selectedElementsText = defaultSelectedElementsText,
+    thumbnails,
+    ...simpleGridProps
+  } = props;
+
+  const selectedElements = thumbnails.filter((thumbnail) => thumbnail.selected);
+  const numberOfSelectedElements = selectedElements.length;
+  const [confirmAction, setConfirmAction] =
+    useState<IGridActionConfirmModalProps | null>(null);
+
+  const { classes } = useStyles();
+
+  function handleSelect(index: number): void {
+    onThumbnailClick?.(thumbnails[index], index);
+  }
+
+  function setModal(action: IGridAction): void {
+    setConfirmAction({
+      cancelColor: action.confirmModalProps?.cancelColor,
+      cancelLabel: action.confirmModalProps?.cancelLabel,
+      children: action.confirmModalProps?.children,
+      confirmColor: action.confirmModalProps?.confirmColor,
+      confirmLabel: action.confirmModalProps?.confirmLabel,
+      onConfirm: () => action.onAction?.(selectedElements),
+      title: action.confirmModalProps?.title,
+    });
+  }
+
+  function handleGridAction(action: IGridAction): void {
+    if (action.confirmation) {
+      setModal(action);
+    } else {
+      action.onAction?.(selectedElements);
+    }
+  }
+
+  function clearConfirmAction(): void {
+    setConfirmAction(null);
+  }
+
+  function handleClose(): void {
+    clearConfirmAction();
+  }
+
+  function handleModalButton(onAction?: (item: IThumbnail[]) => void): void {
+    onAction?.(selectedElements);
+    handleClose();
+  }
+
+  return (
+    <>
+      <div className={classes.container}>
+        {numberOfSelectedElements > 0 && (
+          <div className={classes.topBar}>
+            <span>{selectedElementsText(numberOfSelectedElements)}</span>
+            {gridActions.length > 0 && (
+              <Group>
+                {gridActions.map((action) => (
+                  <Button
+                    key={action.id}
+                    color={action.color}
+                    leftIcon={action.icon}
+                    onClick={() => handleGridAction(action)}
+                    variant={action.color ? 'filled' : 'default'}
+                  >
+                    {action.label}
+                  </Button>
+                ))}
+              </Group>
+            )}
+          </div>
+        )}
+        <SimpleGrid {...simpleGridProps}>
+          {thumbnails.map((thumbnail, index) => (
+            <Thumbnail
+              key={thumbnail.id}
+              onClick={() => handleSelect(index)}
+              {...thumbnail}
+            />
+          ))}
+        </SimpleGrid>
+      </div>
+      <ConfirmModal
+        {...confirmAction}
+        onCancel={() => handleModalButton(confirmAction?.onCancel)}
+        onClose={handleClose}
+        onConfirm={() => handleModalButton(confirmAction?.onConfirm)}
+        opened={Boolean(confirmAction)}
+      >
+        {confirmAction?.children}
+      </ConfirmModal>
+    </>
+  );
+}
diff --git a/packages/react-front-kit/src/Components/ThumbnailGrid/__snapshots__/ThumbnailGrid.test.tsx.snap b/packages/react-front-kit/src/Components/ThumbnailGrid/__snapshots__/ThumbnailGrid.test.tsx.snap
new file mode 100644
index 00000000..2a9541e2
--- /dev/null
+++ b/packages/react-front-kit/src/Components/ThumbnailGrid/__snapshots__/ThumbnailGrid.test.tsx.snap
@@ -0,0 +1,234 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThumbnailGrid matches snapshot 1`] = `
+<div>
+  <div
+    class="mantine-1skbp38"
+  >
+    <div
+      class="mantine-1x8hauu"
+    >
+      <span>
+        1 selected file
+      </span>
+    </div>
+    <div
+      class="mantine-SimpleGrid-root mantine-17ynw9a"
+    >
+      <div
+        class="mantine-af86sk"
+      >
+        <div
+          class="mantine-Group-root mantine-p1wipv"
+        >
+          <div
+            class="mantine-1r83wdq"
+          >
+            <svg
+              fill="#0b7285"
+              height="22"
+              viewBox="0 0 256 256"
+              width="22"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M200,164v8h12a12,12,0,0,1,0,24H200v12a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12h32a12,12,0,0,1,0,24ZM92,172a32,32,0,0,1-32,32H56v4a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12H60A32,32,0,0,1,92,172Zm-24,0a8,8,0,0,0-8-8H56v16h4A8,8,0,0,0,68,172Zm100,8a40,40,0,0,1-40,40H112a12,12,0,0,1-12-12V152a12,12,0,0,1,12-12h16A40,40,0,0,1,168,180Zm-24,0a16,16,0,0,0-16-16h-4v32h4A16,16,0,0,0,144,180ZM36,108V40A20,20,0,0,1,56,20h96a12,12,0,0,1,8.49,3.52l56,56A12,12,0,0,1,220,88v20a12,12,0,0,1-24,0v-4H148a12,12,0,0,1-12-12V44H60v64a12,12,0,0,1-24,0ZM160,57V80h23Z"
+              />
+            </svg>
+            <h3
+              class="mantine-Text-root mantine-1oer4ck"
+            >
+              Debit_Suivi_PREV
+            </h3>
+          </div>
+          <div>
+            <button
+              aria-controls="mantine-f4bipx4bi-dropdown"
+              aria-expanded="false"
+              aria-haspopup="menu"
+              class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-j5kg09"
+              id="mantine-f4bipx4bi-target"
+              type="button"
+            >
+              <div>
+                <svg
+                  class="mantine-pusk2m"
+                  fill="currentColor"
+                  height="16"
+                  viewBox="0 0 256 256"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
+        </div>
+        <div
+          class="mantine-Image-root mantine-yxmaw9"
+          style="width: 100%;"
+        >
+          <figure
+            class="mantine-qenwvq mantine-Image-figure"
+          >
+            <div
+              class="mantine-1iugybl mantine-Image-imageWrapper"
+            >
+              <img
+                class="mantine-1bi35m7 mantine-Image-image"
+                src=""
+                style="object-fit: cover; width: 100%; height: auto;"
+              />
+            </div>
+          </figure>
+        </div>
+      </div>
+      <div
+        class="mantine-1qar87q"
+      >
+        <div
+          class="mantine-Group-root mantine-p1wipv"
+        >
+          <div
+            class="mantine-1r83wdq"
+          >
+            <svg
+              fill="#f1f3f5"
+              height="22"
+              viewBox="0 0 256 256"
+              width="22"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M200,164v8h12a12,12,0,0,1,0,24H200v12a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12h32a12,12,0,0,1,0,24ZM92,172a32,32,0,0,1-32,32H56v4a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12H60A32,32,0,0,1,92,172Zm-24,0a8,8,0,0,0-8-8H56v16h4A8,8,0,0,0,68,172Zm100,8a40,40,0,0,1-40,40H112a12,12,0,0,1-12-12V152a12,12,0,0,1,12-12h16A40,40,0,0,1,168,180Zm-24,0a16,16,0,0,0-16-16h-4v32h4A16,16,0,0,0,144,180ZM36,108V40A20,20,0,0,1,56,20h96a12,12,0,0,1,8.49,3.52l56,56A12,12,0,0,1,220,88v20a12,12,0,0,1-24,0v-4H148a12,12,0,0,1-12-12V44H60v64a12,12,0,0,1-24,0ZM160,57V80h23Z"
+              />
+            </svg>
+            <h3
+              class="mantine-Text-root mantine-1oer4ck"
+            >
+              Debit_Suivi_PREV_2
+            </h3>
+          </div>
+          <div>
+            <button
+              aria-controls="mantine-f4bipx4bi-dropdown"
+              aria-expanded="false"
+              aria-haspopup="menu"
+              class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1w8jhtw"
+              id="mantine-f4bipx4bi-target"
+              type="button"
+            >
+              <div>
+                <svg
+                  class="mantine-pusk2m"
+                  fill="currentColor"
+                  height="16"
+                  viewBox="0 0 256 256"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
+        </div>
+        <div
+          class="mantine-Image-root mantine-yxmaw9"
+          style="width: 100%;"
+        >
+          <figure
+            class="mantine-qenwvq mantine-Image-figure"
+          >
+            <div
+              class="mantine-1iugybl mantine-Image-imageWrapper"
+            >
+              <img
+                class="mantine-1bi35m7 mantine-Image-image"
+                src=""
+                style="object-fit: cover; width: 100%; height: auto;"
+              />
+            </div>
+          </figure>
+        </div>
+      </div>
+      <div
+        class="mantine-af86sk"
+      >
+        <div
+          class="mantine-Group-root mantine-p1wipv"
+        >
+          <div
+            class="mantine-1r83wdq"
+          >
+            <svg
+              fill="#0b7285"
+              height="22"
+              viewBox="0 0 256 256"
+              width="22"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M200,164v8h12a12,12,0,0,1,0,24H200v12a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12h32a12,12,0,0,1,0,24ZM92,172a32,32,0,0,1-32,32H56v4a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12H60A32,32,0,0,1,92,172Zm-24,0a8,8,0,0,0-8-8H56v16h4A8,8,0,0,0,68,172Zm100,8a40,40,0,0,1-40,40H112a12,12,0,0,1-12-12V152a12,12,0,0,1,12-12h16A40,40,0,0,1,168,180Zm-24,0a16,16,0,0,0-16-16h-4v32h4A16,16,0,0,0,144,180ZM36,108V40A20,20,0,0,1,56,20h96a12,12,0,0,1,8.49,3.52l56,56A12,12,0,0,1,220,88v20a12,12,0,0,1-24,0v-4H148a12,12,0,0,1-12-12V44H60v64a12,12,0,0,1-24,0ZM160,57V80h23Z"
+              />
+            </svg>
+            <h3
+              class="mantine-Text-root mantine-1oer4ck"
+            >
+              Debit_Suivi_PREV_3
+            </h3>
+          </div>
+          <div>
+            <button
+              aria-controls="mantine-f4bipx4bi-dropdown"
+              aria-expanded="false"
+              aria-haspopup="menu"
+              class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-j5kg09"
+              id="mantine-f4bipx4bi-target"
+              type="button"
+            >
+              <div>
+                <svg
+                  class="mantine-pusk2m"
+                  fill="currentColor"
+                  height="16"
+                  viewBox="0 0 256 256"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
+        </div>
+        <div
+          class="mantine-Image-root mantine-yxmaw9"
+          style="width: 100%;"
+        >
+          <figure
+            class="mantine-qenwvq mantine-Image-figure"
+          >
+            <div
+              class="mantine-1iugybl mantine-Image-imageWrapper"
+            >
+              <img
+                class="mantine-1bi35m7 mantine-Image-image"
+                src=""
+                style="object-fit: cover; width: 100%; height: auto;"
+              />
+            </div>
+          </figure>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/react-front-kit/src/helpers/index.ts b/packages/react-front-kit/src/helpers/index.ts
index 53af472e..a22f1944 100644
--- a/packages/react-front-kit/src/helpers/index.ts
+++ b/packages/react-front-kit/src/helpers/index.ts
@@ -1 +1,2 @@
 export * from './nestedObject';
+export * from './typeGuard';
diff --git a/packages/react-front-kit/src/helpers/typeGuard.ts b/packages/react-front-kit/src/helpers/typeGuard.ts
new file mode 100644
index 00000000..25b432a5
--- /dev/null
+++ b/packages/react-front-kit/src/helpers/typeGuard.ts
@@ -0,0 +1,28 @@
+export interface ITypeMap {
+  boolean: boolean;
+  number: number;
+  string: string;
+}
+
+export type IPrimitiveOrConstructor = // 'string' | 'number' | 'boolean' | constructor
+  keyof ITypeMap | (new (...args: unknown[]) => unknown);
+
+// infer the guarded type from a specific case of PrimitiveOrConstructor
+export type IGuardedType<T extends IPrimitiveOrConstructor> = T extends new (
+  ...args: unknown[]
+) => infer U
+  ? U
+  : T extends keyof ITypeMap
+  ? ITypeMap[T]
+  : never;
+
+export function typeGuard<T extends IPrimitiveOrConstructor>(
+  o: unknown,
+  className: T,
+): o is IGuardedType<T> {
+  const localPrimitiveOrConstructor: IPrimitiveOrConstructor = className;
+  if (typeof localPrimitiveOrConstructor === 'string') {
+    return typeof o === localPrimitiveOrConstructor;
+  }
+  return o instanceof localPrimitiveOrConstructor;
+}
diff --git a/packages/react-front-kit/src/index.tsx b/packages/react-front-kit/src/index.tsx
index 9818e859..a20faa6c 100644
--- a/packages/react-front-kit/src/index.tsx
+++ b/packages/react-front-kit/src/index.tsx
@@ -13,7 +13,9 @@ export * from './Components/Header/Header';
 export * from './Components/HeaderSearch/HeaderSearch';
 export * from './Components/Pagination/Pagination';
 export * from './Components/SidebarMenu/SidebarMenu';
+export * from './Components/SwitchableView/SwitchableView';
 export * from './Components/Thumbnail/Thumbnail';
+export * from './Components/ThumbnailGrid/ThumbnailGrid';
 // layout exports
 export * from './Layouts/FoldableColumnLayout/FoldableColumnLayout';
 // page exports