From 621d98a3bae9324da0fab9b9fa4104ee33f248b5 Mon Sep 17 00:00:00 2001
From: "A. Jard" <angelique.jard@filigran.io>
Date: Fri, 13 Sep 2024 21:30:56 +0200
Subject: [PATCH] [frontend] Align design and fix new data table (#7906)

Co-authored-by: Laurent Bonnet <laurent.bonnet@filigran.io>
Co-authored-by: Adrien Servel <adrien.servel@filigran.io>
Co-authored-by: Valentin Bouzin <valentin.bouzin@filigran.io>
Co-authored-by: Gwendoline Favre-Felix <gwendoline.favre-felix@filigran.io>
Co-authored-by: Cathia Archidoit <cathia.archidoit@filigran.io>
Co-authored-by: Landry Trebon <landry.trebon@filigran.io>
---
 .../opencti-front/lang/front/de.json          |   2 +
 .../opencti-front/lang/front/en.json          |   2 +
 .../opencti-front/lang/front/es.json          |   2 +
 .../opencti-front/lang/front/fr.json          |   2 +
 .../opencti-front/lang/front/ja.json          |   2 +
 .../opencti-front/lang/front/ko.json          |   2 +
 .../opencti-front/lang/front/zh.json          |   2 +
 .../src/components/Breadcrumbs.tsx            |   6 +-
 .../components/CreateEntityControlledDial.tsx |   8 +-
 .../src/components/FieldOrEmpty.tsx           |   2 +-
 .../src/components/FilterIconButton.tsx       |  10 +-
 .../components/FilterIconButtonContainer.tsx  |   2 +-
 .../src/components/ItemEntityType.tsx         |   4 +-
 .../src/components/ItemMarkings.jsx           |   6 +-
 .../src/components/ItemOpenVocab.tsx          | 117 +-----
 .../src/components/ItemSeverity.tsx           |   2 +-
 .../opencti-front/src/components/Loader.tsx   |   3 +-
 .../dashboard/WidgetListCoreObjects.tsx       |  14 +-
 .../src/components/dataGrid/DataTable.tsx     |  30 +-
 .../components/dataGrid/DataTableFilters.tsx  |  62 ++--
 .../dataGrid/DataTablePagination.tsx          | 199 +++++-----
 .../dataGrid/DataTableWithoutFragment.tsx     |   1 +
 .../dataGrid/components/DataTableBody.tsx     |  23 +-
 .../components/DataTableComponent.tsx         |  36 +-
 .../dataGrid/components/DataTableHeader.tsx   |  45 ++-
 .../dataGrid/components/DataTableHeaders.tsx  |  25 +-
 .../dataGrid/components/DataTableLine.tsx     | 112 +++---
 .../src/components/dataGrid/dataTableTypes.ts |  11 +-
 .../components/dataGrid/dataTableUtils.tsx    |  54 ++-
 .../src/components/list_cards/ListCards.jsx   |  25 +-
 .../src/components/list_lines/ListLines.jsx   |   1 +
 .../nestedMenu/NestedMenuButton.tsx           | 299 +++++++++++++++
 .../src/private/components/Search.tsx         |   1 +
 .../private/components/analyses/Reports.tsx   |   1 -
 .../private/components/arsenal/Malwares.tsx   |   2 +-
 .../arsenal/channels/ChannelEdition.jsx       |   2 +-
 .../components/arsenal/tools/ToolEdition.jsx  |   2 +-
 .../vulnerabilities/VulnerabilityDetails.jsx  |  29 +-
 .../vulnerabilities/VulnerabilityEdition.jsx  |   2 +-
 .../cases/case_incidents/CaseIncident.tsx     | 108 +++++-
 .../components/cases/case_rfis/CaseRfi.tsx    | 115 +++++-
 .../components/cases/case_rfts/CaseRft.tsx    | 113 +++++-
 .../components/cases/tasks/CaseTasksLine.tsx  | 191 ++++++++++
 .../components/cases/tasks/CaseTasksLines.tsx | 189 +++-------
 .../components/cases/tasks/TaskPopover.tsx    |   8 +-
 .../ContainerAddStixCoreObjectsInLine.tsx     | 105 ++++--
 .../components/common/drawer/Drawer.tsx       |  16 +-
 .../stix_core_objects/StixCoreObjectsList.jsx |  10 +-
 ...StixCoreRelationshipCreationFromEntity.tsx |   2 +
 .../StixDomainObjectEdition.jsx               |   2 +-
 .../StixNestedRefRelationshipEdition.jsx      |   2 +-
 .../components/data/DataTableToolBar.jsx      |   9 +-
 .../entities/events/EventEdition.jsx          |   2 +-
 .../individuals/IndividualEdition.jsx         |   2 +-
 .../organizations/OrganizationEdition.jsx     |   2 +-
 .../entities/sectors/SectorEdition.jsx        |   2 +-
 .../entities/systems/SystemEdition.jsx        |   2 +-
 .../events/incidents/IncidentDetails.tsx      |   1 +
 .../observed_data/ObservedDataEdition.jsx     |   2 +-
 .../StixSightingRelationship.tsx              |   2 +-
 .../components/observations/Artifacts.tsx     |  57 +--
 .../components/observations/Indicators.tsx    |   9 +-
 .../observations/StixCyberObservables.tsx     | 271 ++++++--------
 .../indicators/IndicatorEdition.jsx           |   2 +-
 .../indicators/IndicatorObservables.jsx       |  60 +--
 .../StixCyberObservableLine.jsx               | 347 +++---------------
 .../StixCyberObservablesLines.jsx             | 195 +++-------
 .../private/components/settings/Labels.jsx    |   2 +-
 .../settings/retention/RetentionPopover.jsx   |   3 +-
 .../components/settings/roles/RolePopover.jsx |   3 +-
 .../components/techniques/Narratives.tsx      |  15 +-
 .../attack_patterns/AttackPatternEdition.jsx  |   2 +-
 .../CourseOfActionEdition.jsx                 |   2 +-
 .../narratives/NarrativeEdition.jsx           |   2 +-
 .../private/components/threats/Campaigns.tsx  |   4 +-
 .../components/threats/IntrusionSets.tsx      |   4 +-
 .../components/threats/ThreatActorsGroup.tsx  |   4 +-
 .../threats/ThreatActorsIndividual.tsx        |   2 +-
 .../threats/campaigns/CampaignEdition.jsx     |   2 +-
 .../intrusion_sets/IntrusionSetEdition.jsx    |   2 +-
 .../ThreatActorGroupEdition.jsx               |   2 +-
 .../ThreatActorGroupLocation.jsx              |  96 +++--
 .../AddIndividualsThreatActorIndividual.tsx   |  24 +-
 .../AddPersonasThreatActorIndividual.tsx      |  25 +-
 .../ThreatActorIndividualDetailsChips.tsx     |  73 ++--
 .../ThreatActorIndividualLocation.jsx         |   2 +-
 .../components/workspaces/Workspaces.tsx      |  10 -
 .../public_dashboards/PublicDashboards.tsx    |  10 -
 .../PublicStixCoreObjectsList.tsx             |  12 +-
 .../src/utils/filters/filtersUtils.tsx        |   2 +-
 .../opencti-front/src/utils/utils.ts          |  10 +
 .../model/form/reportForm.pageModel.ts        |   2 +-
 92 files changed, 1792 insertions(+), 1499 deletions(-)
 create mode 100644 opencti-platform/opencti-front/src/components/nestedMenu/NestedMenuButton.tsx
 create mode 100644 opencti-platform/opencti-front/src/private/components/cases/tasks/CaseTasksLine.tsx

diff --git a/opencti-platform/opencti-front/lang/front/de.json b/opencti-platform/opencti-front/lang/front/de.json
index cef37fecda8b..75f5af678401 100644
--- a/opencti-platform/opencti-front/lang/front/de.json
+++ b/opencti-platform/opencti-front/lang/front/de.json
@@ -407,6 +407,7 @@
   "Copy disabled: too many selected elements (maximum number of elements for a copy: ": "Kopieren deaktiviert: zu viele ausgewählte Elemente (maximale Anzahl von Elementen für eine Kopie:",
   "Copy link": "Link kopieren",
   "Copy public link": "Öffentlichen Link kopieren",
+  "Copy to clipboard": "In die Zwischenablage kopieren",
   "Copy uri to clipboard for your csv client": "Kopiere uri in die Zwischenablage für deinen csv Client",
   "Copy uri to clipboard for your Taxii client": "Kopiere uri in die Zwischenablage für deinen Taxii-Client",
   "Copy/paste text content": "Kopieren/Einfügen von Textinhalten",
@@ -2284,6 +2285,7 @@
   "roles": "rollen",
   "Rolling time": "Rollierende Zeit",
   "Rolling time (in minutes)": "Rollende Zeit (in Minuten)",
+  "Rows per page": "Zeilen pro Seite",
   "Rows per page:": "Zeilen pro Seite:",
   "RSS Feed URL": "RSS-Feed-URL",
   "RSS feed URL": "RSS-Feed-URL",
diff --git a/opencti-platform/opencti-front/lang/front/en.json b/opencti-platform/opencti-front/lang/front/en.json
index a39c1c87aea1..a48713d70ad1 100644
--- a/opencti-platform/opencti-front/lang/front/en.json
+++ b/opencti-platform/opencti-front/lang/front/en.json
@@ -407,6 +407,7 @@
   "Copy disabled: too many selected elements (maximum number of elements for a copy: ": "Copy disabled: too many selected elements (maximum number of elements for a copy: ",
   "Copy link": "Copy link",
   "Copy public link": "Copy public link",
+  "Copy to clipboard": "Copy to clipboard",
   "Copy uri to clipboard for your csv client": "Copy uri to clipboard for your csv client",
   "Copy uri to clipboard for your Taxii client": "Copy uri to clipboard for your Taxii client",
   "Copy/paste text content": "Copy/paste text content",
@@ -2284,6 +2285,7 @@
   "roles": "roles",
   "Rolling time": "Rolling time",
   "Rolling time (in minutes)": "Rolling time (in minutes)",
+  "Rows per page": "Rows per page",
   "Rows per page:": "Rows per page:",
   "RSS Feed URL": "RSS Feed URL",
   "RSS feed URL": "RSS feed URL",
diff --git a/opencti-platform/opencti-front/lang/front/es.json b/opencti-platform/opencti-front/lang/front/es.json
index d0781f55e9dd..906b9a17f8c1 100644
--- a/opencti-platform/opencti-front/lang/front/es.json
+++ b/opencti-platform/opencti-front/lang/front/es.json
@@ -407,6 +407,7 @@
   "Copy disabled: too many selected elements (maximum number of elements for a copy: ": "Copia deshabilitada: demasiados elementos seleccionados (número máximo de elementos para una copia: ",
   "Copy link": "Copiar enlace",
   "Copy public link": "Copiar enlace público",
+  "Copy to clipboard": "Copiar al portapapeles",
   "Copy uri to clipboard for your csv client": "Copiar uri al portapapeles para su cliente csv",
   "Copy uri to clipboard for your Taxii client": "Copiar uri al portapapeles para su cliente Taxii",
   "Copy/paste text content": "Copiar o pegar contenido textual",
@@ -2284,6 +2285,7 @@
   "roles": "Roles",
   "Rolling time": "Intervalo de consulta",
   "Rolling time (in minutes)": "Intervalo de consulta (en minutos)",
+  "Rows per page": "Filas por página",
   "Rows per page:": "Filas por página:",
   "RSS Feed URL": "URL RSS",
   "RSS feed URL": "URL del canal RSS",
diff --git a/opencti-platform/opencti-front/lang/front/fr.json b/opencti-platform/opencti-front/lang/front/fr.json
index 6341c22d2b47..a2ee4ff5803c 100644
--- a/opencti-platform/opencti-front/lang/front/fr.json
+++ b/opencti-platform/opencti-front/lang/front/fr.json
@@ -407,6 +407,7 @@
   "Copy disabled: too many selected elements (maximum number of elements for a copy: ": "Copie désactivée : trop d’éléments sélectionnés (nombre maximum d'éléments pour une copie: ",
   "Copy link": "Copier le lien",
   "Copy public link": "Copier le lien public",
+  "Copy to clipboard": "Copier dans le presse-papiers",
   "Copy uri to clipboard for your csv client": "Copier l'uri dans le presse-papier pour votre client csv",
   "Copy uri to clipboard for your Taxii client": "Copier l'uri dans le presse-papier pour votre client Taxii",
   "Copy/paste text content": "Copier/coller du contenu textuel",
@@ -2284,6 +2285,7 @@
   "roles": "Rôles",
   "Rolling time": "Intervalle de requête",
   "Rolling time (in minutes)": "Intervalle de requête (en minutes)",
+  "Rows per page": "Lignes par page",
   "Rows per page:": "Lignes par page :",
   "RSS Feed URL": "URL du flux RSS",
   "RSS feed URL": "URL du flux RSS",
diff --git a/opencti-platform/opencti-front/lang/front/ja.json b/opencti-platform/opencti-front/lang/front/ja.json
index 4aae1ae8ff7b..985a242811f1 100644
--- a/opencti-platform/opencti-front/lang/front/ja.json
+++ b/opencti-platform/opencti-front/lang/front/ja.json
@@ -407,6 +407,7 @@
   "Copy disabled: too many selected elements (maximum number of elements for a copy: ": "コピー無効:選択した要素が多すぎます(コピーの要素の最大数:",
   "Copy link": "リンクをコピー",
   "Copy public link": "公開リンクをコピー",
+  "Copy to clipboard": "クリップボードにコピー",
   "Copy uri to clipboard for your csv client": "csvクライアント用にuriをクリップボードにコピーする",
   "Copy uri to clipboard for your Taxii client": "TaxiiクライアントのURIをクリップボードにコピーする",
   "Copy/paste text content": "コンテンツのコピー/ペースト",
@@ -2284,6 +2285,7 @@
   "roles": "ロール",
   "Rolling time": "問い合わせ間隔",
   "Rolling time (in minutes)": "問い合わせ間隔(分)",
+  "Rows per page": "ページあたりの行数",
   "Rows per page:": "ページあたりの行数",
   "RSS Feed URL": "RSSフィードURL",
   "RSS feed URL": "RSSフィードURL",
diff --git a/opencti-platform/opencti-front/lang/front/ko.json b/opencti-platform/opencti-front/lang/front/ko.json
index 424b98b084f0..805513ea86d9 100644
--- a/opencti-platform/opencti-front/lang/front/ko.json
+++ b/opencti-platform/opencti-front/lang/front/ko.json
@@ -407,6 +407,7 @@
   "Copy disabled: too many selected elements (maximum number of elements for a copy: ": "복사 불가: 선택된 요소가 너무 많습니다 (복사 가능한 최대 요소 수: ",
   "Copy link": "링크 복사",
   "Copy public link": "공개 링크 복사",
+  "Copy to clipboard": "클립보드에 복사",
   "Copy uri to clipboard for your csv client": "CSV 클라이언트를 위한 URI를 클립보드에 복사",
   "Copy uri to clipboard for your Taxii client": "Taxii 클라이언트를 위한 URI를 클립보드에 복사",
   "Copy/paste text content": "텍스트 내용 복사/붙여넣기",
@@ -2284,6 +2285,7 @@
   "roles": "역할",
   "Rolling time": "롤링 시간",
   "Rolling time (in minutes)": "롤링 시간 (분)",
+  "Rows per page": "페이지당 행 수",
   "Rows per page:": "페이지당 행 수",
   "RSS Feed URL": "RSS 피드 URL",
   "RSS feed URL": "RSS 피드 URL",
diff --git a/opencti-platform/opencti-front/lang/front/zh.json b/opencti-platform/opencti-front/lang/front/zh.json
index 9d794061d8e4..cc29fd3bb521 100644
--- a/opencti-platform/opencti-front/lang/front/zh.json
+++ b/opencti-platform/opencti-front/lang/front/zh.json
@@ -407,6 +407,7 @@
   "Copy disabled: too many selected elements (maximum number of elements for a copy: ": "复制已关闭：选取元素过多（复制的最大元素数：",
   "Copy link": "复制链接",
   "Copy public link": "复制公共链接",
+  "Copy to clipboard": "复制到剪贴板",
   "Copy uri to clipboard for your csv client": "将 uri 复制到剪贴板，供 csv 客户端使用",
   "Copy uri to clipboard for your Taxii client": "为 Taxii 客户端复制 uri 到剪贴板",
   "Copy/paste text content": "复制/粘贴文本内容",
@@ -2284,6 +2285,7 @@
   "roles": "角色",
   "Rolling time": "查询间隔",
   "Rolling time (in minutes)": "查询间隔（分钟）",
+  "Rows per page": "每页行数",
   "Rows per page:": "每页行数：",
   "RSS Feed URL": "RSS 源 URL",
   "RSS feed URL": "RSS 源 URL",
diff --git a/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx b/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx
index 1afe806b1843..ccae9173da64 100644
--- a/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx
+++ b/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx
@@ -3,6 +3,7 @@ import MUIBreadcrumbs from '@mui/material/Breadcrumbs';
 import { Link } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
+import { Theme } from '@mui/material/styles/createTheme';
 import { truncate } from '../utils/String';
 
 interface element {
@@ -18,10 +19,9 @@ interface BreadcrumbsProps {
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles<Theme>((theme) => ({
   breadcrumbsList: {
-    marginTop: -5,
-    marginBottom: 25,
+    marginBottom: theme.spacing(2),
   },
   breadcrumbsObject: {
     marginTop: -5,
diff --git a/opencti-platform/opencti-front/src/components/CreateEntityControlledDial.tsx b/opencti-platform/opencti-front/src/components/CreateEntityControlledDial.tsx
index aef8b065d464..7599ba9662b3 100644
--- a/opencti-platform/opencti-front/src/components/CreateEntityControlledDial.tsx
+++ b/opencti-platform/opencti-front/src/components/CreateEntityControlledDial.tsx
@@ -1,5 +1,7 @@
 import { Button } from '@mui/material';
 import React, { FunctionComponent } from 'react';
+import { useTheme } from '@mui/styles';
+import { Theme } from '@mui/material/styles/createTheme';
 import { DrawerControlledDialProps } from '../private/components/common/drawer/Drawer';
 import { useFormatter } from './i18n';
 
@@ -19,6 +21,7 @@ const CreateEntityControlledDial: FunctionComponent<CreateEntityControlledDialPr
   variant = 'contained',
   style,
 }) => {
+  const theme = useTheme<Theme>();
   const { t_i18n } = useFormatter();
   const buttonValue = t_i18n('', {
     id: 'Create ...',
@@ -32,10 +35,7 @@ const CreateEntityControlledDial: FunctionComponent<CreateEntityControlledDialPr
       variant={variant}
       aria-label={buttonValue}
       title={buttonValue}
-      sx={style ?? {
-        marginLeft: '10px',
-        padding: '7px 10px',
-      }}
+      sx={style ?? { marginLeft: theme.spacing(1) }}
     >
       <div style={{ display: 'flex' }}>
         {buttonValue}
diff --git a/opencti-platform/opencti-front/src/components/FieldOrEmpty.tsx b/opencti-platform/opencti-front/src/components/FieldOrEmpty.tsx
index 632009c9481f..1dd899f96659 100644
--- a/opencti-platform/opencti-front/src/components/FieldOrEmpty.tsx
+++ b/opencti-platform/opencti-front/src/components/FieldOrEmpty.tsx
@@ -6,7 +6,7 @@ interface FieldOrEmptyProps<T> {
   children: React.ReactNode;
 }
 
-const FieldOrEmpty = <T = never>({ source, children }: FieldOrEmptyProps<T>) => {
+const FieldOrEmpty = <T = unknown>({ source, children }: FieldOrEmptyProps<T>) => {
   return <>{isNotEmptyField(source) ? children : '-'}</>; // render the children if source is defined
 };
 export default FieldOrEmpty;
diff --git a/opencti-platform/opencti-front/src/components/FilterIconButton.tsx b/opencti-platform/opencti-front/src/components/FilterIconButton.tsx
index a39ca5f67af7..bc1ab3295df7 100644
--- a/opencti-platform/opencti-front/src/components/FilterIconButton.tsx
+++ b/opencti-platform/opencti-front/src/components/FilterIconButton.tsx
@@ -120,10 +120,12 @@ const FilterIconButton: FunctionComponent<FilterIconButtonProps> = ({
   const setHasRenderedRef = () => {
     hasRenderedRef.current = true;
   };
-  const displayedFilters = filters ? {
-    ...filters,
-    filters:
-      filters.filters.filter((f) => !availableFilterKeys || availableFilterKeys?.some((k) => f.key === k)) } : undefined;
+  const displayedFilters = filters
+    ? {
+      ...filters,
+      filters:
+        filters.filters.filter((f) => !availableFilterKeys || availableFilterKeys?.some((k) => f.key === k)),
+    } : undefined;
   if (displayedFilters && isFilterGroupNotEmpty(displayedFilters)) { // to avoid running the FiltersRepresentatives query if filters are empty
     return (
       <FilterIconButtonWithRepresentativesQuery
diff --git a/opencti-platform/opencti-front/src/components/FilterIconButtonContainer.tsx b/opencti-platform/opencti-front/src/components/FilterIconButtonContainer.tsx
index 2040837de922..90dda4849b35 100644
--- a/opencti-platform/opencti-front/src/components/FilterIconButtonContainer.tsx
+++ b/opencti-platform/opencti-front/src/components/FilterIconButtonContainer.tsx
@@ -312,7 +312,7 @@ FilterIconButtonContainerProps
                   }
                   classes={{ root: classFilter, label: classes.chipLabel }}
                   variant={chipVariant}
-                  sx={chipSx}
+                  sx={{ ...chipSx, borderRadius: 1 }}
                   label={
                     <FilterValues
                       label={keyLabel}
diff --git a/opencti-platform/opencti-front/src/components/ItemEntityType.tsx b/opencti-platform/opencti-front/src/components/ItemEntityType.tsx
index 51424b9c48ec..918551180f0c 100644
--- a/opencti-platform/opencti-front/src/components/ItemEntityType.tsx
+++ b/opencti-platform/opencti-front/src/components/ItemEntityType.tsx
@@ -4,7 +4,6 @@ import makeStyles from '@mui/styles/makeStyles';
 import { useTheme } from '@mui/material';
 import { itemColor } from '../utils/Colors';
 import { useFormatter } from './i18n';
-import useSchema from '../utils/hooks/useSchema';
 import ThemeLight from './ThemeLight';
 import ThemeDark from './ThemeDark';
 import ItemIcon from './ItemIcon';
@@ -54,8 +53,7 @@ const ItemEntityType: FunctionComponent<ItemEntityTypeProps> = ({
   const { t_i18n } = useFormatter();
   const rootStyle = inList ? classes.chipInList : classes.chip;
 
-  const { isRelationship: checkIsRelationship } = useSchema();
-  const isRelationship = checkIsRelationship(entityType);
+  const isRelationship = t_i18n(`relationship_${entityType}`) !== `relationship_${entityType}`;
 
   const { palette: { mode } } = useTheme();
   const theme = mode === 'dark'
diff --git a/opencti-platform/opencti-front/src/components/ItemMarkings.jsx b/opencti-platform/opencti-front/src/components/ItemMarkings.jsx
index b222e5aa804a..62c164dac549 100644
--- a/opencti-platform/opencti-front/src/components/ItemMarkings.jsx
+++ b/opencti-platform/opencti-front/src/components/ItemMarkings.jsx
@@ -93,7 +93,7 @@ const inlineStylesLight = {
 
 const StyledBadge = styled(Badge)(() => ({
   '& .MuiBadge-badge': {
-    right: 9,
+    right: 8,
     top: 4,
   },
 }));
@@ -280,11 +280,11 @@ const ItemMarkings = ({ variant, markingDefinitions, limit, onClick }) => {
       }
       placement="bottom"
     >
-      <span>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
         <StyledBadge variant="dot" color="primary">
           {R.take(limit, markings).map((markingDefinition) => renderChip(markingDefinition))}
         </StyledBadge>
-      </span>
+      </div>
     </EnrichedTooltip>
   );
 };
diff --git a/opencti-platform/opencti-front/src/components/ItemOpenVocab.tsx b/opencti-platform/opencti-front/src/components/ItemOpenVocab.tsx
index 81af6ac4f3e8..36b10f27cbd6 100644
--- a/opencti-platform/opencti-front/src/components/ItemOpenVocab.tsx
+++ b/opencti-platform/opencti-front/src/components/ItemOpenVocab.tsx
@@ -1,15 +1,9 @@
 import React, { FunctionComponent } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import Chip from '@mui/material/Chip';
-import Tooltip from '@mui/material/Tooltip';
 import { InformationOutline } from 'mdi-material-ui';
-import { graphql, usePreloadedQuery } from 'react-relay';
-import { PreloadedQuery } from 'react-relay/relay-hooks/EntryPointTypes';
 import { useFormatter } from './i18n';
 import type { Theme } from './Theme';
-import useVocabularyCategory from '../utils/hooks/useVocabularyCategory';
-import { ItemOpenVocabQuery } from './__generated__/ItemOpenVocabQuery.graphql';
-import useQueryLoading from '../utils/hooks/useQueryLoading';
 import ItemSeverity from './ItemSeverity';
 import ItemPriority from './ItemPriority';
 
@@ -60,131 +54,48 @@ interface ItemOpenVocabProps {
   small?: boolean;
   hideEmpty?: boolean;
   displayMode?: 'chip' | 'span';
-  queryRef: PreloadedQuery<ItemOpenVocabQuery>;
 }
 
-const itemOpenVocabQuery = graphql`
-  query ItemOpenVocabQuery($category: VocabularyCategory) {
-    vocabularies(category: $category) {
-      edges {
-        node {
-          name
-          description
-        }
-      }
-    }
-  }
-`;
-
-const ItemOpenVocabDummy = ({
-  small = true,
-  displayMode = 'span',
-}: {
-  small?: boolean;
-  displayMode?: 'chip' | 'span';
-}) => {
-  const classes = useStyles();
-  const { t_i18n } = useFormatter();
-  if (displayMode === 'chip') {
-    return (
-      <Tooltip title={t_i18n('No description')}>
-        <Chip classes={{ root: classes.chip }} label={t_i18n('Unknown')} />
-      </Tooltip>
-    );
-  }
-  return (
-    <span className={classes.container}>
-      <pre className={small ? classes.smallPre : classes.pre}>
-        {t_i18n('Unknown')}
-      </pre>
-      <Tooltip title={t_i18n('No description')}>
-        <InformationOutline
-          className={small ? classes.smallIcon : classes.icon}
-          fontSize="small"
-          color="disabled"
-        />
-      </Tooltip>
-    </span>
-  );
-};
-const ItemOpenVocabComponent: FunctionComponent<ItemOpenVocabProps> = ({
+const ItemOpenVocab: FunctionComponent<ItemOpenVocabProps> = ({
   type,
   value,
   small = true,
   hideEmpty = true,
   displayMode = 'span',
-  queryRef,
 }) => {
   const classes = useStyles();
   const { t_i18n } = useFormatter();
-  const { vocabularies } = usePreloadedQuery<ItemOpenVocabQuery>(
-    itemOpenVocabQuery,
-    queryRef,
-  );
-  let description = null;
-  if (value) {
-    const openVocabList = (vocabularies?.edges ?? []).map(({ node }) => node);
-    const openVocab = openVocabList.find((n) => n.name === value);
-    description = openVocab?.description ? openVocab.description : null;
-  }
+
   if (displayMode === 'chip') {
     let chip = (
       <Chip classes={{ root: classes.chip }} label={value || t_i18n('Unknown')} />
     );
-    if (type === 'case_severity_ov') {
+    if (type === 'case_severity_ov' || type === 'incident_severity_ov') {
       chip = <ItemSeverity label={value || t_i18n('Unknown')} severity={value} />;
     } else if (type === 'case_priority_ov') {
       chip = <ItemPriority label={value || t_i18n('Unknown')} priority={value} />;
     }
-    return !description && hideEmpty ? (
+    return hideEmpty ? (
       chip
     ) : (
-      <Tooltip title={t_i18n(description ?? t_i18n('No description'))}>
-        <span>{chip}</span>
-      </Tooltip>
+      <span>{chip}</span>
     );
   }
+
   const preClass = small ? classes.smallPre : classes.pre;
   const iconClass = small ? classes.smallIcon : classes.icon;
-  const tooltip = (
-    <Tooltip title={t_i18n(description ?? t_i18n('No description'))}>
-      <InformationOutline
-        className={iconClass}
-        fontSize="small"
-        color="secondary"
-      />
-    </Tooltip>
-  );
+
   return (
     <span className={classes.container}>
       <pre className={preClass}>{value || t_i18n('Unknown')}</pre>
-      {!description && hideEmpty ? '' : tooltip}
-    </span>
-  );
-};
-
-const ItemOpenVocab: FunctionComponent<Omit<ItemOpenVocabProps, 'queryRef'>> = (
-  props,
-) => {
-  const { typeToCategory } = useVocabularyCategory();
-  const queryRef = useQueryLoading<ItemOpenVocabQuery>(itemOpenVocabQuery, {
-    category: typeToCategory(props.type),
-  });
-  return (
-    <>
-      {queryRef && (
-        <React.Suspense
-          fallback={
-            <ItemOpenVocabDummy
-              small={props.small}
-              displayMode={props.displayMode}
-            />
-          }
-        >
-          <ItemOpenVocabComponent {...props} queryRef={queryRef} />
-        </React.Suspense>
+      {hideEmpty ? '' : (
+        <InformationOutline
+          className={iconClass}
+          fontSize="small"
+          color="secondary"
+        />
       )}
-    </>
+    </span>
   );
 };
 
diff --git a/opencti-platform/opencti-front/src/components/ItemSeverity.tsx b/opencti-platform/opencti-front/src/components/ItemSeverity.tsx
index 4ec178d5374b..7078293d6dc5 100644
--- a/opencti-platform/opencti-front/src/components/ItemSeverity.tsx
+++ b/opencti-platform/opencti-front/src/components/ItemSeverity.tsx
@@ -54,7 +54,7 @@ interface ItemSeverityProps {
 }
 
 const computeSeverityStyle = (severity: string | undefined | null) => {
-  switch (severity) {
+  switch (severity?.toLowerCase()) {
     case 'low':
       return inlineStyles.green;
     case 'medium':
diff --git a/opencti-platform/opencti-front/src/components/Loader.tsx b/opencti-platform/opencti-front/src/components/Loader.tsx
index 3bb357d12c7a..7e69794487d1 100644
--- a/opencti-platform/opencti-front/src/components/Loader.tsx
+++ b/opencti-platform/opencti-front/src/components/Loader.tsx
@@ -64,7 +64,8 @@ const Loader: FunctionComponent<LoaderProps> = ({
 
   const { settings } = useContext(UserContext);
 
-  const hasFiligranLoader = theme && (isNotEmptyField(settings?.enterprise_edition) || !settings?.platform_whitemark);
+  // if you have EE and whitemark set, you can remove the loader
+  const hasFiligranLoader = theme && !(isNotEmptyField(settings?.enterprise_edition) && settings?.platform_whitemark);
 
   if (variant === 'inline') {
     return (
diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetListCoreObjects.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetListCoreObjects.tsx
index 28b611642fba..d569b37f0b6b 100644
--- a/opencti-platform/opencti-front/src/components/dashboard/WidgetListCoreObjects.tsx
+++ b/opencti-platform/opencti-front/src/components/dashboard/WidgetListCoreObjects.tsx
@@ -1,20 +1,22 @@
-import React, { forwardRef, MutableRefObject } from 'react';
+import React from 'react';
 import { v4 as uuid } from 'uuid';
 import DataTableWithoutFragment from '../dataGrid/DataTableWithoutFragment';
-import { DataTableVariant } from '../dataGrid/dataTableTypes';
+import { DataTableProps, DataTableVariant } from '../dataGrid/dataTableTypes';
 
 interface WidgetListCoreObjectsProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   data: any[]
   dateAttribute: string
   publicWidget?: boolean
+  rootRef: DataTableProps['rootRef']
 }
 
-const WidgetListCoreObjects = forwardRef<HTMLDivElement, WidgetListCoreObjectsProps>(({
+const WidgetListCoreObjects = ({
   data,
   dateAttribute,
   publicWidget = false,
-}, ref) => (
+  rootRef,
+}: WidgetListCoreObjectsProps) => (
   <DataTableWithoutFragment
     dataColumns={{
       entity_type: { percentWidth: 10 },
@@ -35,9 +37,9 @@ const WidgetListCoreObjects = forwardRef<HTMLDivElement, WidgetListCoreObjectsPr
     globalCount={data.length}
     variant={DataTableVariant.widget}
     disableNavigation={publicWidget}
-    rootRef={(ref as MutableRefObject<HTMLDivElement>)?.current}
+    rootRef={rootRef}
   />
-));
+);
 
 WidgetListCoreObjects.displayName = 'WidgetListCoreObjects';
 
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx
index 0697f175b4fe..4f58dea6f14f 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx
+++ b/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx
@@ -26,6 +26,7 @@ type OCTIDataTableProps = Pick<DataTableProps, 'dataColumns'
 | 'storageKey'
 | 'initialValues'
 | 'toolbarFilters'
+| 'handleCopy'
 | 'availableFilterKeys'
 | 'redirectionModeEnabled'
 | 'additionalFilterKeys'
@@ -37,6 +38,7 @@ type OCTIDataTableProps = Pick<DataTableProps, 'dataColumns'
 | 'disableLineSelection'
 | 'disableToolBar'
 | 'disableSelectAll'
+| 'selectOnLineClick'
 | 'entityTypes'> & {
   lineFragment: GraphQLTaggedNode
   preloadedPaginationProps: UsePreloadedPaginationFragment<OperationType>,
@@ -49,6 +51,7 @@ type OCTIDataTableProps = Pick<DataTableProps, 'dataColumns'
   createButton?: ReactNode
   currentView?: string
   hideFilters?: boolean
+  hideSearch?: boolean
   taskScope?: string
 };
 
@@ -71,9 +74,11 @@ const DataTable = (props: OCTIDataTableProps) => {
     exportContext,
     entityTypes,
     toolbarFilters,
+    handleCopy,
     variant = DataTableVariant.default,
     additionalHeaderButtons,
     currentView,
+    hideSearch,
     hideFilters,
     taskScope,
   } = props;
@@ -140,14 +145,21 @@ const DataTable = (props: OCTIDataTableProps) => {
           <div
             style={{
               display: 'flex',
-              ...(variant === DataTableVariant.default ? { marginTop: -10 } : { marginTop: 10, marginLeft: 10, marginRight: 10 }),
+              gap: theme.spacing(1),
+              marginBottom: theme.spacing(2),
+              // ...(variant !== DataTableVariant.default
+              //   // ? { margin: theme.spacing(1), marginLeft: 0 }
+              //   : {}
+              // ),
             }}
           >
-            <SearchInput
-              variant={'small'}
-              onSubmit={helpers.handleSearch}
-              keyword={searchTerm}
-            />
+            {!hideSearch && (
+              <SearchInput
+                variant={'small'}
+                onSubmit={helpers.handleSearch}
+                keyword={searchTerm}
+              />
+            )}
             {!hideFilters && (
               <DataTableFilters
                 availableFilterKeys={availableFilterKeys}
@@ -162,15 +174,16 @@ const DataTable = (props: OCTIDataTableProps) => {
               />
             )}
           </div>
-          {!hideFilters ? (
+          {!hideFilters && (
             <DataTableDisplayFilters
               availableFilterKeys={availableFilterKeys}
               availableRelationFilterTypes={availableRelationFilterTypes}
+              availableEntityTypes={availableEntityTypes}
               additionalFilterKeys={additionalFilterKeys}
               entityTypes={computedEntityTypes}
               paginationOptions={paginationOptions}
             />
-          ) : (<div style={{ minHeight: 10 }} />)}
+          )}
         </>
       )}
       dataTableToolBarComponent={(
@@ -189,6 +202,7 @@ const DataTable = (props: OCTIDataTableProps) => {
             filters={toolbarFilters}
             handleClearSelectedElements={handleClearSelectedElements}
             taskScope={taskScope}
+            handleCopy={handleCopy}
           />
         </div>
       )}
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTableFilters.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTableFilters.tsx
index b5ffffb0bc09..d73b8c10a5a5 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/DataTableFilters.tsx
+++ b/opencti-platform/opencti-front/src/components/dataGrid/DataTableFilters.tsx
@@ -1,6 +1,5 @@
 import Filters from '@components/common/lists/Filters';
 import React, { useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import Tooltip from '@mui/material/Tooltip';
 import { FileDownloadOutlined, SettingsOutlined } from '@mui/icons-material';
 import ToggleButton from '@mui/material/ToggleButton';
@@ -18,6 +17,8 @@ import MenuItem from '@mui/material/MenuItem';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
+import { useTheme } from '@mui/styles';
+import { Theme } from '@mui/material/styles/createTheme';
 import FilterIconButton from '../FilterIconButton';
 import { useFormatter } from '../i18n';
 import { DataTableDisplayFiltersProps, DataTableFiltersProps, DataTableVariant } from './dataTableTypes';
@@ -29,42 +30,26 @@ import Security from '../../utils/Security';
 import { KNOWLEDGE_KNGETEXPORT } from '../../utils/hooks/useGranted';
 import { ExportContext } from '../../utils/ExportContextProvider';
 import Transition from '../Transition';
-
-// Deprecated - https://mui.com/system/styles/basics/
-// Do not use it for new code.
-const useStyles = makeStyles(() => ({
-  filterContainer: {
-    minHeight: 10,
-  },
-  filterInliner: {
-    display: 'inline-flex',
-    justifyContent: 'space-between',
-    flex: 1,
-  },
-  filterHeaderContainer: {
-    display: 'inline-grid',
-    gridAutoFlow: 'column',
-    marginLeft: 10,
-    gap: 10,
-  },
-  viewsAligner: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-}));
+import DataTablePagination from './DataTablePagination';
+import { isFilterGroupNotEmpty } from '../../utils/filters/filtersUtils';
 
 export const DataTableDisplayFilters = ({
   availableFilterKeys,
   availableRelationFilterTypes,
   additionalFilterKeys,
+  availableEntityTypes,
   entityTypes,
 }: DataTableDisplayFiltersProps) => {
-  const classes = useStyles();
+  const theme = useTheme<Theme>();
   const { storageKey, initialValues, variant } = useDataTableContext();
   const { helpers, viewStorage: { filters } } = usePaginationLocalStorage(storageKey, initialValues, variant !== DataTableVariant.default);
 
+  if (!isFilterGroupNotEmpty(filters)) {
+    return null;
+  }
+
   return (
-    <div id="filter-container" className={classes.filterContainer}>
+    <div id="filter-container" style={{ minHeight: 10, marginBottom: theme.spacing(2) }}>
       <FilterIconButton
         helpers={helpers}
         availableFilterKeys={availableFilterKeys}
@@ -73,6 +58,7 @@ export const DataTableDisplayFilters = ({
         handleSwitchGlobalMode={helpers.handleSwitchGlobalMode}
         handleSwitchLocalMode={helpers.handleSwitchLocalMode}
         availableRelationFilterTypes={availableRelationFilterTypes}
+        availableEntityTypes={availableEntityTypes}
         entityTypes={entityTypes}
         filtersRestrictions={{
           preventRemoveFor: additionalFilterKeys,
@@ -94,8 +80,8 @@ const DataTableFilters = ({
   currentView,
   additionalHeaderButtons,
 }: DataTableFiltersProps) => {
+  const theme = useTheme<Theme>();
   const { t_i18n } = useFormatter();
-
   const [openSettings, setOpenSettings] = useState(false);
 
   const {
@@ -104,6 +90,8 @@ const DataTableFilters = ({
     redirectionModeEnabled,
     variant,
     createButton,
+    page,
+    setPage,
   } = useDataTableContext();
   const {
     helpers,
@@ -112,8 +100,6 @@ const DataTableFilters = ({
 
   const { selectedElements } = useEntityToggle(storageKey);
 
-  const classes = useStyles();
-
   const exportDisabled = !exportContext || (numberOfElements
     && ((Object.keys(selectedElements).length > export_max_size
         && numberOfElements.number > export_max_size)
@@ -123,8 +109,13 @@ const DataTableFilters = ({
   return (
     <ExportContext.Provider value={{ selectedIds: Object.keys(selectedElements) }}>
       {availableFilterKeys && availableFilterKeys.length > 0 && (
-        <div className={classes.filterInliner}>
-          <div className={classes.filterHeaderContainer}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1 }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: theme.spacing(1),
+          }}
+          >
             <Filters
               helpers={helpers}
               searchContext={searchContextFinal}
@@ -139,7 +130,14 @@ const DataTableFilters = ({
               availableRelationFilterTypes={availableRelationFilterTypes}
             />
           </div>
-          <div className={classes.viewsAligner}>
+          <div style={{ display: 'flex' }}>
+            {(variant === DataTableVariant.default) && (
+              <DataTablePagination
+                page={page}
+                setPage={setPage}
+                numberOfElements={numberOfElements}
+              />
+            )}
             <ToggleButtonGroup
               size="small"
               color="secondary"
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTablePagination.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTablePagination.tsx
index 7d12faf5bdf2..edcda848093e 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/DataTablePagination.tsx
+++ b/opencti-platform/opencti-front/src/components/dataGrid/DataTablePagination.tsx
@@ -1,17 +1,18 @@
 import Typography from '@mui/material/Typography';
-import React, { type Dispatch, type SetStateAction, useCallback, useEffect, useState } from 'react';
+import Tooltip from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
+import React, { type Dispatch, type SetStateAction, useCallback, useEffect } from 'react';
 import { ArrowLeft, ArrowRight } from '@mui/icons-material';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
 import { ButtonGroup } from '@mui/material';
 import Button from '@mui/material/Button';
-import { PopoverProps } from '@mui/material/Popover/Popover';
-import Menu from '@mui/material/Menu';
 import { TableTuneIcon } from 'filigran-icon';
+import { useTheme } from '@mui/styles';
+import { Theme } from '@mui/material/styles/createTheme';
 import { useFormatter } from '../i18n';
 import { DataTableVariant, LocalStorageColumns } from './dataTableTypes';
 import { NumberOfElements, usePaginationLocalStorage } from '../../utils/hooks/useLocalStorage';
 import { useDataTableContext } from './dataTableUtils';
+import NestedMenuButton from '../nestedMenu/NestedMenuButton';
 
 const DataTablePagination = ({
   page,
@@ -22,6 +23,7 @@ const DataTablePagination = ({
   setPage: Dispatch<SetStateAction<number>>,
   numberOfElements?: NumberOfElements,
 }) => {
+  const theme = useTheme<Theme>();
   const { t_i18n } = useFormatter();
 
   const {
@@ -59,113 +61,130 @@ const DataTablePagination = ({
     }
   }, [page, pageSize]);
 
-  const [anchorEl, setAnchorEl] = useState<PopoverProps['anchorEl']>(null);
   const [_, setLocalStorageColumns] = useDataTableLocalStorage<LocalStorageColumns>(`${storageKey}_columns`, {}, true, true);
 
+  const resetTable = () => {
+    setLocalStorageColumns({});
+    resetColumns();
+    helpers.handleAddProperty('pageSize', '25');
+  };
+  const nestedMenuOptions = [
+    {
+      value: 'menu-reset',
+      label: t_i18n('Reset table'),
+      onClick: () => resetTable(),
+      menuLevel: 0,
+    },
+    {
+      value: 'menu-rows-per-page',
+      label: t_i18n('Rows per page'),
+      menuLevel: 0,
+      nestedOptions: [
+        {
+          value: '10',
+          onClick: () => helpers.handleAddProperty('pageSize', '10'),
+          selected: pageSize === '10',
+          menuLevel: 1,
+        },
+        {
+          value: '25',
+          onClick: () => helpers.handleAddProperty('pageSize', '25'),
+          selected: !pageSize || pageSize === '25',
+          menuLevel: 1,
+        },
+        {
+          value: '50',
+          onClick: () => helpers.handleAddProperty('pageSize', '50'),
+          selected: pageSize === '50',
+          menuLevel: 1,
+        },
+        {
+          value: '100',
+          onClick: () => helpers.handleAddProperty('pageSize', '100'),
+          selected: pageSize === '100',
+          menuLevel: 1,
+        },
+      ],
+    },
+  ];
+
   return (
-    <div
-      style={{
+    <Box
+      sx={{
         display: 'flex',
-        justifyContent: 'space-between',
-        marginBottom: 10,
+        borderRadius: 1,
+        border: 1,
+        borderColor: 'divider',
+        marginRight: theme.spacing(1),
       }}
     >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-        }}
+      <ButtonGroup
+        size="small"
+        variant="text"
+        color="pagination"
       >
-        <Typography sx={{ marginRight: 1 }} variant={'body2'}>{t_i18n('Rows per page:')}</Typography>
-        <Select
-          value={pageSize ?? '25'}
+        <Button
+          onClick={() => fetchMore('previous')}
           size="small"
-          variant="standard"
-          sx={{ fontSize: 'small', marginRight: 1 }}
-          onChange={(event) => helpers.handleAddProperty('pageSize', event.target.value)}
+          disabled={firstItem === 1}
+          style={{
+            paddingLeft: 0,
+            paddingRight: 0,
+            borderRight: 'none',
+            minWidth: 24,
+          }}
         >
-          <MenuItem key="10" value="10">10</MenuItem>
-          <MenuItem key="25" value="25">25</MenuItem>
-          <MenuItem key="50" value="50">50</MenuItem>
-          <MenuItem key="100" value="100">100</MenuItem>
-        </Select>
-      </div>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <ButtonGroup
-          size="small"
-          variant="text"
-          color="pagination"
+          <ArrowLeft />
+        </Button>
+        <Tooltip
+          title={
+            <div>
+              <strong>{`${numberOfElements.original}`}</strong>{' '}
+              {t_i18n('entitie(s)')}
+            </div>
+            }
         >
-          <Button
-            onClick={() => fetchMore('previous')}
-            size="small"
-            disabled={firstItem === 1}
-            style={{
-              paddingLeft: 0,
-              paddingRight: 0,
-              borderRight: 'none',
-              minWidth: 24,
-            }}
-          >
-            <ArrowLeft />
-          </Button>
-          <Button
-            disabled
+          <Box
             sx={{
-              ':disabled': {
-                borderRight: '0 !important',
-                color: 'pagination.main',
-              },
+              display: 'flex',
+              alignItems: 'center',
+              borderRight: '0 !important',
+              color: 'pagination.main',
             }}
           >
-            <Typography variant="body2">
+            <Typography variant="body2" style={{ marginTop: 2 }}>
               <span>{`${lastItem ? firstItem : 0} - ${lastItem} `}</span>
               <span style={{ opacity: 0.6 }}>
                 {`/ ${numberOfElements.number}${numberOfElements.symbol}`}
               </span>
             </Typography>
-          </Button>
-          <Button
-            onClick={() => fetchMore('forward')}
-            size="small"
-            disabled={lastItem === numberOfElements.original}
-            style={{ paddingLeft: 0, paddingRight: 0, minWidth: 24 }}
-          >
-            <ArrowRight />
-          </Button>
-        </ButtonGroup>
+          </Box>
+        </Tooltip>
         <Button
-          variant="outlined"
+          onClick={() => fetchMore('forward')}
           size="small"
-          color="pagination"
-          style={{
-            marginLeft: 15,
-            padding: 4,
-            minWidth: 32,
-            height: 32,
-          }}
-          onClick={(e) => setAnchorEl(e.currentTarget)}
+          disabled={lastItem === numberOfElements.original}
+          style={{ paddingLeft: 0, paddingRight: 0, minWidth: 24 }}
         >
-          <TableTuneIcon />
+          <ArrowRight />
         </Button>
-      </div>
-      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
-        <MenuItem
-          onClick={() => {
-            setLocalStorageColumns({});
-            resetColumns();
-            setAnchorEl(null);
-          }}
-        >
-          {t_i18n('Reset table')}
-        </MenuItem>
-      </Menu>
-    </div>
+      </ButtonGroup>
+      <NestedMenuButton
+        menuButtonProps={{
+          variant: 'outlined',
+          size: 'small',
+          color: 'pagination',
+          style: {
+            padding: 6,
+            minWidth: 36,
+            border: 'none',
+          },
+        }}
+        menuButtonChildren={<TableTuneIcon />}
+        options={nestedMenuOptions}
+        menuLevels={2}
+      />
+    </Box>
   );
 };
 
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTableWithoutFragment.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTableWithoutFragment.tsx
index 9cd6f4275232..eed09484a253 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/DataTableWithoutFragment.tsx
+++ b/opencti-platform/opencti-front/src/components/dataGrid/DataTableWithoutFragment.tsx
@@ -14,6 +14,7 @@ type OCTIDataTableProps = Pick<DataTableProps, 'dataColumns'
 | 'disableLineSelection'
 | 'disableToolBar'
 | 'disableSelectAll'
+| 'selectOnLineClick'
 | 'filtersComponent'
 | 'variant'> & {
   data: unknown,
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableBody.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableBody.tsx
index 6e03267789db..05640f9912ee 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableBody.tsx
+++ b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableBody.tsx
@@ -9,6 +9,7 @@ import { ColumnSizeVars, DataTableBodyProps, DataTableLineProps, DataTableVarian
 import DataTableLine, { DataTableLinesDummy } from './DataTableLine';
 import { SELECT_COLUMN_SIZE } from './DataTableHeader';
 import { useDataTableToggle } from '../dataTableHooks';
+import { throttle } from '../../../utils/utils';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -47,6 +48,7 @@ const DataTableBody = ({
     variant,
     useDataTable,
     resolvePath,
+    actions,
   } = useDataTableContext();
 
   const { data: queryData, isLoading, loadMore, hasMore } = useDataTable(dataQueryArgs);
@@ -66,6 +68,9 @@ const DataTableBody = ({
 
   // TABLE HANDLING
   const [resize, setResize] = useState(false);
+  const resizeObserver = useRef(new ResizeObserver(throttle(() => {
+    setResize(true);
+  }, 200)));
   const [computeState, setComputeState] = useState<HTMLDivElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -74,7 +79,7 @@ const DataTableBody = ({
   const startsWithSelect = columns.at(0)?.id === 'select';
   const endsWithNavigate = columns.at(-1)?.id === 'navigate';
 
-  let storedSize = SELECT_COLUMN_SIZE;
+  let storedSize = (endsWithNavigate || actions) ? SELECT_COLUMN_SIZE : 0;
   if (startsWithSelect) {
     storedSize += SELECT_COLUMN_SIZE;
   }
@@ -142,7 +147,7 @@ const DataTableBody = ({
       colSizes['--table-height'] = rootRef.offsetHeight - 42; // SIZE OF CONTAINER - Nb Elements - Line Size
     } else {
       const rootSize = (document.getElementById('root')?.offsetHeight ?? 0) - settingsMessagesBannerHeight;
-      const filterRemoval = (hasFilterComponent && document.getElementById('filter-container')?.children.length) ? 260 : 220;
+      const filterRemoval = (hasFilterComponent && document.getElementById('filter-container')?.children.length) ? 230 : 200;
       const tabsRemoval = document.getElementById('tabs-container')?.children.length ? 50 : 0;
       colSizes['--table-height'] = rootSize - filterRemoval - tabsRemoval;
     }
@@ -202,20 +207,20 @@ const DataTableBody = ({
       }
     }, 200);
 
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('storage', handleStorage);
+    if (rootRef) resizeObserver.current.observe(rootRef);
     let observer: MutationObserver | undefined;
-    if (hasFilterComponent) {
-      window.addEventListener('resize', handleResize);
-      window.addEventListener('storage', handleStorage);
+    const elementToObserve = document.getElementById('filter-container');
+    if (elementToObserve) {
       observer = new MutationObserver(() => setResize(true));
-      const elementToObserve = document.getElementById('filter-container');
-      if (elementToObserve) {
-        observer.observe(elementToObserve, { childList: true });
-      }
+      observer.observe(elementToObserve, { childList: true });
     }
 
     return () => {
       window.removeEventListener('resize', handleResize);
       window.removeEventListener('storage', handleStorage);
+      resizeObserver.current.disconnect();
       if (hasFilterComponent && observer) {
         observer.disconnect();
       }
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableComponent.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableComponent.tsx
index 1c63b3631c5f..7b75c5c29158 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableComponent.tsx
+++ b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableComponent.tsx
@@ -6,7 +6,6 @@ import { DataTableContext, defaultColumnsMap } from '../dataTableUtils';
 import { DataTableColumn, DataTableColumns, DataTableContextProps, DataTableProps, DataTableVariant, LocalStorageColumns } from '../dataTableTypes';
 import DataTableHeaders from './DataTableHeaders';
 import { SELECT_COLUMN_SIZE } from './DataTableHeader';
-import DataTablePagination from '../DataTablePagination';
 
 const DataTableComponent = ({
   dataColumns,
@@ -43,6 +42,7 @@ const DataTableComponent = ({
   disableLineSelection,
   disableToolBar,
   disableSelectAll,
+  selectOnLineClick,
   onLineClick,
 }: DataTableProps) => {
   const localStorageColumns = useDataTableLocalStorage<LocalStorageColumns>(`${storageKey}_columns`, {}, true)[0];
@@ -59,12 +59,16 @@ const DataTableComponent = ({
         ...(currentColumn?.size ? { size: currentColumn?.size } : {}),
       });
     }),
-    ...(actions ? [] : [{ id: 'navigate', visible: true } as DataTableColumn]),
+    // inject "navigate" action (chevron) if navigable and no specific actions defined
+    ...((disableNavigation || actions) ? [] : [{ id: 'navigate', visible: true } as DataTableColumn]),
   ];
 
   const [columns, setColumns] = useState<DataTableColumns>(columnsInitialState);
 
-  const clientWidth = document.getElementsByTagName('main')[0].clientWidth - 46;
+  // main tag only exists in the app, we fallback to root element for public dashboards
+  const mainElement = document.getElementsByTagName('main')[0];
+  const rootElement = document.getElementById('root');
+  const clientWidth = (mainElement ?? rootElement).clientWidth - 46;
 
   const temporaryColumnsSize: { [key: string]: number } = {
     '--header-select-size': SELECT_COLUMN_SIZE,
@@ -76,7 +80,7 @@ const DataTableComponent = ({
   };
   columns.forEach((col) => {
     if (col.visible && col.percentWidth) {
-      const size = col.percentWidth * (clientWidth / 100);
+      const size = col.percentWidth * ((clientWidth - 2 * SELECT_COLUMN_SIZE) / 100) - 2; // 2 is spacing
       temporaryColumnsSize[`--header-${col.id}-size`] = size;
       temporaryColumnsSize[`--col-${col.id}-size`] = size;
     }
@@ -84,7 +88,8 @@ const DataTableComponent = ({
 
   // QUERY PART
   const [page, setPage] = useState<number>(1);
-  const currentPageSize = pageSize ? Number.parseInt(pageSize, 10) : 25;
+  const defaultPageSize = variant === DataTableVariant.default ? 25 : Number.MAX_SAFE_INTEGER;
+  const currentPageSize = pageSize ? Number.parseInt(pageSize, 10) : defaultPageSize;
   const pageStart = useMemo(() => {
     return page ? (page - 1) * currentPageSize : 0;
   }, [page, currentPageSize]);
@@ -120,7 +125,10 @@ const DataTableComponent = ({
         disableNavigation,
         disableToolBar,
         disableSelectAll,
+        selectOnLineClick,
         onLineClick,
+        page,
+        setPage,
       } as DataTableContextProps}
     >
       <div ref={dataTableHeaderRef}>
@@ -137,19 +145,7 @@ const DataTableComponent = ({
           </div>
         ))}
       </div>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {(variant === DataTableVariant.default) && (
-          <DataTablePagination
-            page={page}
-            setPage={setPage}
-            numberOfElements={numberOfElements}
-          />
-        )}
+      <>
         <React.Suspense
           fallback={(
             <div style={{ ...temporaryColumnsSize, width: '100%' }}>
@@ -159,7 +155,7 @@ const DataTableComponent = ({
                 orderAsc={orderAsc}
                 dataTableToolBarComponent={dataTableToolBarComponent}
               />
-              {<DataTableLinesDummy number={currentPageSize} />}
+              {<DataTableLinesDummy number={Math.max(currentPageSize, 100)} />}
             </div>
           )}
         >
@@ -178,7 +174,7 @@ const DataTableComponent = ({
             dataTableHeaderRef={dataTableHeaderRef}
           />
         </React.Suspense>
-      </div>
+      </>
     </DataTableContext.Provider>
   );
 };
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeader.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeader.tsx
index 469bc6da2f8d..548a4bf7f06f 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeader.tsx
+++ b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeader.tsx
@@ -1,11 +1,10 @@
 import React, { FunctionComponent } from 'react';
-import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import { ArrowDropDown, ArrowDropUp, MoreVert } from '@mui/icons-material';
 import IconButton from '@mui/material/IconButton';
 import SimpleDraggrable from 'react-draggable';
 import makeStyles from '@mui/styles/makeStyles';
 import { createStyles } from '@mui/styles';
 import { Theme as MuiTheme } from '@mui/material/styles/createTheme';
-import { UnfoldMoreIcon } from 'filigran-icon';
 import Tooltip from '@mui/material/Tooltip';
 import { useDataTableContext } from '../dataTableUtils';
 import { DataTableColumn, DataTableHeaderProps, DataTableVariant, LocalStorageColumns } from '../dataTableTypes';
@@ -20,45 +19,51 @@ const useStyles = makeStyles<MuiTheme, { column: DataTableColumn }>((theme) => c
     display: 'flex',
     width: ({ column }) => `calc(var(--header-${column?.id}-size) * 1px)`,
     fontWeight: 'bold',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    height: 40,
     '& .react-draggable-dragging': {
-      background: theme.palette.secondary.main,
+      backgroundColor: theme.palette.primary.main,
     },
     '&:hover': {
       '& $draggable': {
-        background: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.main,
+      },
+      '& $icon': {
+        visibility: 'visible',
       },
     },
   },
   headerAligner: {
-    paddingLeft: 8,
-    paddingRight: 8,
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
     display: 'flex',
     alignItems: 'center',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
+    flexGrow: 1,
     cursor: ({ column: { isSortable } }) => (isSortable ? 'pointer' : 'unset'),
   },
-  aligner: { flexGrow: 1 },
   draggable: {
     position: 'absolute',
-    top: 0,
+    top: '8px',
     right: 3,
-    height: '100%',
-    width: 4,
+    height: theme.spacing(4),
+    width: 10,
+    paddingLeft: 4,
+    paddingRight: 4,
+    backgroundClip: 'content-box',
     borderRadius: 2,
     cursor: 'col-resize',
-    userSelect: 'none',
-    touchAction: 'none',
-    zIndex: 999,
+  },
+  icon: {
+    visibility: 'hidden',
   },
 }));
 
 const DataTableHeader: FunctionComponent<DataTableHeaderProps> = ({
   column,
   setAnchorEl,
+  isActive,
   setActiveColumn,
   setLocalStorageColumns,
   containerRef,
@@ -94,7 +99,9 @@ const DataTableHeader: FunctionComponent<DataTableHeaderProps> = ({
           }
         }}
       >
-        <Tooltip title={t_i18n(column.label)}>{t_i18n(column.label)}</Tooltip>
+        <Tooltip title={t_i18n(column.label)}>
+          <span style={{ fontSize: '12px' }}>{t_i18n(column.label).toUpperCase()}</span>
+        </Tooltip>
         {sortBy && (orderAsc ? <ArrowDropUp /> : <ArrowDropDown />)}
       </div>
       <>
@@ -102,10 +109,14 @@ const DataTableHeader: FunctionComponent<DataTableHeaderProps> = ({
           <>
             <IconButton
               disableRipple
+              className={classes.icon}
               onClick={(e) => {
                 setActiveColumn(column);
                 setAnchorEl(e.currentTarget);
               }}
+              style={{
+                visibility: isActive ? 'visible' : undefined,
+              }}
               sx={{
                 marginRight: 1,
                 opacity: 0.5,
@@ -115,7 +126,7 @@ const DataTableHeader: FunctionComponent<DataTableHeaderProps> = ({
                 },
               }}
             >
-              <UnfoldMoreIcon />
+              <MoreVert />
             </IconButton>
           </>
         )}
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeaders.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeaders.tsx
index 14cb69db07b7..195f0e39d562 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeaders.tsx
+++ b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeaders.tsx
@@ -1,5 +1,4 @@
 import React, { FunctionComponent, useMemo, useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import Checkbox from '@mui/material/Checkbox';
 import { DragIndicatorOutlined } from '@mui/icons-material';
 import Menu from '@mui/material/Menu';
@@ -12,16 +11,6 @@ import DataTableHeader from './DataTableHeader';
 import { useDataTableContext } from '../dataTableUtils';
 import type { Theme } from '../../Theme';
 
-// Deprecated - https://mui.com/system/styles/basics/
-// Do not use it for new code.
-const useStyles = makeStyles({
-  headersContainer: {
-    display: 'flex',
-    width: 'calc(var(--header-table-size) * 1px)',
-  },
-  aligner: { flexGrow: 1 },
-});
-
 const DataTableHeaders: FunctionComponent<DataTableHeadersProps> = ({
   containerRef,
   effectiveColumns,
@@ -29,7 +18,6 @@ const DataTableHeaders: FunctionComponent<DataTableHeadersProps> = ({
   sortBy,
   orderAsc,
 }) => {
-  const classes = useStyles();
   const theme = useTheme<Theme>();
   const {
     storageKey,
@@ -76,14 +64,22 @@ const DataTableHeaders: FunctionComponent<DataTableHeadersProps> = ({
   const ordonableColumns = useMemo(() => effectiveColumns.filter(({ id }) => !['select', 'navigate'].includes(id)), [columns]);
   return (
     <div
-      className={classes.headersContainer}
+      style={{
+        display: 'flex',
+        width: 'calc(var(--header-table-size) * 1px)',
+        height: `calc(${theme.spacing(6)} + 1px)`,
+        alignItems: 'stretch',
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        background: (Object.keys(selectedElements ?? {}).length > 0 || selectAll) && !disableSelectAll ? theme.palette.background.accent : 'unset',
+      }}
     >
       {effectiveColumns.some(({ id }) => id === 'select') && (
         <div
           data-testid="dataTableCheckAll"
           style={{
+            display: 'flex',
+            alignSelf: 'center',
             width: 'calc(var(--header-select-size) * 1px)',
-            background: (Object.keys(selectedElements).length > 0 || selectAll) && !disableSelectAll ? theme.palette.background.accent : 'unset',
           }}
         >
           <Checkbox
@@ -171,6 +167,7 @@ const DataTableHeaders: FunctionComponent<DataTableHeadersProps> = ({
                 key={column.id}
                 column={column}
                 setAnchorEl={setAnchorEl}
+                isActive={activeColumn?.id === column.id}
                 setActiveColumn={setActiveColumn}
                 setLocalStorageColumns={setLocalStorageColumns}
                 containerRef={containerRef}
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx
index 41de81fd795d..d238bad8c3f7 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx
+++ b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx
@@ -14,11 +14,11 @@ import { getMainRepresentative } from '../../../utils/defaultRepresentatives';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
-const useStyles = makeStyles<Theme, { cell?: DataTableColumn, navigable?: boolean }>((theme) => createStyles({
+const useStyles = makeStyles<Theme, { cell?: DataTableColumn, clickable?: boolean }>((theme) => createStyles({
   cellContainer: ({ cell }) => ({
     display: 'flex',
     width: `calc(var(--col-${cell?.id}-size) * 1px)`,
-    height: '50px',
+    height: theme.spacing(6),
     alignItems: 'center',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -31,15 +31,16 @@ const useStyles = makeStyles<Theme, { cell?: DataTableColumn, navigable?: boolea
     width: 'fill-available',
     alignItems: 'center',
     gap: 3,
+    fontSize: '13px',
   },
   dummyContainer: {
     display: 'flex',
     gap: 8,
   },
-  row: ({ navigable }) => ({
+  row: ({ clickable }) => ({
     display: 'flex',
-    borderTop: `1px solid ${theme.palette.background.accent}`,
-    '&:hover': navigable ? {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    '&:hover': clickable ? {
       backgroundColor:
         theme.palette.mode === 'dark'
           ? 'rgba(255, 255, 255, .1)'
@@ -58,7 +59,7 @@ export const DataTableLineDummy = () => {
         <Skeleton
           key={column.id}
           variant="text"
-          height={50}
+          height={35}
           style={{ width: `calc(var(--col-${column.id}-size) * 1px)` }}
         />
       ))}
@@ -71,7 +72,9 @@ export const DataTableLineDummy = () => {
   );
 };
 
-export const DataTableLinesDummy = ({ number = 10 }: { number?: number }) => Array(number).fill(0).map((_, idx) => (<DataTableLineDummy key={idx} />));
+export const DataTableLinesDummy = ({ number = 10 }: { number?: number }) => {
+  return Array(Math.min(number, 25)).fill(0).map((_, idx) => (<DataTableLineDummy key={idx} />));
+};
 
 const DataTableCell = ({
   cell,
@@ -112,6 +115,7 @@ const DataTableLine = ({
     actions,
     disableNavigation,
     onLineClick,
+    selectOnLineClick,
     variant,
   } = useDataTableContext();
   const data = useLineData(row);
@@ -121,15 +125,10 @@ const DataTableLine = ({
     link = `${link}/${redirectionMode}`;
   }
 
-  const navigable = !disableNavigation && !onLineClick;
-  const internalOnClick = () => {
-    if (onLineClick) {
-      onLineClick(data);
-    } else if (navigable) {
-      navigate(link);
-    }
-  };
-  const classes = useStyles({ navigable });
+  const navigable = !disableNavigation && !onLineClick && !selectOnLineClick;
+  const clickable = !!(navigable || selectOnLineClick || onLineClick);
+
+  const classes = useStyles({ clickable });
 
   const {
     selectAll,
@@ -139,13 +138,38 @@ const DataTableLine = ({
   } = useDataTableToggle(storageKey);
 
   const startsWithSelect = effectiveColumns.at(0)?.id === 'select';
+  const endWithNavigate = effectiveColumns.at(-1)?.id === 'navigate';
+
+  const handleSelectLine = (event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.shiftKey) {
+      onToggleShiftEntity(index, data, event);
+    } else {
+      onToggleEntity(data, event);
+    }
+  };
+
+  const handleRowClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (selectOnLineClick) {
+      handleSelectLine(event);
+    } else if (onLineClick) {
+      onLineClick(data);
+    } else if (navigable) {
+      navigate(link);
+    }
+  };
+
   return (
     <div
       key={row.id}
       className={classes.row}
-      onMouseDown={variant === DataTableVariant.widget ? internalOnClick : undefined}
-      onClick={variant !== DataTableVariant.widget ? internalOnClick : undefined}
-      style={{ cursor: (navigable || Boolean(onLineClick)) ? 'pointer' : 'unset' }}
+      // using onMouseDown to redirect before drag and drop happens when used in dashboard widgets
+      onMouseDown={variant === DataTableVariant.widget ? handleRowClick : undefined}
+      onClick={variant !== DataTableVariant.widget ? handleRowClick : undefined}
+      style={{ cursor: clickable ? 'pointer' : 'unset' }}
       data-testid={getMainRepresentative(data)}
     >
       {startsWithSelect && (
@@ -158,15 +182,7 @@ const DataTableLine = ({
         >
 
           <Checkbox
-            onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              if (event.shiftKey) {
-                onToggleShiftEntity(index, data, event);
-              } else {
-                onToggleEntity(data, event);
-              }
-            }}
+            onClick={handleSelectLine}
             checked={
               (selectAll
                 && !((data.id || 'id') in (deSelectedElements || {})))
@@ -175,7 +191,7 @@ const DataTableLine = ({
           />
         </div>
       )}
-      {effectiveColumns.slice(startsWithSelect ? 1 : 0, actions ? undefined : -1).map((column) => (
+      {effectiveColumns.slice(startsWithSelect ? 1 : 0, (actions || disableNavigation) ? undefined : -1).map((column) => (
         <DataTableCell
           key={column.id}
           cell={column}
@@ -183,27 +199,23 @@ const DataTableLine = ({
           storageHelpers={storageHelpers}
         />
       ))}
-      <div
-        key={`navigate_${data.id}`}
-        className={classes.cellContainer}
-        style={{
-          width: 'calc(var(--col-navigate-size) * 1px)',
-          overflow: 'initial',
-        }}
-        onClick={(e) => {
-          if (actions && navigable) {
-            e.preventDefault();
-            e.stopPropagation();
-          }
-        }}
-      >
-        {actions && actions(data)}
-        {effectiveColumns.at(-1)?.id === 'navigate' && (
-          <IconButton onClick={() => navigate(link)}>
-            <KeyboardArrowRightOutlined />
-          </IconButton>
-        )}
-      </div>
+      {(actions || endWithNavigate) && (
+        <div
+          key={`navigate_${data.id}`}
+          className={classes.cellContainer}
+          style={{
+            width: 'calc(var(--col-navigate-size) * 1px)',
+            overflow: 'initial',
+          }}
+        >
+          {actions && actions(data)}
+          {endWithNavigate && (
+            <IconButton onClick={() => navigate(link)}>
+              <KeyboardArrowRightOutlined />
+            </IconButton>
+          )}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts b/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts
index a4a0bb05264b..34ef4bebff04 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts
+++ b/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts
@@ -60,7 +60,7 @@ export interface DataTableContextProps {
     numberOfSelectedElements: number
     onToggleEntity: (
       entity: any,
-      _?: React.SyntheticEvent,
+      _?: React.MouseEvent,
       forceRemove?: any[],
     ) => void
     handleClearSelectedElements: () => void
@@ -85,7 +85,10 @@ export interface DataTableContextProps {
   disableNavigation: DataTableProps['disableNavigation']
   disableToolBar: DataTableProps['disableToolBar']
   disableSelectAll: DataTableProps['disableSelectAll']
+  selectOnLineClick: DataTableProps['selectOnLineClick']
   onLineClick: DataTableProps['onLineClick']
+  page: number
+  setPage:Dispatch<SetStateAction<number>>
 }
 
 export interface DataTableProps {
@@ -94,6 +97,7 @@ export interface DataTableProps {
   storageKey: string
   initialValues: LocalStorage
   toolbarFilters?: FilterGroup
+  handleCopy?: () => void
   lineFragment?: GraphQLTaggedNode
   dataQueryArgs: any
   availableFilterKeys?: string[] | undefined;
@@ -126,6 +130,7 @@ export interface DataTableProps {
   disableLineSelection?: boolean
   disableToolBar?: boolean
   disableSelectAll?: boolean
+  selectOnLineClick?: boolean
   onLineClick?: (line: any) => void
 }
 
@@ -149,6 +154,7 @@ export interface DataTableDisplayFiltersProps {
   additionalFilterKeys?: string[]
   availableRelationFilterTypes?: Record<string, string[]> | undefined
   availableFilterKeys?: string[] | undefined;
+  availableEntityTypes?: string[]
   paginationOptions: any
 }
 
@@ -180,6 +186,7 @@ export interface DataTableHeaderProps {
   containerRef?: MutableRefObject<HTMLDivElement | null>
   sortBy: boolean
   orderAsc: boolean
+  isActive?: boolean
 }
 
 export interface DataTableLineProps {
@@ -188,7 +195,7 @@ export interface DataTableLineProps {
   effectiveColumns: DataTableColumns
   storageHelpers: DataTableProps['storageHelpers']
   index: number
-  onToggleShiftEntity: (currentIndex: number, currentEntity: { id: string }, event?: React.SyntheticEvent) => void
+  onToggleShiftEntity: (currentIndex: number, currentEntity: { id: string }, event?: React.MouseEvent) => void
 }
 
 export interface DataTableCellProps {
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/dataTableUtils.tsx b/opencti-platform/opencti-front/src/components/dataGrid/dataTableUtils.tsx
index 27811954eef5..df5f5ce17d9e 100644
--- a/opencti-platform/opencti-front/src/components/dataGrid/dataTableUtils.tsx
+++ b/opencti-platform/opencti-front/src/components/dataGrid/dataTableUtils.tsx
@@ -19,6 +19,7 @@ import { getMainRepresentative } from '../../utils/defaultRepresentatives';
 import ItemEntityType from '../ItemEntityType';
 import ItemOpenVocab from '../ItemOpenVocab';
 import ItemBoolean from '../ItemBoolean';
+import ItemSeverity from '../ItemSeverity';
 
 const MAGICAL_SIZE = 0.113;
 
@@ -55,7 +56,7 @@ const useStyles = makeStyles<Theme>((theme) => ({
     float: 'left',
     width: 120,
     textTransform: 'uppercase',
-    borderRadius: '0',
+    borderRadius: 4,
   },
   chip: {
     fontSize: 13,
@@ -226,14 +227,14 @@ const defaultColumns: DataTableProps['dataColumns'] = {
     label: 'Original creation date',
     percentWidth: 15,
     isSortable: true,
-    render: ({ created }, { fd }) => fd(created),
+    render: ({ created }, helpers) => defaultRender(helpers.fd(created), helpers),
   },
   created_at: {
     id: 'created_at',
     label: 'Platform creation date',
     percentWidth: 15,
     isSortable: true,
-    render: ({ created_at }, { fd }) => fd(created_at),
+    render: ({ created_at }, helpers) => defaultRender(helpers.fd(created_at), helpers),
   },
   createdBy: {
     id: 'createdBy',
@@ -655,9 +656,9 @@ const defaultColumns: DataTableProps['dataColumns'] = {
     percentWidth: 10,
     isSortable: true,
     render: ({ severity }, { t_i18n }) => (
-      <ItemPriority
+      <ItemSeverity
         variant="inList"
-        priority={severity}
+        severity={severity}
         label={severity || t_i18n('Unknown')}
       />
     ),
@@ -820,8 +821,11 @@ const defaultColumns: DataTableProps['dataColumns'] = {
     label: 'CVSS3 - Severity',
     percentWidth: 15,
     isSortable: true,
-    render: ({ x_opencti_cvss_base_severity }) => (
-      <Tooltip title={x_opencti_cvss_base_severity}><>{x_opencti_cvss_base_severity}</></Tooltip>
+    render: ({ x_opencti_cvss_base_severity }, { t_i18n }) => (
+      <ItemSeverity
+        severity={x_opencti_cvss_base_severity}
+        label={x_opencti_cvss_base_severity || t_i18n('Unknown')}
+      />
     ),
   },
   x_opencti_organization_type: {
@@ -860,6 +864,42 @@ const defaultColumns: DataTableProps['dataColumns'] = {
       />
     ),
   },
+  file_name: {
+    id: 'file_name',
+    label: 'File name',
+    percentWidth: 12,
+    isSortable: false,
+    render: (data, { column: { size } }) => {
+      const file = (data.importFiles?.edges && data.importFiles.edges.length > 0)
+        ? data.importFiles.edges[0]?.node
+        : { name: 'N/A', metaData: { mimetype: 'N/A' }, size: 0 };
+      return (<Tooltip title={file?.name}><>{truncate(file?.name, size * MAGICAL_SIZE)}</></Tooltip>);
+    },
+  },
+  file_mime_type: {
+    id: 'file_mime_type',
+    label: 'Mime/Type',
+    percentWidth: 8,
+    isSortable: false,
+    render: (data, { column: { size } }) => {
+      const file = (data.importFiles?.edges && data.importFiles.edges.length > 0)
+        ? data.importFiles.edges[0]?.node
+        : { name: 'N/A', metaData: { mimetype: 'N/A' }, size: 0 };
+      return (<Tooltip title={file?.metaData?.mimetype}><>{truncate(file?.metaData?.mimetype, size * MAGICAL_SIZE)}</></Tooltip>);
+    },
+  },
+  file_size: {
+    id: 'file_size',
+    label: 'File size',
+    percentWidth: 8,
+    isSortable: false,
+    render: (data, { b }) => {
+      const file = (data.importFiles?.edges && data.importFiles.edges.length > 0)
+        ? data.importFiles.edges[0]?.node
+        : { name: 'N/A', metaData: { mimetype: 'N/A' }, size: 0 };
+      return (<Tooltip title={file?.metaData?.mimetype}><>{b(file?.size)}</></Tooltip>);
+    },
+  },
 };
 
 export const defaultColumnsMap = new Map<string, Partial<DataTableColumn>>(Object.entries(defaultColumns));
diff --git a/opencti-platform/opencti-front/src/components/list_cards/ListCards.jsx b/opencti-platform/opencti-front/src/components/list_cards/ListCards.jsx
index 9e5a5ae3fe0c..5111233c4327 100644
--- a/opencti-platform/opencti-front/src/components/list_cards/ListCards.jsx
+++ b/opencti-platform/opencti-front/src/components/list_cards/ListCards.jsx
@@ -21,13 +21,12 @@ import { KNOWLEDGE_KNGETEXPORT } from '../../utils/hooks/useGranted';
 import FilterIconButton from '../FilterIconButton';
 import { export_max_size } from '../../utils/utils';
 
-const styles = () => ({
+const styles = (theme) => ({
   parameters: {
     display: 'flex',
     alignItems: 'center',
-    gap: 10,
-    marginTop: -10,
-    paddingBottom: 10,
+    gap: theme.spacing(1),
+    marginBottom: theme.spacing(2),
     flexWrap: 'wrap',
   },
   cardsContainer: {
@@ -40,9 +39,6 @@ const styles = () => ({
   filler: {
     flex: 'auto',
   },
-  views: {
-    marginTop: -5,
-  },
 });
 
 class ListCards extends Component {
@@ -142,9 +138,9 @@ class ListCards extends Component {
                   )}
                 </IconButton>
                 <div className={classes.filler} />
-                <div className={classes.views}>
+                <div style={{ display: 'flex' }}>
                   {numberOfElements && (
-                  <div style={{ float: 'left', padding: '7px 5px 0 0' }}>
+                  <div style={{ marginRight: '8px', alignSelf: 'center' }}>
                     <strong>{`${numberOfElements.number}${numberOfElements.symbol}`}</strong>{' '}
                     {t('entitie(s)')}
                   </div>
@@ -163,7 +159,6 @@ class ListCards extends Component {
                         handleChangeView(value);
                       }
                     }}
-                    style={{ margin: '0 0 0 5px' }}
                   >
                     {typeof handleChangeView === 'function' && (
                       <ToggleButton value="cards" aria-label="cards">
@@ -211,13 +206,13 @@ class ListCards extends Component {
                           </span>
                         </Tooltip>
                     )}
-                    {/*
-                      * Passing in createButton because cannot use hooks here.
-                      * More permanent solution once FAB_REPLACEMENT is completed.
-                      */}
-                    {createButton}
                   </ToggleButtonGroup>
                   )}
+                  {/*
+                  * Passing in createButton because cannot use hooks here.
+                  * More permanent solution once FAB_REPLACEMENT is completed.
+                  */}
+                  {createButton}
                 </div>
               </div>
               <FilterIconButton
diff --git a/opencti-platform/opencti-front/src/components/list_lines/ListLines.jsx b/opencti-platform/opencti-front/src/components/list_lines/ListLines.jsx
index f7219680fd7a..ec5e4e367974 100644
--- a/opencti-platform/opencti-front/src/components/list_lines/ListLines.jsx
+++ b/opencti-platform/opencti-front/src/components/list_lines/ListLines.jsx
@@ -106,6 +106,7 @@ const styles = (theme) => ({
     alignItems: 'center',
   },
   headerItemText: {
+    marginRight: theme.spacing(1),
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
diff --git a/opencti-platform/opencti-front/src/components/nestedMenu/NestedMenuButton.tsx b/opencti-platform/opencti-front/src/components/nestedMenu/NestedMenuButton.tsx
new file mode 100644
index 000000000000..71a81e01b006
--- /dev/null
+++ b/opencti-platform/opencti-front/src/components/nestedMenu/NestedMenuButton.tsx
@@ -0,0 +1,299 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import { Box, ClickAwayListener, Grow, MenuList, Paper, Popper, Typography } from '@mui/material';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import { ButtonProps } from '@mui/material/Button/Button';
+
+// This function checks whether a point (x, y) is on the left or right side of a line formed by two points (px, py) and (qx, qy).
+// If the result is negative, the point is on the right side of the line. If positive, it's on the left side.
+// It helps us determine if a point is on the same side as a vertex of the triangle when compared to its edges.
+const sign = (
+  px: number,
+  py: number,
+  qx: number,
+  qy: number,
+  rx: number,
+  ry: number,
+) => {
+  return (px - rx) * (qy - ry) - (qx - rx) * (py - ry);
+};
+
+// This function checks if a point (x, y) is inside a triangle formed by three points (x1, y1), (x2, y2), and (x3, y3).
+const pointInTriangle = (
+  currentMouseCoordinates: Array<number>,
+  triangleCoordinates: Array<Array<number>>,
+) => {
+  const [[x1, y1], [x2, y2], [x3, y3]] = triangleCoordinates;
+  const [x, y] = currentMouseCoordinates;
+
+  const b1 = sign(x, y, x1, y1, x2, y2) <= 0;
+  const b2 = sign(x, y, x2, y2, x3, y3) <= 0;
+  const b3 = sign(x, y, x3, y3, x1, y1) <= 0;
+  // If all signs are the same (either all negative or all positive), the point is inside the triangle.
+  return b1 === b2 && b2 === b3;
+};
+
+type Option = {
+  value: string;
+  menuLevel: number;
+  label?: string; // if not present, value is used
+  onClick?: () => void; // individual click handler
+  selected?: boolean;
+  nestedOptions? : Option[];
+};
+
+type NestedMenuProps = {
+  menuButtonChildren?: React.ReactNode;
+  menuButtonProps?: ButtonProps;
+  options: Array<Option>;
+  menuLevels: number;
+  onClick?: (option: Option) => void; // global click handler
+};
+
+const NestedMenuButton: React.FC<NestedMenuProps> = ({
+  menuButtonProps = {},
+  menuButtonChildren,
+  options,
+  menuLevels,
+  onClick,
+}: NestedMenuProps) => {
+  const [anchors, setAnchors] = React.useState<{
+    elements: Array<null | HTMLElement>;
+    options: Array<null | typeof options>;
+  }>({
+    elements: new Array(menuLevels).fill(null),
+    options: new Array(menuLevels).fill(null),
+  });
+
+  const mouseEntered = React.useRef<Record<string, boolean>>({});
+  const mouseLeftCoordinates = React.useRef<Array<number>>([]);
+  const buttonRef = React.useRef(null);
+  const mouseIdleTimer = React.useRef<number | null>(null);
+
+  const handleOpen = (
+    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+    level = 0,
+    nestedOptions = options,
+  ) => {
+    const target = event.target as HTMLElement;
+
+    setAnchors((prevAnchors) => ({
+      elements: prevAnchors.elements.map((element, index) => (index === level ? target : element)),
+      options: prevAnchors.options.map((element, index) => (index === level ? nestedOptions : element)),
+    }));
+  };
+
+  const handleClose = (level: number) => {
+    setAnchors((prevAnchors) => ({
+      elements: prevAnchors.elements.map((element, index) => (index >= level ? null : element)),
+      options: prevAnchors.options.map((element, index) => (index >= level ? null : element)),
+    }));
+  };
+
+  const handleClickAway = (event: MouseEvent | TouchEvent) => {
+    if (event.target === buttonRef.current) {
+      handleClose(0);
+      return;
+    }
+
+    const optionWithoutSubMenu = anchors.elements.every(
+      (element) => !element || !event.composedPath().includes(element),
+    );
+
+    if (optionWithoutSubMenu) {
+      handleClose(0);
+    }
+  };
+
+  const handleClickOption = (option: Option) => {
+    if (!option.nestedOptions) {
+      handleClose(0);
+    } else {
+      return; // no handler on submenu's parent
+    }
+    option.onClick?.();
+    onClick?.(option);
+  };
+
+  const getId = (opt: (typeof options)[0], index: number) => {
+    return `${index}-${opt.menuLevel}`;
+  };
+
+  const handleMouseMove = (
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    option: Option,
+    optIndex: number,
+  ) => {
+    let shouldComputeSubMenuOpenLogic = true;
+    const submenu = document.querySelector(`#nested-menu-${option.menuLevel + 1}`);
+
+    const computeSubMenuLogic = () => {
+      if (!mouseEntered.current[getId(option, optIndex)]) {
+        mouseEntered.current[getId(option, optIndex)] = true;
+        // Close all prior submenus if the mouse transitions from an option with a submenu to an option without a submenu.
+        if (!option.nestedOptions) {
+          handleClose(option.menuLevel + 1);
+        } else if (
+          // If the mouse moves from an option with a submenu to another option with a submenu, open the submenu of the current option and close the submenu of the previous option.
+          option.nestedOptions
+          && anchors.options[option.menuLevel + 1]
+          && !option.nestedOptions.every(
+            (val, i) => val.value === anchors.options[option.menuLevel + 1]?.[i].value,
+          )
+        ) {
+          handleClose(option.menuLevel + 1);
+          handleOpen(event, option.menuLevel + 1, option.nestedOptions);
+        } else {
+          handleOpen(event, option.menuLevel + 1, option.nestedOptions);
+        }
+      }
+    };
+
+    if (mouseLeftCoordinates.current.length > 0 && submenu) {
+      const { x, y, height } = submenu.getBoundingClientRect();
+
+      // Form a virtual triangle using the left mouse coordinates and the top-left and bottom-left coordinates of the submenu.
+      // If the current mouse coordinates fall within this triangle, skip the submenu logic computation.
+      // Check https://twitter.com/diegohaz/status/1283558204178407427 for more context.
+      const currentMouseCoordinates = [event.clientX, -event.clientY];
+      const virtualTriangleCoordinates = [
+        [x, -y],
+        [x, -(y + height)],
+        [mouseLeftCoordinates.current[0], mouseLeftCoordinates.current[1]],
+      ];
+
+      if (pointInTriangle(currentMouseCoordinates, virtualTriangleCoordinates)) {
+        shouldComputeSubMenuOpenLogic = false;
+        if (mouseIdleTimer.current) {
+          clearTimeout(mouseIdleTimer.current);
+        }
+
+        // if mouse is inside triangle and yet hasn't moved, we need to compute submenu logic after a delay
+        mouseIdleTimer.current = window.setTimeout(() => {
+          computeSubMenuLogic();
+        }, 50);
+      } else {
+        shouldComputeSubMenuOpenLogic = true;
+      }
+    }
+
+    if (shouldComputeSubMenuOpenLogic) {
+      if (mouseIdleTimer.current) {
+        clearTimeout(mouseIdleTimer.current);
+      }
+      computeSubMenuLogic();
+    }
+  };
+
+  const handleMouseLeave = (
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    option: Option,
+    optIndex: number,
+  ) => {
+    mouseLeftCoordinates.current = [event.clientX, -event.clientY];
+
+    if (mouseIdleTimer.current) {
+      clearTimeout(mouseIdleTimer.current);
+    }
+    mouseEntered.current[getId(option, optIndex)] = false;
+  };
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLLIElement>,
+    option: Option,
+  ) => {
+    if (option.nestedOptions) {
+      if (event.key === 'ArrowRight' || event.key === 'Enter') {
+        handleOpen(event, option.menuLevel + 1, option.nestedOptions);
+      }
+    }
+    if (event.key === 'ArrowLeft' && option.menuLevel > 0) {
+      handleClose(option.menuLevel);
+      anchors.elements[option.menuLevel]?.focus();
+    }
+
+    if (event.key === 'Escape') {
+      handleClose(0);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <Button
+        ref={buttonRef}
+        onClick={(event) => {
+          handleOpen(event);
+        }}
+        {...menuButtonProps}
+      >
+        { menuButtonChildren ?? 'Menu' }
+      </Button>
+
+      {anchors.elements.map((anchorElement, index) => (anchorElement ? (
+        <Popper
+          open={Boolean(anchorElement)}
+          anchorEl={anchorElement}
+          key={`${anchorElement.innerText} menu`}
+          role={undefined}
+          placement={index > 0 ? 'right-start' : 'bottom-start'}
+          transition
+        >
+          {({ TransitionProps }) => (
+            <Grow
+              {...(TransitionProps || {})}
+              style={{
+                transformOrigin: 'left top',
+              }}
+            >
+              <Paper>
+                <ClickAwayListener onClickAway={handleClickAway}>
+                  <MenuList
+                    autoFocusItem={Boolean(anchorElement)}
+                    id={`nested-menu-${index}`}
+                    aria-labelledby="nested-button"
+                  >
+                    {(anchors.options[index] ?? []).map((option, optIndex) => (
+                      <MenuItem
+                        key={option.value}
+                        selected={!!option.selected}
+                        aria-haspopup={!!(option.nestedOptions ?? undefined)}
+                        aria-expanded={
+                            option.nestedOptions
+                              ? anchors.elements.some(
+                                (element) => element?.innerText === option.value,
+                              )
+                              : undefined
+                          }
+                        onClick={() => handleClickOption(option)}
+                        onMouseMove={(event) => handleMouseMove(event, option, optIndex) }
+                        onMouseLeave={(event) => handleMouseLeave(event, option, optIndex) }
+                        onKeyDown={(event) => handleKeyDown(event, option)}
+                      >
+                        <Box
+                          sx={{
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                            alignItems: 'center',
+                          }}
+                        >
+                          <Typography>{option.label ?? option.value}</Typography>
+                          {option.nestedOptions ? (
+                            <ChevronRight fontSize="small" />
+                          ) : null}
+                        </Box>
+                      </MenuItem>
+                    ))}
+                  </MenuList>
+                </ClickAwayListener>
+              </Paper>
+            </Grow>
+          )}
+        </Popper>
+      ) : null))}
+    </React.Fragment>
+  );
+};
+
+export default NestedMenuButton;
diff --git a/opencti-platform/opencti-front/src/private/components/Search.tsx b/opencti-platform/opencti-front/src/private/components/Search.tsx
index ccf6b5646a0f..98f7ccf89499 100644
--- a/opencti-platform/opencti-front/src/private/components/Search.tsx
+++ b/opencti-platform/opencti-front/src/private/components/Search.tsx
@@ -281,6 +281,7 @@ const Search = () => {
           lineFragment={searchLineFragment}
           preloadedPaginationProps={preloadedPaginationOptions}
           availableEntityTypes={['Stix-Core-Object']}
+          entityTypes={['Stix-Core-Object']}
         />
       )}
     </>
diff --git a/opencti-platform/opencti-front/src/private/components/analyses/Reports.tsx b/opencti-platform/opencti-front/src/private/components/analyses/Reports.tsx
index 0b550c278313..99e174893390 100644
--- a/opencti-platform/opencti-front/src/private/components/analyses/Reports.tsx
+++ b/opencti-platform/opencti-front/src/private/components/analyses/Reports.tsx
@@ -182,7 +182,6 @@ const Reports: FunctionComponent = () => {
   const isRuntimeSort = isRuntimeFieldEnable() ?? false;
   const dataColumns: DataTableProps['dataColumns'] = {
     name: {
-      label: 'Title',
       percentWidth: 25,
       isSortable: true,
     },
diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/Malwares.tsx b/opencti-platform/opencti-front/src/private/components/arsenal/Malwares.tsx
index db9ca5e1f73d..11c49849e374 100644
--- a/opencti-platform/opencti-front/src/private/components/arsenal/Malwares.tsx
+++ b/opencti-platform/opencti-front/src/private/components/arsenal/Malwares.tsx
@@ -168,7 +168,7 @@ const Malwares = () => {
                   <ViewModuleOutlined fontSize="small" color="primary" />
                 </Tooltip>
               </ToggleButton>),
-              (<ToggleButton key="cards" value="lines" aria-label="lines">
+              (<ToggleButton key="lines" value="lines" aria-label="lines">
                 <Tooltip title={t_i18n('Lines view')}>
                   <ViewListOutlined color="primary" fontSize="small" />
                 </Tooltip>
diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/channels/ChannelEdition.jsx b/opencti-platform/opencti-front/src/private/components/arsenal/channels/ChannelEdition.jsx
index fb211f19e9e6..082634fd70af 100644
--- a/opencti-platform/opencti-front/src/private/components/arsenal/channels/ChannelEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/arsenal/channels/ChannelEdition.jsx
@@ -54,7 +54,7 @@ class ChannelEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/tools/ToolEdition.jsx b/opencti-platform/opencti-front/src/private/components/arsenal/tools/ToolEdition.jsx
index bca09c5e5234..ae93abb7ef60 100644
--- a/opencti-platform/opencti-front/src/private/components/arsenal/tools/ToolEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/arsenal/tools/ToolEdition.jsx
@@ -42,7 +42,7 @@ class ToolEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/vulnerabilities/VulnerabilityDetails.jsx b/opencti-platform/opencti-front/src/private/components/arsenal/vulnerabilities/VulnerabilityDetails.jsx
index 5a184e5043a1..a79612f64bc6 100644
--- a/opencti-platform/opencti-front/src/private/components/arsenal/vulnerabilities/VulnerabilityDetails.jsx
+++ b/opencti-platform/opencti-front/src/private/components/arsenal/vulnerabilities/VulnerabilityDetails.jsx
@@ -12,6 +12,7 @@ import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
 import { emptyFilled } from '../../../../utils/String';
 import ItemBoolean from '../../../../components/ItemBoolean';
 import FieldOrEmpty from '../../../../components/FieldOrEmpty';
+import ItemSeverity from '../../../../components/ItemSeverity';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -93,29 +94,6 @@ const VulnerabilityDetailsComponent = ({ vulnerability }) => {
     );
   };
 
-  const getChipStyleFromCVSS3Severity = (severity) => {
-    switch (severity) {
-      case 'LOW': return inlineStyles.green;
-      case 'MEDIUM': return inlineStyles.orange;
-      case 'HIGH': return inlineStyles.red;
-      case 'CRITICAL': return inlineStyles.black;
-      default: return {};
-    }
-  };
-
-  const renderSeverity = (severity) => {
-    if (!severity) return '-';
-
-    const chipStyle = getChipStyleFromCVSS3Severity(severity);
-    return (
-      <Chip
-        classes={{ root: classes.chip }}
-        style={chipStyle}
-        label={severity}
-      />
-    );
-  };
-
   const renderKevContent = () => (
     <FieldOrEmpty source={vulnerability.x_opencti_cisa_kev}>
       <ItemBoolean
@@ -155,7 +133,10 @@ const VulnerabilityDetailsComponent = ({ vulnerability }) => {
             >
               {t_i18n('CVSS3 - Severity')}
             </Typography>
-            {renderSeverity(vulnerability.x_opencti_cvss_base_severity)}
+            <ItemSeverity
+              severity={vulnerability.x_opencti_cvss_base_severity}
+              label={vulnerability.x_opencti_cvss_base_severity || t_i18n('Unknown')}
+            />
           </Grid>
         </Grid>
         <Grid container={true} spacing={3}>
diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/vulnerabilities/VulnerabilityEdition.jsx b/opencti-platform/opencti-front/src/private/components/arsenal/vulnerabilities/VulnerabilityEdition.jsx
index 3ef9510b731f..521b000f6a7b 100644
--- a/opencti-platform/opencti-front/src/private/components/arsenal/vulnerabilities/VulnerabilityEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/arsenal/vulnerabilities/VulnerabilityEdition.jsx
@@ -42,7 +42,7 @@ class VulnerabilityEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/cases/case_incidents/CaseIncident.tsx b/opencti-platform/opencti-front/src/private/components/cases/case_incidents/CaseIncident.tsx
index cf069904a8e8..cd64ccaac28f 100644
--- a/opencti-platform/opencti-front/src/private/components/cases/case_incidents/CaseIncident.tsx
+++ b/opencti-platform/opencti-front/src/private/components/cases/case_incidents/CaseIncident.tsx
@@ -1,36 +1,88 @@
 import Grid from '@mui/material/Grid';
-import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useRef } from 'react';
 import { useFragment } from 'react-relay';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import useHelper from 'src/utils/hooks/useHelper';
 import { CaseUtils_case$key } from '@components/cases/__generated__/CaseUtils_case.graphql';
 import { useFormatter } from '../../../../components/i18n';
 import { convertMarkings } from '../../../../utils/edition';
 import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
+import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
 import Security from '../../../../utils/Security';
 import StixCoreObjectExternalReferences from '../../analyses/external_references/StixCoreObjectExternalReferences';
 import StixCoreObjectOrStixCoreRelationshipNotes from '../../analyses/notes/StixCoreObjectOrStixCoreRelationshipNotes';
 import ContainerStixObjectsOrStixRelationships from '../../common/containers/ContainerStixObjectsOrStixRelationships';
 import StixCoreObjectLatestHistory from '../../common/stix_core_objects/StixCoreObjectLatestHistory';
 import StixDomainObjectOverview from '../../common/stix_domain_objects/StixDomainObjectOverview';
-import CaseTasksLines from '../tasks/CaseTasksLines';
+import { CaseTasksLinesQuery, CaseTasksLinesQuery$variables } from '../tasks/__generated__/CaseTasksLinesQuery.graphql';
+import CaseTasksLines, { caseTasksLinesQuery } from '../tasks/CaseTasksLines';
 import { caseFragment } from '../CaseUtils';
 import CaseIncidentDetails from './CaseIncidentDetails';
 import CaseIncidentEdition from './CaseIncidentEdition';
-import useHelper from '../../../../utils/hooks/useHelper';
+import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
+import { tasksDataColumns } from '../tasks/TasksLine';
+import ListLines from '../../../../components/list_lines/ListLines';
+import { CaseTasksLineDummy } from '../tasks/CaseTasksLine';
+import { isFilterGroupNotEmpty, useRemoveIdAndIncorrectKeysFromFilterGroupObject } from '../../../../utils/filters/filtersUtils';
+import { FilterGroup } from '../../../../utils/filters/filtersHelpers-types';
 import { useGetCurrentUserAccessRight } from '../../../../utils/authorizedMembers';
 import useOverviewLayoutCustomization from '../../../../utils/hooks/useOverviewLayoutCustomization';
 
+// Deprecated - https://mui.com/system/styles/basics/
+// Do not use it for new code.
+const useStyles = makeStyles(() => ({
+  paper: {
+    margin: '10px 0 0 0',
+    padding: 0,
+    borderRadius: 4,
+  },
+}));
+
 interface CaseIncidentProps {
   caseIncidentData: CaseUtils_case$key;
   enableReferences: boolean;
 }
 
 const CaseIncident: React.FC<CaseIncidentProps> = ({ caseIncidentData, enableReferences }) => {
+  const classes = useStyles();
   const { t_i18n } = useFormatter();
+  const ref = useRef(null);
   const caseIncident = useFragment(caseFragment, caseIncidentData);
   const { isFeatureEnable } = useHelper();
   const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
   const { canEdit } = useGetCurrentUserAccessRight(caseIncident.currentUserAccessRight);
 
+  const LOCAL_STORAGE_KEY_CASE_TASKS = `cases-${caseIncident.id}-caseTask`;
+
+  const { viewStorage, helpers, paginationOptions } = usePaginationLocalStorage<CaseTasksLinesQuery$variables>(
+    LOCAL_STORAGE_KEY_CASE_TASKS,
+    {
+      searchTerm: '',
+      sortBy: 'created',
+      orderAsc: false,
+    },
+  );
+  const { sortBy, orderAsc, filters } = viewStorage;
+  const userFilters = useRemoveIdAndIncorrectKeysFromFilterGroupObject(filters, ['Case-Incident']);
+  const contextTaskFilters: FilterGroup = {
+    mode: 'and',
+    filters: [
+      { key: 'entity_type', operator: 'eq', mode: 'or', values: ['Task'] },
+      { key: 'objects', operator: 'eq', mode: 'or', values: [caseIncident.id] },
+    ],
+    filterGroups: userFilters && isFilterGroupNotEmpty(userFilters) ? [userFilters] : [],
+  };
+  const queryTaskPaginationOptions = {
+    ...paginationOptions,
+    filters: contextTaskFilters,
+  } as unknown as CaseTasksLinesQuery$variables;
+  const queryRef = useQueryLoading<CaseTasksLinesQuery>(
+    caseTasksLinesQuery,
+    queryTaskPaginationOptions,
+  );
+
   const caseIncidentResponseOverviewLayoutCustomization = useOverviewLayoutCustomization(caseIncident.entity_type);
 
   return (
@@ -61,12 +113,50 @@ const CaseIncident: React.FC<CaseIncidentProps> = ({ caseIncidentData, enableRef
                 );
               case 'task':
                 return (
-                  <Grid key={key} item xs={width}>
-                    <CaseTasksLines
-                      caseId={caseIncident.id}
-                      defaultMarkings={convertMarkings(caseIncident)}
-                      enableReferences={enableReferences}
-                    />
+                  <Grid key={key} item xs={width} ref={ref}>
+                    {queryRef && (
+                      <React.Suspense
+                        fallback={
+                          <div style={{ height: '100%' }}>
+                            <Typography
+                              variant="h4"
+                              gutterBottom={true}
+                              style={{ marginBottom: 10 }}
+                            >
+                              {t_i18n('Tasks')}
+                            </Typography>
+                            <Paper classes={{ root: classes.paper }} variant="outlined">
+                              <ListLines
+                                sortBy={sortBy}
+                                orderAsc={orderAsc}
+                                handleSort={helpers.handleSort}
+                                dataColumns={tasksDataColumns}
+                                inline={true}
+                                secondaryAction={true}
+                              >
+                                {Array(20)
+                                  .fill(0)
+                                  .map((_, idx) => (
+                                    <CaseTasksLineDummy key={idx} />
+                                  ))}
+                              </ListLines>
+                            </Paper>
+                          </div>
+                        }
+                      >
+                        <CaseTasksLines
+                          queryRef={queryRef}
+                          paginationOptions={queryTaskPaginationOptions}
+                          caseId={caseIncident.id}
+                          sortBy={sortBy}
+                          orderAsc={orderAsc}
+                          handleSort={helpers.handleSort}
+                          defaultMarkings={convertMarkings(caseIncident)}
+                          containerRef={ref}
+                          enableReferences={enableReferences}
+                        />
+                      </React.Suspense>
+                    )}
                   </Grid>
                 );
               case 'originOfTheCase':
diff --git a/opencti-platform/opencti-front/src/private/components/cases/case_rfis/CaseRfi.tsx b/opencti-platform/opencti-front/src/private/components/cases/case_rfis/CaseRfi.tsx
index f59b9a1659aa..ad7b279789f2 100644
--- a/opencti-platform/opencti-front/src/private/components/cases/case_rfis/CaseRfi.tsx
+++ b/opencti-platform/opencti-front/src/private/components/cases/case_rfis/CaseRfi.tsx
@@ -1,8 +1,13 @@
 import Grid from '@mui/material/Grid';
-import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useRef } from 'react';
 import { useFragment } from 'react-relay';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import useHelper from 'src/utils/hooks/useHelper';
 import { convertMarkings } from '../../../../utils/edition';
 import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
+import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
 import Security from '../../../../utils/Security';
 import StixCoreObjectExternalReferences from '../../analyses/external_references/StixCoreObjectExternalReferences';
 import StixCoreObjectOrStixCoreRelationshipNotes from '../../analyses/notes/StixCoreObjectOrStixCoreRelationshipNotes';
@@ -10,14 +15,29 @@ import ContainerStixObjectsOrStixRelationships from '../../common/containers/Con
 import StixCoreObjectLatestHistory from '../../common/stix_core_objects/StixCoreObjectLatestHistory';
 import StixDomainObjectOverview from '../../common/stix_domain_objects/StixDomainObjectOverview';
 import { CaseUtils_case$key } from '../__generated__/CaseUtils_case.graphql';
-import CaseTasksLines from '../tasks/CaseTasksLines';
+import CaseTasksLines, { caseTasksLinesQuery } from '../tasks/CaseTasksLines';
 import { caseFragment } from '../CaseUtils';
 import CaseRfiDetails from './CaseRfiDetails';
 import CaseRfiEdition from './CaseRfiEdition';
 import { useFormatter } from '../../../../components/i18n';
-import useHelper from '../../../../utils/hooks/useHelper';
+import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
+import { CaseTasksLinesQuery, CaseTasksLinesQuery$variables } from '../tasks/__generated__/CaseTasksLinesQuery.graphql';
+import ListLines from '../../../../components/list_lines/ListLines';
+import { tasksDataColumns } from '../tasks/TasksLine';
+import { CaseTasksLineDummy } from '../tasks/CaseTasksLine';
+import { isFilterGroupNotEmpty, useRemoveIdAndIncorrectKeysFromFilterGroupObject } from '../../../../utils/filters/filtersUtils';
+import { FilterGroup } from '../../../../utils/filters/filtersHelpers-types';
 import useOverviewLayoutCustomization from '../../../../utils/hooks/useOverviewLayoutCustomization';
-import { useGetCurrentUserAccessRight } from '../../../../utils/authorizedMembers';
+
+// Deprecated - https://mui.com/system/styles/basics/
+// Do not use it for new code.
+const useStyles = makeStyles(() => ({
+  paper: {
+    margin: '10px 0 0 0',
+    padding: 0,
+    borderRadius: 4,
+  },
+}));
 
 interface CaseRfiProps {
   caseRfiData: CaseUtils_case$key;
@@ -25,17 +45,47 @@ interface CaseRfiProps {
 }
 
 const CaseRfi: React.FC<CaseRfiProps> = ({ caseRfiData, enableReferences }) => {
+  const classes = useStyles();
   const { t_i18n } = useFormatter();
+  const ref = useRef(null);
   const caseRfi = useFragment(caseFragment, caseRfiData);
   const { isFeatureEnable } = useHelper();
   const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
-  const { canEdit } = useGetCurrentUserAccessRight(caseRfi.currentUserAccessRight);
   const overviewLayoutCustomization = useOverviewLayoutCustomization(caseRfi.entity_type);
 
+  const LOCAL_STORAGE_KEY = `cases-${caseRfi.id}-caseTask`;
+  const { viewStorage, helpers, paginationOptions } = usePaginationLocalStorage<CaseTasksLinesQuery$variables>(
+    LOCAL_STORAGE_KEY,
+    {
+      searchTerm: '',
+      sortBy: 'name',
+      orderAsc: true,
+    },
+  );
+  const { sortBy, orderAsc, filters } = viewStorage;
+
+  const userFilters = useRemoveIdAndIncorrectKeysFromFilterGroupObject(filters, ['Case-Rfi']);
+  const contextTaskFilters: FilterGroup = {
+    mode: 'and',
+    filters: [
+      { key: 'entity_type', operator: 'eq', mode: 'or', values: ['Task'] },
+      { key: 'objects', operator: 'eq', mode: 'or', values: [caseRfi.id] },
+    ],
+    filterGroups: userFilters && isFilterGroupNotEmpty(userFilters) ? [userFilters] : [],
+  };
+
+  const queryTaskPaginationOptions = {
+    ...paginationOptions,
+    filters: contextTaskFilters,
+  } as unknown as CaseTasksLinesQuery$variables;
+  const queryRef = useQueryLoading<CaseTasksLinesQuery>(
+    caseTasksLinesQuery,
+    queryTaskPaginationOptions,
+  );
   return (
     <>
       <Grid
-        container
+        container={true}
         spacing={3}
         style={{ marginBottom: 20 }}
       >
@@ -60,12 +110,51 @@ const CaseRfi: React.FC<CaseRfiProps> = ({ caseRfiData, enableReferences }) => {
                 );
               case 'task':
                 return (
-                  <Grid key={key} item xs={width}>
-                    <CaseTasksLines
-                      caseId={caseRfi.id}
-                      defaultMarkings={convertMarkings(caseRfi)}
-                      enableReferences={enableReferences}
-                    />
+                  <Grid key={key} item xs={width} ref={ref}>
+                    {queryRef && (
+                      <React.Suspense
+                        fallback={
+                          <div style={{ height: '100%' }}>
+                            <Typography
+                              variant="h4"
+                              gutterBottom={true}
+                              style={{ marginBottom: 10 }}
+                            >
+                              {t_i18n('Tasks')}
+                            </Typography>
+                            <Paper classes={{ root: classes.paper }} variant="outlined">
+                              <ListLines
+                                helpers={helpers}
+                                sortBy={sortBy}
+                                orderAsc={orderAsc}
+                                handleSort={helpers.handleSort}
+                                dataColumns={tasksDataColumns}
+                                inline={true}
+                                secondaryAction={true}
+                              >
+                                {Array(20)
+                                  .fill(0)
+                                  .map((_, idx) => (
+                                    <CaseTasksLineDummy key={idx} />
+                                  ))}
+                              </ListLines>
+                            </Paper>
+                          </div>
+                        }
+                      >
+                        <CaseTasksLines
+                          queryRef={queryRef}
+                          paginationOptions={queryTaskPaginationOptions}
+                          caseId={caseRfi.id}
+                          sortBy={sortBy}
+                          orderAsc={orderAsc}
+                          handleSort={helpers.handleSort}
+                          defaultMarkings={convertMarkings(caseRfi)}
+                          containerRef={ref}
+                          enableReferences={enableReferences}
+                        />
+                      </React.Suspense>
+                    )}
                   </Grid>
                 );
               case 'originOfTheCase':
@@ -134,7 +223,7 @@ const CaseRfi: React.FC<CaseRfiProps> = ({ caseRfiData, enableReferences }) => {
         }
       </Grid>
       {!isFABReplaced && (
-        <Security needs={[KNOWLEDGE_KNUPDATE]} hasAccess={canEdit}>
+        <Security needs={[KNOWLEDGE_KNUPDATE]}>
           <CaseRfiEdition caseId={caseRfi.id} />
         </Security>
       )}
diff --git a/opencti-platform/opencti-front/src/private/components/cases/case_rfts/CaseRft.tsx b/opencti-platform/opencti-front/src/private/components/cases/case_rfts/CaseRft.tsx
index 43712f961ec7..7531b70f4580 100644
--- a/opencti-platform/opencti-front/src/private/components/cases/case_rfts/CaseRft.tsx
+++ b/opencti-platform/opencti-front/src/private/components/cases/case_rfts/CaseRft.tsx
@@ -1,23 +1,43 @@
 import Grid from '@mui/material/Grid';
-import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useRef } from 'react';
 import { useFragment } from 'react-relay';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import useHelper from 'src/utils/hooks/useHelper';
 import { convertMarkings } from '../../../../utils/edition';
 import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
+import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
 import Security from '../../../../utils/Security';
 import StixCoreObjectExternalReferences from '../../analyses/external_references/StixCoreObjectExternalReferences';
 import StixCoreObjectOrStixCoreRelationshipNotes from '../../analyses/notes/StixCoreObjectOrStixCoreRelationshipNotes';
 import ContainerStixObjectsOrStixRelationships from '../../common/containers/ContainerStixObjectsOrStixRelationships';
 import StixCoreObjectLatestHistory from '../../common/stix_core_objects/StixCoreObjectLatestHistory';
 import StixDomainObjectOverview from '../../common/stix_domain_objects/StixDomainObjectOverview';
+import { CaseTasksLinesQuery, CaseTasksLinesQuery$variables } from '../tasks/__generated__/CaseTasksLinesQuery.graphql';
 import { CaseUtils_case$key } from '../__generated__/CaseUtils_case.graphql';
-import CaseTasksLines from '../tasks/CaseTasksLines';
+import CaseTasksLines, { caseTasksLinesQuery } from '../tasks/CaseTasksLines';
 import { caseFragment } from '../CaseUtils';
 import CaseRftDetails from './CaseRftDetails';
 import CaseRftEdition from './CaseRftEdition';
 import { useFormatter } from '../../../../components/i18n';
-import useHelper from '../../../../utils/hooks/useHelper';
+import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
+import ListLines from '../../../../components/list_lines/ListLines';
+import { tasksDataColumns } from '../tasks/TasksLine';
+import { CaseTasksLineDummy } from '../tasks/CaseTasksLine';
+import { isFilterGroupNotEmpty, useRemoveIdAndIncorrectKeysFromFilterGroupObject } from '../../../../utils/filters/filtersUtils';
+import { FilterGroup } from '../../../../utils/filters/filtersHelpers-types';
 import useOverviewLayoutCustomization from '../../../../utils/hooks/useOverviewLayoutCustomization';
-import { useGetCurrentUserAccessRight } from '../../../../utils/authorizedMembers';
+
+// Deprecated - https://mui.com/system/styles/basics/
+// Do not use it for new code.
+const useStyles = makeStyles(() => ({
+  paper: {
+    margin: '10px 0 0 0',
+    padding: 0,
+    borderRadius: 4,
+  },
+}));
 
 interface CaseRftProps {
   caseRftData: CaseUtils_case$key;
@@ -25,17 +45,45 @@ interface CaseRftProps {
 }
 
 const CaseRft: React.FC<CaseRftProps> = ({ caseRftData, enableReferences }) => {
+  const classes = useStyles();
   const { t_i18n } = useFormatter();
   const { isFeatureEnable } = useHelper();
   const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
+  const ref = useRef(null);
   const caseRft = useFragment(caseFragment, caseRftData);
   const overviewLayoutCustomization = useOverviewLayoutCustomization(caseRft.entity_type);
-  const { canEdit } = useGetCurrentUserAccessRight(caseRft.currentUserAccessRight);
+  const LOCAL_STORAGE_KEY_CASE_TASKS = `cases-${caseRft.id}-caseTask`;
+  const { viewStorage, helpers, paginationOptions } = usePaginationLocalStorage<CaseTasksLinesQuery$variables>(
+    LOCAL_STORAGE_KEY_CASE_TASKS,
+    {
+      searchTerm: '',
+      sortBy: 'name',
+      orderAsc: true,
+    },
+  );
+  const { sortBy, orderAsc, filters } = viewStorage;
 
+  const userFilters = useRemoveIdAndIncorrectKeysFromFilterGroupObject(filters, ['Case-Rft']);
+  const contextTaskFilters: FilterGroup = {
+    mode: 'and',
+    filters: [
+      { key: 'entity_type', operator: 'eq', mode: 'or', values: ['Task'] },
+      { key: 'objects', operator: 'eq', mode: 'or', values: [caseRft.id] },
+    ],
+    filterGroups: userFilters && isFilterGroupNotEmpty(userFilters) ? [userFilters] : [],
+  };
+  const queryTaskPaginationOptions = {
+    ...paginationOptions,
+    filters: contextTaskFilters,
+  } as unknown as CaseTasksLinesQuery$variables;
+  const queryRef = useQueryLoading<CaseTasksLinesQuery>(
+    caseTasksLinesQuery,
+    queryTaskPaginationOptions,
+  );
   return (
     <>
       <Grid
-        container
+        container={true}
         spacing={3}
         style={{ marginBottom: 20 }}
       >
@@ -60,12 +108,51 @@ const CaseRft: React.FC<CaseRftProps> = ({ caseRftData, enableReferences }) => {
                 );
               case 'task':
                 return (
-                  <Grid key={key} item xs={width}>
-                    <CaseTasksLines
-                      caseId={caseRft.id}
-                      defaultMarkings={convertMarkings(caseRft)}
-                      enableReferences={enableReferences}
-                    />
+                  <Grid key={key} item xs={width} ref={ref}>
+                    {queryRef && (
+                      <React.Suspense
+                        fallback={
+                          <div style={{ height: '100%' }}>
+                            <Typography
+                              variant="h4"
+                              gutterBottom={true}
+                              style={{ marginBottom: 10 }}
+                            >
+                              {t_i18n('Tasks')}
+                            </Typography>
+                            <Paper classes={{ root: classes.paper }} variant="outlined">
+                              <ListLines
+                                helpers={helpers}
+                                sortBy={sortBy}
+                                orderAsc={orderAsc}
+                                handleSort={helpers.handleSort}
+                                dataColumns={tasksDataColumns}
+                                inline={true}
+                                secondaryAction={true}
+                              >
+                                {Array(20)
+                                  .fill(0)
+                                  .map((_, idx) => (
+                                    <CaseTasksLineDummy key={idx} />
+                                  ))}
+                              </ListLines>
+                            </Paper>
+                          </div>
+                        }
+                      >
+                        <CaseTasksLines
+                          queryRef={queryRef}
+                          paginationOptions={queryTaskPaginationOptions}
+                          caseId={caseRft.id}
+                          sortBy={sortBy}
+                          orderAsc={orderAsc}
+                          handleSort={helpers.handleSort}
+                          defaultMarkings={convertMarkings(caseRft)}
+                          containerRef={ref}
+                          enableReferences={enableReferences}
+                        />
+                      </React.Suspense>
+                    )}
                   </Grid>
                 );
               case 'originOfTheCase':
@@ -134,7 +221,7 @@ const CaseRft: React.FC<CaseRftProps> = ({ caseRftData, enableReferences }) => {
         }
       </Grid>
       {!isFABReplaced && (
-        <Security needs={[KNOWLEDGE_KNUPDATE]} hasAccess={canEdit}>
+        <Security needs={[KNOWLEDGE_KNUPDATE]}>
           <CaseRftEdition caseId={caseRft.id} />
         </Security>
       )}
diff --git a/opencti-platform/opencti-front/src/private/components/cases/tasks/CaseTasksLine.tsx b/opencti-platform/opencti-front/src/private/components/cases/tasks/CaseTasksLine.tsx
new file mode 100644
index 000000000000..31a169fb35db
--- /dev/null
+++ b/opencti-platform/opencti-front/src/private/components/cases/tasks/CaseTasksLine.tsx
@@ -0,0 +1,191 @@
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import makeStyles from '@mui/styles/makeStyles';
+import React, { FunctionComponent, useState } from 'react';
+import { graphql, useFragment } from 'react-relay';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
+import Skeleton from '@mui/material/Skeleton';
+import IconButton from '@mui/material/IconButton';
+import MoreVert from '@mui/icons-material/MoreVert';
+import Drawer from '@components/common/drawer/Drawer';
+import CaseTaskOverview from '@components/cases/tasks/CaseTaskOverview';
+import { NorthEastOutlined } from '@mui/icons-material';
+import { Link } from 'react-router-dom';
+import ItemIcon from '../../../../components/ItemIcon';
+import type { Theme } from '../../../../components/Theme';
+import { tasksDataColumns } from './TasksLine';
+import { useFormatter } from '../../../../components/i18n';
+import { CaseTasksLine_data$key } from './__generated__/CaseTasksLine_data.graphql';
+import TaskPopover from './TaskPopover';
+import { CaseTasksLinesQuery$variables } from './__generated__/CaseTasksLinesQuery.graphql';
+
+// Deprecated - https://mui.com/system/styles/basics/
+// Do not use it for new code.
+const useStyles = makeStyles<Theme>((theme) => ({
+  item: {
+    paddingLeft: 15,
+    height: 50,
+  },
+  itemIcon: {
+    color: theme.palette.primary.main,
+    minWidth: 52,
+  },
+  bodyItem: {
+    height: 20,
+    fontSize: 13,
+    float: 'left',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    paddingRight: 10,
+  },
+}));
+
+const CaseTaskFragment = graphql`
+  fragment CaseTasksLine_data on Task {
+    id
+    standard_id
+    name
+    due_date
+    description
+    workflowEnabled
+    objectMarking {
+      definition
+      definition_type
+      id
+    }
+    objectLabel {
+      id
+      value
+      color
+    }
+    objectAssignee {
+      entity_type
+      id
+      name
+    }
+    status {
+      template {
+        name
+        color
+      }
+    }
+    ...CaseTaskOverview_task
+  }
+`;
+
+interface CaseTasksLineProps {
+  node: CaseTasksLine_data$key;
+  entityId?: string;
+  paginationOptions: CaseTasksLinesQuery$variables;
+  enableReferences: boolean;
+}
+
+export const CaseTasksLine: FunctionComponent<CaseTasksLineProps> = ({
+  node,
+  entityId,
+  paginationOptions,
+  enableReferences,
+}) => {
+  const classes = useStyles();
+  const { fld } = useFormatter();
+  const task = useFragment(CaseTaskFragment, node);
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <ListItem
+        classes={{ root: classes.item }}
+        divider={true}
+        button={true}
+        onClick={() => setOpen(true)}
+      >
+        <ListItemIcon classes={{ root: classes.itemIcon }}>
+          <ItemIcon type="Task" />
+        </ListItemIcon>
+        <ListItemText
+          primary={
+            <>
+              {Object.values(tasksDataColumns).map((value) => (
+                <div
+                  key={value.label}
+                  className={classes.bodyItem}
+                  style={{ width: value.width }}
+                >
+                  {value.render?.(task, { fld, classes })}
+                </div>
+              ))}
+            </>
+          }
+        />
+        <ListItemSecondaryAction>
+          <TaskPopover
+            id={task.id}
+            objectId={entityId}
+            paginationOptions={paginationOptions}
+            variant="inLine"
+          />
+        </ListItemSecondaryAction>
+      </ListItem>
+      <Drawer
+        open={open}
+        title={task.name}
+        onClose={() => setOpen(false)}
+        header={
+          <IconButton
+            aria-label="Go to"
+            size="small"
+            component={Link}
+            to={`/dashboard/cases/tasks/${task.id}`}
+            style={{ position: 'absolute', right: 10 }}
+          >
+            <NorthEastOutlined />
+          </IconButton>
+        }
+      >
+        <CaseTaskOverview tasksData={task} enableReferences={enableReferences} />
+      </Drawer>
+    </>
+  );
+};
+
+export const CaseTasksLineDummy = () => {
+  const classes = useStyles();
+  return (
+    <ListItem classes={{ root: classes.item }} divider={true}>
+      <ListItemIcon classes={{ root: classes.itemIcon }}>
+        <Skeleton animation="wave" variant="circular" width={30} height={30} />
+      </ListItemIcon>
+      <ListItemText
+        primary={
+          <div>
+            {Object.values(tasksDataColumns).map((value) => (
+              <div
+                key={value.label}
+                className={classes.bodyItem}
+                style={{ width: value.width }}
+              >
+                <Skeleton
+                  animation="wave"
+                  variant="rectangular"
+                  width="90%"
+                  height="100%"
+                />
+              </div>
+            ))}
+          </div>
+        }
+      />
+      <ListItemSecondaryAction>
+        <IconButton
+          disabled={true}
+          aria-haspopup="true"
+          style={{ marginTop: 3 }}
+          size="large"
+        >
+          <MoreVert />
+        </IconButton>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+};
diff --git a/opencti-platform/opencti-front/src/private/components/cases/tasks/CaseTasksLines.tsx b/opencti-platform/opencti-front/src/private/components/cases/tasks/CaseTasksLines.tsx
index b1b907890ee3..733332bb1ad1 100644
--- a/opencti-platform/opencti-front/src/private/components/cases/tasks/CaseTasksLines.tsx
+++ b/opencti-platform/opencti-front/src/private/components/cases/tasks/CaseTasksLines.tsx
@@ -1,4 +1,4 @@
-import { AddOutlined, ContentPasteGoOutlined, NorthEastOutlined } from '@mui/icons-material';
+import { AddOutlined, ContentPasteGoOutlined } from '@mui/icons-material';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
@@ -9,39 +9,34 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 import { Form, Formik } from 'formik';
-import React, { FunctionComponent, useRef, useState } from 'react';
-import { graphql } from 'react-relay';
+import React, { FunctionComponent, MutableRefObject, useState } from 'react';
+import { graphql, PreloadedQuery } from 'react-relay';
+import { GridTypeMap } from '@mui/material';
 import Drawer from '@components/common/drawer/Drawer';
-import { TasksLine_node$data } from '@components/cases/tasks/__generated__/TasksLine_node.graphql';
-import { CaseTasksLines_data$data } from '@components/cases/tasks/__generated__/CaseTasksLines_data.graphql';
-import CaseTaskOverview from '@components/cases/tasks/CaseTaskOverview';
-import { Link } from 'react-router-dom';
-import { CaseTaskOverview_task$key } from '@components/cases/tasks/__generated__/CaseTaskOverview_task.graphql';
 import { useFormatter } from '../../../../components/i18n';
 import type { Theme } from '../../../../components/Theme';
 import { handleErrorInForm } from '../../../../relay/environment';
-import { UsePreloadedPaginationFragment } from '../../../../utils/hooks/usePreloadedPaginationFragment';
+import usePreloadedPaginationFragment from '../../../../utils/hooks/usePreloadedPaginationFragment';
 import CaseTemplateField from '../../common/form/CaseTemplateField';
 import { Option } from '../../common/form/ReferenceField';
 import CaseTaskCreation from './CaseTaskCreation';
-import { caseSetTemplateQuery, CaseTaskFragment, generateConnectionId } from '../CaseUtils';
+import { caseSetTemplateQuery, generateConnectionId } from '../CaseUtils';
+import ListLinesContent from '../../../../components/list_lines/ListLinesContent';
+import ListLines from '../../../../components/list_lines/ListLines';
+import { CaseTasksLine } from './CaseTasksLine';
+import { tasksDataColumns } from './TasksLine';
+import { CaseTasksLines_data$key } from './__generated__/CaseTasksLines_data.graphql';
 import { CaseTasksLinesQuery, CaseTasksLinesQuery$variables } from './__generated__/CaseTasksLinesQuery.graphql';
-import DataTable from '../../../../components/dataGrid/DataTable';
-import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
-import { isFilterGroupNotEmpty, useRemoveIdAndIncorrectKeysFromFilterGroupObject } from '../../../../utils/filters/filtersUtils';
-import { DataTableProps, DataTableVariant } from '../../../../components/dataGrid/dataTableTypes';
-import ItemDueDate from '../../../../components/ItemDueDate';
-import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
 import useApiMutation from '../../../../utils/hooks/useApiMutation';
-import { FilterGroup } from '../../../../utils/filters/filtersHelpers-types';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
 const useStyles = makeStyles<Theme>((theme) => ({
   paper: {
-    margin: '-4px 0 0 0',
+    margin: '-5px 0 0 0',
     padding: 0,
     borderRadius: 4,
+    overflowY: 'inherit',
   },
   createButton: {
     float: 'left',
@@ -67,7 +62,6 @@ export const caseTasksLinesQuery = graphql`
     $cursor: ID
     $orderBy: TasksOrdering
     $orderMode: OrderingMode
-    $search: String
   ) {
     ...CaseTasksLines_data
     @arguments(
@@ -76,7 +70,6 @@ export const caseTasksLinesQuery = graphql`
       cursor: $cursor
       orderBy: $orderBy
       orderMode: $orderMode
-      search: $search
     )
   }
 `;
@@ -89,7 +82,6 @@ const caseTasksLinesFragment = graphql`
     cursor: { type: "ID" }
     orderBy: { type: "TasksOrdering" }
     orderMode: { type: "OrderingMode", defaultValue: desc }
-    search: { type: "String" }
   )
   @refetchable(queryName: "TasksRefetch") {
     tasks(
@@ -98,101 +90,53 @@ const caseTasksLinesFragment = graphql`
       after: $cursor
       orderBy: $orderBy
       orderMode: $orderMode
-      search: $search
     ) @connection(key: "Pagination_tasks") {
       edges {
         node {
-          ...CaseUtilsTasksLine_data
-          ...CaseTaskOverview_task
+          ...CaseTasksLine_data
         }
       }
-      pageInfo {
-        globalCount
-      }
     }
   }
 `;
 
 interface CaseTasksLinesProps {
-  caseId: string
-  defaultMarkings?: Option[]
+  caseId: string;
+  queryRef: PreloadedQuery<CaseTasksLinesQuery>;
+  paginationOptions: CaseTasksLinesQuery$variables;
+  defaultMarkings?: Option[];
+  sortBy: string | undefined;
+  orderAsc: boolean | undefined;
+  handleSort?: (field: string, order: boolean) => void;
+  containerRef: MutableRefObject<GridTypeMap | null>;
   enableReferences: boolean;
 }
 
 const CaseTasksLines: FunctionComponent<CaseTasksLinesProps> = ({
   caseId,
+  queryRef,
+  paginationOptions,
   defaultMarkings,
+  sortBy,
+  orderAsc,
+  handleSort,
+  containerRef,
   enableReferences,
 }) => {
   const classes = useStyles();
   const { t_i18n } = useFormatter();
-
   const [open, setOpen] = useState(false);
   const [openCaseTemplate, setOpenCaseTemplate] = useState(false);
-
-  const [task, setTask] = useState<CaseTaskOverview_task$key & { name: string, id: string }>();
-
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
-
   const [commit] = useApiMutation(caseSetTemplateQuery);
-
-  const LOCAL_STORAGE_KEY_CASE_TASKS = `cases-${caseId}-caseTask`;
-  const initialValues = {
-    searchTerm: '',
-    sortBy: 'created',
-    orderAsc: false,
-  };
-  // TASKS
-  const { viewStorage: { filters }, helpers, paginationOptions } = usePaginationLocalStorage<CaseTasksLinesQuery$variables>(
-    LOCAL_STORAGE_KEY_CASE_TASKS,
-    initialValues,
-    true,
-  );
-  const userFilters = useRemoveIdAndIncorrectKeysFromFilterGroupObject(filters, ['Case']);
-  const contextTaskFilters: FilterGroup = {
-    mode: 'and',
-    filters: [
-      { key: 'entity_type', operator: 'eq', mode: 'or', values: ['Task'] },
-      { key: 'objects', operator: 'eq', mode: 'or', values: [caseId] },
-    ],
-    filterGroups: userFilters && isFilterGroupNotEmpty(userFilters) ? [userFilters] : [],
-  };
-
-  const queryTaskPaginationOptions = {
-    ...paginationOptions,
-    filters: contextTaskFilters,
-  } as unknown as CaseTasksLinesQuery$variables;
-
-  const queryRef = useQueryLoading<CaseTasksLinesQuery>(
-    caseTasksLinesQuery,
-    queryTaskPaginationOptions,
-  );
-
-  const preloadedPaginationProps = {
+  const { data } = usePreloadedPaginationFragment<CaseTasksLinesQuery,
+  CaseTasksLines_data$key>({
+    queryRef,
     linesQuery: caseTasksLinesQuery,
     linesFragment: caseTasksLinesFragment,
-    queryRef,
-    nodePath: ['tasks', 'pageInfo', 'globalCount'],
-    setNumberOfElements: helpers.handleSetNumberOfElements,
-  } as UsePreloadedPaginationFragment<CaseTasksLinesQuery>;
-
-  const dataColumns: DataTableProps['dataColumns'] = {
-    name: { percentWidth: 35 },
-    due_date: {
-      label: 'Due Date',
-      percentWidth: 15,
-      isSortable: true,
-      render: (t: TasksLine_node$data) => (
-        <ItemDueDate due_date={t.due_date} variant={'inList'} />
-      ),
-    },
-    objectAssignee: { percentWidth: 20 },
-    objectLabel: { percentWidth: 20 },
-    x_opencti_workflow_id: { percentWidth: 10 },
-  };
-
-  const ref = useRef<HTMLDivElement>(null);
+  });
+  const { count: _, ...tasksFilters } = paginationOptions;
   return (
     <div style={{ height: '100%' }}>
       <Typography
@@ -210,7 +154,7 @@ const CaseTasksLines: FunctionComponent<CaseTasksLinesProps> = ({
           classes={{ root: classes.createButton }}
           size="large"
         >
-          <AddOutlined fontSize="small" />
+          <AddOutlined fontSize="small"/>
         </IconButton>
       </Tooltip>
       <Tooltip title={t_i18n('Apply a new case template')}>
@@ -221,28 +165,9 @@ const CaseTasksLines: FunctionComponent<CaseTasksLinesProps> = ({
           classes={{ root: classes.applyButton }}
           size="large"
         >
-          <ContentPasteGoOutlined fontSize="small" />
+          <ContentPasteGoOutlined fontSize="small"/>
         </IconButton>
       </Tooltip>
-      <div className="clearfix" />
-      <Paper classes={{ root: classes.paper }} className={'paper-for-grid'} variant="outlined">
-        <div style={{ height: 400 }} ref={ref}>
-          {(queryRef && ref.current) && (
-            <DataTable
-              dataColumns={dataColumns}
-              resolvePath={(data: CaseTasksLines_data$data) => data.tasks?.edges?.map((n) => n?.node)}
-              storageKey={LOCAL_STORAGE_KEY_CASE_TASKS}
-              initialValues={initialValues}
-              toolbarFilters={contextTaskFilters}
-              preloadedPaginationProps={preloadedPaginationProps}
-              lineFragment={CaseTaskFragment}
-              variant={DataTableVariant.inline}
-              rootRef={ref.current}
-              onLineClick={(line: CaseTaskOverview_task$key & { name: string, id: string }) => setTask(line)}
-            />
-          )}
-        </div>
-      </Paper>
       <Dialog
         PaperProps={{ elevation: 1 }}
         open={openCaseTemplate}
@@ -264,7 +189,7 @@ const CaseTasksLines: FunctionComponent<CaseTasksLinesProps> = ({
                   connections: [
                     generateConnectionId({
                       key: 'Pagination_tasks',
-                      params: queryTaskPaginationOptions,
+                      params: tasksFilters,
                     }),
                   ],
                 },
@@ -318,30 +243,32 @@ const CaseTasksLines: FunctionComponent<CaseTasksLinesProps> = ({
         <CaseTaskCreation
           caseId={caseId}
           onClose={handleClose}
-          paginationOptions={queryTaskPaginationOptions}
+          paginationOptions={paginationOptions}
           defaultMarkings={defaultMarkings}
         />
       </Drawer>
-      {task && (
-        <Drawer
-          open={!!task}
-          title={task?.name}
-          onClose={() => setTask(undefined)}
-          header={
-            <IconButton
-              aria-label="Go to"
-              size="small"
-              component={Link}
-              to={`/dashboard/cases/tasks/${task?.id}`}
-              style={{ position: 'absolute', right: 10 }}
-            >
-              <NorthEastOutlined />
-            </IconButton>
-          }
+      <div className="clearfix"/>
+      <Paper classes={{ root: classes.paper }} variant="outlined">
+        <ListLines
+          sortBy={sortBy}
+          orderAsc={orderAsc}
+          handleSort={handleSort}
+          dataColumns={tasksDataColumns}
+          inline={true}
+          secondaryAction={true}
         >
-          <CaseTaskOverview tasksData={task} enableReferences={enableReferences} />
-        </Drawer>
-      )}
+          <ListLinesContent
+            dataColumns={tasksDataColumns}
+            dataList={data?.tasks?.edges ?? []}
+            LineComponent={CaseTasksLine}
+            isLoading={() => false}
+            entityId={caseId}
+            paginationOptions={tasksFilters}
+            containerRef={containerRef}
+            enableReferences={enableReferences}
+          />
+        </ListLines>
+      </Paper>
     </div>
   );
 };
diff --git a/opencti-platform/opencti-front/src/private/components/cases/tasks/TaskPopover.tsx b/opencti-platform/opencti-front/src/private/components/cases/tasks/TaskPopover.tsx
index 59bbf5f88731..6f6e6bc0fe59 100644
--- a/opencti-platform/opencti-front/src/private/components/cases/tasks/TaskPopover.tsx
+++ b/opencti-platform/opencti-front/src/private/components/cases/tasks/TaskPopover.tsx
@@ -62,12 +62,16 @@ const TaskPopover = ({
     { id },
   );
   const handleOpen = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
     setAnchorEl(null);
   };
-  const handleOpenEdit = () => {
+  const handleOpenEdit = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
     setDisplayEdit(true);
     handleClose();
   };
@@ -104,7 +108,7 @@ const TaskPopover = ({
     });
   };
   return (
-    <div className={classes.container}>
+    <div className={classes.container} onClick={(e) => e.stopPropagation()}>
       {variant === 'inLine' ? (
         <IconButton
           onClick={handleOpen}
diff --git a/opencti-platform/opencti-front/src/private/components/common/containers/ContainerAddStixCoreObjectsInLine.tsx b/opencti-platform/opencti-front/src/private/components/common/containers/ContainerAddStixCoreObjectsInLine.tsx
index 74bbcf703de2..f29c17d25d45 100644
--- a/opencti-platform/opencti-front/src/private/components/common/containers/ContainerAddStixCoreObjectsInLine.tsx
+++ b/opencti-platform/opencti-front/src/private/components/common/containers/ContainerAddStixCoreObjectsInLine.tsx
@@ -1,12 +1,13 @@
 import { Button, IconButton, Tooltip, Typography } from '@mui/material';
-import React, { FunctionComponent, useRef, useState } from 'react';
-import { useLazyLoadQuery } from 'react-relay';
+import React, { FunctionComponent, useState } from 'react';
+import { PreloadedQuery, usePreloadedQuery } from 'react-relay';
 import { Add } from '@mui/icons-material';
+import { useTheme } from '@mui/styles';
 import { useFormatter } from '../../../../components/i18n';
 import Drawer from '../drawer/Drawer';
 import StixDomainObjectCreation from '../stix_domain_objects/StixDomainObjectCreation';
 import ListLines from '../../../../components/list_lines/ListLines';
-import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
+import { PaginationLocalStorage, usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
 import { emptyFilterGroup } from '../../../../utils/filters/filtersUtils';
 import useAuth from '../../../../utils/hooks/useAuth';
 import { removeEmptyFields } from '../../../../utils/utils';
@@ -15,6 +16,9 @@ import ContainerAddStixCoreObjectsLines, { containerAddStixCoreObjectsLinesQuery
 import { ContainerStixDomainObjectsLinesQuery$variables } from './__generated__/ContainerStixDomainObjectsLinesQuery.graphql';
 import { ContainerStixCyberObservablesLinesQuery$variables } from './__generated__/ContainerStixCyberObservablesLinesQuery.graphql';
 import StixCyberObservableCreation from '../../observations/stix_cyber_observables/StixCyberObservableCreation';
+import type { Theme } from '../../../../components/Theme';
+import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
+import { DataColumns } from '../../../../components/list_lines';
 
 interface ControlledDialProps {
   onOpen: () => void
@@ -22,11 +26,13 @@ interface ControlledDialProps {
 }
 
 const ControlledDial = ({ onOpen, title }: ControlledDialProps) => {
+  const theme = useTheme<Theme>();
   return (
     <Button
       variant="contained"
-      style={{ marginLeft: '3px' }}
+      style={{ marginLeft: theme.spacing(0.5) }}
       aria-label={title}
+      size={'small'}
       onClick={() => onOpen()}
     >
       {title}
@@ -58,6 +64,52 @@ type scoEdge = {
   }
 };
 
+interface ContainerAddStixCreObjectsInLineLoaderProps {
+  queryRef: PreloadedQuery<ContainerAddStixCoreObjectsLinesQuery>
+  containerId: string
+  buildColumns: () => DataColumns
+  linesPaginationOptions: ContainerStixDomainObjectsLinesQuery$variables | ContainerStixCyberObservablesLinesQuery$variables
+  knowledgeGraph?: boolean
+  selectedElements: unknown[]
+  handleSelect: (o: { id: string }) => void
+  handleDeselect: (o: { id: string }) => void
+  helpers: PaginationLocalStorage['helpers']
+  containerRef: HTMLInputElement
+  enableReferences?: boolean
+}
+
+const ContainerAddStixCreObjectsInLineLoader: FunctionComponent<ContainerAddStixCreObjectsInLineLoaderProps> = ({
+  queryRef,
+  containerId,
+  buildColumns,
+  linesPaginationOptions,
+  knowledgeGraph,
+  selectedElements,
+  handleSelect,
+  handleDeselect,
+  helpers,
+  containerRef,
+  enableReferences,
+}) => {
+  const data = usePreloadedQuery(containerAddStixCoreObjectsLinesQuery, queryRef);
+  return (
+    <ContainerAddStixCoreObjectsLines
+      data={data}
+      containerId={containerId}
+      paginationOptions={linesPaginationOptions}
+      dataColumns={buildColumns()}
+      initialLoading={data === null}
+      knowledgeGraph={knowledgeGraph}
+      containerStixCoreObjects={selectedElements}
+      onAdd={handleSelect}
+      onDelete={handleDeselect}
+      setNumberOfElements={helpers.handleSetNumberOfElements}
+      containerRef={{ current: containerRef }}
+      enableReferences={enableReferences}
+    />
+  );
+};
+
 interface ContainerAddStixCoreObjectsInLineProps {
   containerId: string,
   targetStixCoreObjectTypes: string[],
@@ -69,13 +121,11 @@ interface ContainerAddStixCoreObjectsInLineProps {
   defaultCreatedBy?: unknown,
   defaultMarkingDefinitions?: unknown[],
   selectedText?: string,
-  enableReferences?: boolean,
-  knowledgeGraph?: boolean,
+  enableReferences?: boolean | undefined,
+  knowledgeGraph?: boolean | undefined,
 }
 
-const ContainerAddStixCoreObjectsInLine: FunctionComponent<
-ContainerAddStixCoreObjectsInLineProps
-> = ({
+const ContainerAddStixCoreObjectsInLine: FunctionComponent<ContainerAddStixCoreObjectsInLineProps> = ({
   containerId,
   targetStixCoreObjectTypes,
   paginationOptions: linesPaginationOptions,
@@ -118,7 +168,7 @@ ContainerAddStixCoreObjectsInLineProps
     filters,
     numberOfElements,
   } = viewStorage;
-  const containerRef = useRef(null);
+  const [containerRef, setRef] = useState<HTMLInputElement>();
   const [selectedElements, setSelectedElements] = useState<scoEdge[]>(containerStixCoreObjects as scoEdge[]);
   const handleSelect = (node: { id: string }) => {
     setSelectedElements([
@@ -166,10 +216,7 @@ ContainerAddStixCoreObjectsInLineProps
     ...paginationOptionsNoCount,
     search: keyword,
   });
-  const data = useLazyLoadQuery<ContainerAddStixCoreObjectsLinesQuery>(
-    containerAddStixCoreObjectsLinesQuery,
-    { count: 100, ...searchPaginationOptions },
-  );
+  const queryRef = useQueryLoading<ContainerAddStixCoreObjectsLinesQuery>(containerAddStixCoreObjectsLinesQuery, { count: 100, ...searchPaginationOptions });
 
   const Header = () => {
     const [openCreateEntity, setOpenCreateEntity] = useState<boolean>(false);
@@ -255,6 +302,7 @@ ContainerAddStixCoreObjectsInLineProps
       title={''} // Defined in custom header prop
       controlledDial={knowledgeGraph ? GraphControlledDial : Dial}
       header={<Header />}
+      ref={setRef}
     >
       <ListLines
         helpers={helpers}
@@ -278,20 +326,21 @@ ContainerAddStixCoreObjectsInLineProps
         availableEntityTypes={targetStixCoreObjectTypes}
         entityTypes={targetStixCoreObjectTypes}
       >
-        <ContainerAddStixCoreObjectsLines
-          data={data}
-          containerId={containerId}
-          paginationOptions={linesPaginationOptions}
-          dataColumns={buildColumns()}
-          initialLoading={data === null}
-          knowledgeGraph={knowledgeGraph}
-          containerStixCoreObjects={selectedElements}
-          onAdd={handleSelect}
-          onDelete={handleDeselect}
-          setNumberOfElements={helpers.handleSetNumberOfElements}
-          containerRef={containerRef}
-          enableReferences={enableReferences}
-        />
+        {(containerRef && queryRef) && (
+          <ContainerAddStixCreObjectsInLineLoader
+            queryRef={queryRef}
+            containerId={containerId}
+            buildColumns={buildColumns}
+            linesPaginationOptions={linesPaginationOptions}
+            knowledgeGraph={knowledgeGraph}
+            selectedElements={selectedElements}
+            handleSelect={handleSelect}
+            handleDeselect={handleDeselect}
+            helpers={helpers}
+            containerRef={containerRef}
+            enableReferences={enableReferences}
+          />
+        )}
       </ListLines>
     </Drawer>
   );
diff --git a/opencti-platform/opencti-front/src/private/components/common/drawer/Drawer.tsx b/opencti-platform/opencti-front/src/private/components/common/drawer/Drawer.tsx
index 7b233ae0522d..46e6a6a0cab1 100644
--- a/opencti-platform/opencti-front/src/private/components/common/drawer/Drawer.tsx
+++ b/opencti-platform/opencti-front/src/private/components/common/drawer/Drawer.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useState } from 'react';
+import React, { CSSProperties, useEffect, useState, forwardRef } from 'react';
 import DrawerMUI from '@mui/material/Drawer';
 import makeStyles from '@mui/styles/makeStyles';
 import IconButton from '@mui/material/IconButton';
@@ -77,11 +77,11 @@ interface DrawerProps {
   context?: readonly (GenericContext | null)[] | null;
   header?: React.ReactElement;
   controlledDial?: DrawerControlledDialType;
-  containerRef?: HTMLInputElement;
   containerStyle?: CSSProperties
 }
 
-const Drawer = ({
+// eslint-disable-next-line react/display-name
+const Drawer = forwardRef(({
   title,
   children,
   open: defaultOpen = false,
@@ -90,9 +90,8 @@ const Drawer = ({
   context,
   header,
   controlledDial,
-  containerRef,
   containerStyle,
-}: DrawerProps) => {
+}: DrawerProps, ref) => {
   const {
     bannerSettings: { bannerHeightNumber },
   } = useAuth();
@@ -155,9 +154,8 @@ const Drawer = ({
         sx={{ zIndex: 1202 }}
         classes={{ paper: classes.drawerPaper }}
         onClose={handleClose}
-        PaperProps={{
-          ref: containerRef,
-        }}
+        onClick={(e) => e.stopPropagation()}
+        PaperProps={{ ref }}
       >
         <div className={classes.header}>
           <IconButton
@@ -176,6 +174,6 @@ const Drawer = ({
       </DrawerMUI>
     </>
   );
-};
+});
 
 export default Drawer;
diff --git a/opencti-platform/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectsList.jsx b/opencti-platform/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectsList.jsx
index a2321e0f25d8..ec58a2e11606 100644
--- a/opencti-platform/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectsList.jsx
+++ b/opencti-platform/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectsList.jsx
@@ -219,7 +219,7 @@ const StixCoreObjectsList = ({
     : 'created_at';
   const { filters } = buildFiltersAndOptionsForWidgets(selection.filters, { startDate, endDate, dateAttribute });
 
-  const rootRef = useRef();
+  const rootRef = useRef(null);
 
   return (
     <WidgetContainer
@@ -244,7 +244,13 @@ const StixCoreObjectsList = ({
             && props.stixCoreObjects.edges.length > 0
           ) {
             const data = props.stixCoreObjects.edges;
-            return <WidgetListCoreObjects data={data} dateAttribute={dateAttribute} ref={rootRef} />;
+            return (
+              <WidgetListCoreObjects
+                data={data}
+                dateAttribute={dateAttribute}
+                rootRef={rootRef.current ?? undefined}
+              />
+            );
           }
           if (props) {
             return <WidgetNoData />;
diff --git a/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipCreationFromEntity.tsx b/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipCreationFromEntity.tsx
index f657be8ba039..834e1dc5d1e5 100644
--- a/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipCreationFromEntity.tsx
+++ b/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipCreationFromEntity.tsx
@@ -822,6 +822,8 @@ const StixCoreRelationshipCreationFromEntity: FunctionComponent<StixCoreRelation
                     <DataTable
                       disableToolBar
                       disableSelectAll
+                      disableNavigation
+                      selectOnLineClick
                       rootRef={tableRootRef ?? undefined}
                       variant={DataTableVariant.inline}
                       dataColumns={buildColumns(platformModuleHelpers)}
diff --git a/opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectEdition.jsx b/opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectEdition.jsx
index 1a23360da1a1..60757a92a655 100644
--- a/opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectEdition.jsx
@@ -72,7 +72,7 @@ class StixDomainObjectEdition extends Component {
                   />
                 );
               }
-              return <Loader variant="inElement" />;
+              return <Loader variant="inline" />;
             }}
           />
         ) : (
diff --git a/opencti-platform/opencti-front/src/private/components/common/stix_nested_ref_relationships/StixNestedRefRelationshipEdition.jsx b/opencti-platform/opencti-front/src/private/components/common/stix_nested_ref_relationships/StixNestedRefRelationshipEdition.jsx
index f17f6abe34e7..7bbce6f3a897 100644
--- a/opencti-platform/opencti-front/src/private/components/common/stix_nested_ref_relationships/StixNestedRefRelationshipEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/common/stix_nested_ref_relationships/StixNestedRefRelationshipEdition.jsx
@@ -69,7 +69,7 @@ class StixNestedRefRelationshipEdition extends Component {
                   />
                 );
               }
-              return <Loader variant="inElement" />;
+              return <Loader variant="inline" />;
             }}
           />
         ) : (
diff --git a/opencti-platform/opencti-front/src/private/components/data/DataTableToolBar.jsx b/opencti-platform/opencti-front/src/private/components/data/DataTableToolBar.jsx
index 9436e22eb211..c11ee9a7d19e 100644
--- a/opencti-platform/opencti-front/src/private/components/data/DataTableToolBar.jsx
+++ b/opencti-platform/opencti-front/src/private/components/data/DataTableToolBar.jsx
@@ -129,6 +129,7 @@ const styles = (theme) => ({
   title: {
     flex: '1 1 100%',
     fontSize: '12px',
+    marginBottom: '1px',
   },
   chipValue: {
     margin: 0,
@@ -1302,7 +1303,7 @@ class DataTableToolBar extends Component {
 
     // Some filter types are high level, we do not want to check them as "Different"
     // We might need to add some other types here before refactoring the toolbar
-    const typesAreDifferent = (selectedTypes.filter((type) => !['Stix-Domain-Object', 'stix-core-relationship'].includes(type))).length > 1;
+    const typesAreDifferent = (selectedTypes.filter((type) => !['Stix-Domain-Object', 'stix-core-relationship', 'Stix-Cyber-Observable'].includes(type))).length > 1;
     const preventMerge = selectedTypes.at(0) === 'Vocabulary'
       && Object.values(selectedElements).some(({ builtIn }) => Boolean(builtIn));
     // region update
@@ -1316,7 +1317,7 @@ class DataTableToolBar extends Component {
         && notScannableTypes.includes(entityTypeFilterValues[0]));
     // endregion
     // region enrich
-    const isManualEnrichSelect = !selectAll && selectedTypes.length === 1;
+    const isManualEnrichSelect = !selectAll && (selectedTypes.filter((st) => !['Stix-Cyber-Observable'].includes(st))).length === 1;
     const isAllEnrichSelect = selectAll
       && entityTypeFilterValues.length === 1
       && entityTypeFilterValues[0] !== 'Stix-Cyber-Observable'
@@ -1399,8 +1400,8 @@ class DataTableToolBar extends Component {
           // endregion
           return (
             <>
-              <Toolbar style={{ minHeight: 40, marginTop: 2, display: 'flex', justifyContent: 'space-between', height: '100%' }} data-testid='opencti-toolbar'>
-                <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Toolbar style={{ minHeight: 40, display: 'flex', justifyContent: 'space-between', height: '100%', paddingRight: 12, paddingLeft: 12 }} data-testid='opencti-toolbar'>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                   <Typography
                     className={classes.title}
                     color="inherit"
diff --git a/opencti-platform/opencti-front/src/private/components/entities/events/EventEdition.jsx b/opencti-platform/opencti-front/src/private/components/entities/events/EventEdition.jsx
index 69e53a88def2..8809435bb4bb 100644
--- a/opencti-platform/opencti-front/src/private/components/entities/events/EventEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/entities/events/EventEdition.jsx
@@ -54,7 +54,7 @@ class EventEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/entities/individuals/IndividualEdition.jsx b/opencti-platform/opencti-front/src/private/components/entities/individuals/IndividualEdition.jsx
index aa4488dfdb68..50e038f73f9b 100644
--- a/opencti-platform/opencti-front/src/private/components/entities/individuals/IndividualEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/entities/individuals/IndividualEdition.jsx
@@ -42,7 +42,7 @@ class IndividualEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/entities/organizations/OrganizationEdition.jsx b/opencti-platform/opencti-front/src/private/components/entities/organizations/OrganizationEdition.jsx
index c6210e9a568c..1f9d63ad46fc 100644
--- a/opencti-platform/opencti-front/src/private/components/entities/organizations/OrganizationEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/entities/organizations/OrganizationEdition.jsx
@@ -42,7 +42,7 @@ class OrganizationEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/entities/sectors/SectorEdition.jsx b/opencti-platform/opencti-front/src/private/components/entities/sectors/SectorEdition.jsx
index 3207d9606acb..13e5d50ce0bc 100644
--- a/opencti-platform/opencti-front/src/private/components/entities/sectors/SectorEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/entities/sectors/SectorEdition.jsx
@@ -42,7 +42,7 @@ class SectorEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/entities/systems/SystemEdition.jsx b/opencti-platform/opencti-front/src/private/components/entities/systems/SystemEdition.jsx
index 2c36dcec0275..4f4879571271 100644
--- a/opencti-platform/opencti-front/src/private/components/entities/systems/SystemEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/entities/systems/SystemEdition.jsx
@@ -42,7 +42,7 @@ class SystemEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/events/incidents/IncidentDetails.tsx b/opencti-platform/opencti-front/src/private/components/events/incidents/IncidentDetails.tsx
index 7fe8620a53d4..abcd2c5fd083 100644
--- a/opencti-platform/opencti-front/src/private/components/events/incidents/IncidentDetails.tsx
+++ b/opencti-platform/opencti-front/src/private/components/events/incidents/IncidentDetails.tsx
@@ -161,6 +161,7 @@ const IncidentDetails: FunctionComponent<IncidentDetailsProps> = ({
               small={true}
               type="incident_severity_ov"
               value={incident.severity}
+              displayMode={'chip'}
             />
             <Typography
               variant="h3"
diff --git a/opencti-platform/opencti-front/src/private/components/events/observed_data/ObservedDataEdition.jsx b/opencti-platform/opencti-front/src/private/components/events/observed_data/ObservedDataEdition.jsx
index 31abbf87bcd8..a2436a53c27c 100644
--- a/opencti-platform/opencti-front/src/private/components/events/observed_data/ObservedDataEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/events/observed_data/ObservedDataEdition.jsx
@@ -42,7 +42,7 @@ class ObservedDataEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/events/stix_sighting_relationships/StixSightingRelationship.tsx b/opencti-platform/opencti-front/src/private/components/events/stix_sighting_relationships/StixSightingRelationship.tsx
index d73ef700bd3d..7b70a1dc1c96 100644
--- a/opencti-platform/opencti-front/src/private/components/events/stix_sighting_relationships/StixSightingRelationship.tsx
+++ b/opencti-platform/opencti-front/src/private/components/events/stix_sighting_relationships/StixSightingRelationship.tsx
@@ -82,7 +82,7 @@ StixSightingRelationshipProps
                 {isFABReplaced && (
                   <Security needs={[KNOWLEDGE_KNUPDATE]}>
                     <Button
-                      variant='contained'
+                      variant='outlined'
                       size='small'
                       aria-label={t_i18n('Update')}
                       onClick={handleOpenEdit}
diff --git a/opencti-platform/opencti-front/src/private/components/observations/Artifacts.tsx b/opencti-platform/opencti-front/src/private/components/observations/Artifacts.tsx
index fcf2ee0cadf5..028892c2be51 100644
--- a/opencti-platform/opencti-front/src/private/components/observations/Artifacts.tsx
+++ b/opencti-platform/opencti-front/src/private/components/observations/Artifacts.tsx
@@ -3,7 +3,6 @@ import useHelper from 'src/utils/hooks/useHelper';
 import { graphql } from 'react-relay';
 import { ArtifactsLinesPaginationQuery, ArtifactsLinesPaginationQuery$variables } from '@components/observations/__generated__/ArtifactsLinesPaginationQuery.graphql';
 import { ArtifactsLines_data$data } from '@components/observations/__generated__/ArtifactsLines_data.graphql';
-import Tooltip from '@mui/material/Tooltip';
 import Security from '../../../utils/Security';
 import { KNOWLEDGE_KNUPDATE } from '../../../utils/hooks/useGranted';
 import useAuth from '../../../utils/hooks/useAuth';
@@ -16,7 +15,6 @@ import { useFormatter } from '../../../components/i18n';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 import DataTable from '../../../components/dataGrid/DataTable';
 import { UsePreloadedPaginationFragment } from '../../../utils/hooks/usePreloadedPaginationFragment';
-import { truncate } from '../../../utils/String';
 import { DataTableProps } from '../../../components/dataGrid/dataTableTypes';
 
 const LOCAL_STORAGE_KEY = 'artifacts';
@@ -115,17 +113,6 @@ const artifactsLinesFragment = graphql`
     ) @connection(key: "Pagination_stixCyberObservables") {
       edges {
         node {
-          id
-          entity_type
-          observable_value
-          created_at
-          objectMarking {
-            id
-            definition_type
-            definition
-            x_opencti_order
-            x_opencti_color
-          }
           ...ArtifactsLine_node
         }
       }
@@ -172,43 +159,13 @@ const Artifacts: FunctionComponent = () => {
   const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
   const dataColumns: DataTableProps['dataColumns'] = {
-    observable_value: { isSortable: isRuntimeSort },
-    file_name: {
-      label: 'File name',
-      percentWidth: 15,
-      isSortable: false,
-      render: (data, { column: { size } }) => {
-        const file = (data.importFiles?.edges && data.importFiles.edges.length > 0)
-          ? data.importFiles.edges[0]?.node
-          : { name: 'N/A', metaData: { mimetype: 'N/A' }, size: 0 };
-        return (<Tooltip title={file?.name}><>{truncate(file?.name, size * 0.113)}</></Tooltip>);
-      },
-    },
-    file_mime_type: {
-      label: 'Mime/Type',
-      percentWidth: 8,
-      isSortable: false,
-      render: (data, { column: { size } }) => {
-        const file = (data.importFiles?.edges && data.importFiles.edges.length > 0)
-          ? data.importFiles.edges[0]?.node
-          : { name: 'N/A', metaData: { mimetype: 'N/A' }, size: 0 };
-        return (<Tooltip title={file?.metaData?.mimetype}><>{truncate(file?.metaData?.mimetype, size * 0.113)}</></Tooltip>);
-      },
-    },
-    file_size: {
-      label: 'File size',
-      percentWidth: 7,
-      isSortable: false,
-      render: (data, { b }) => {
-        const file = (data.importFiles?.edges && data.importFiles.edges.length > 0)
-          ? data.importFiles.edges[0]?.node
-          : { name: 'N/A', metaData: { mimetype: 'N/A' }, size: 0 };
-        return (<Tooltip title={file?.metaData?.mimetype}><>{b(file?.size)}</></Tooltip>);
-      },
-    },
-    createdBy: { percentWidth: 10, isSortable: isRuntimeSort },
-    creator: { percentWidth: 10, isSortable: isRuntimeSort },
-    objectLabel: { percentWidth: 10 },
+    observable_value: { percentWidth: 13, isSortable: isRuntimeSort },
+    file_name: { percentWidth: 12 },
+    file_mime_type: { percentWidth: 8 },
+    file_size: { percentWidth: 8 },
+    createdBy: { percentWidth: 12, isSortable: isRuntimeSort },
+    creator: { percentWidth: 12, isSortable: isRuntimeSort },
+    objectLabel: { percentWidth: 15 },
     created_at: { percentWidth: 10 },
     objectMarking: { percentWidth: 10, isSortable: isRuntimeSort },
   };
diff --git a/opencti-platform/opencti-front/src/private/components/observations/Indicators.tsx b/opencti-platform/opencti-front/src/private/components/observations/Indicators.tsx
index 26fe056aef48..0ae165d4c3fb 100644
--- a/opencti-platform/opencti-front/src/private/components/observations/Indicators.tsx
+++ b/opencti-platform/opencti-front/src/private/components/observations/Indicators.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import useHelper from 'src/utils/hooks/useHelper';
 import { graphql } from 'react-relay';
+import Tooltip from '@mui/material/Tooltip';
 import { IndicatorsLinesPaginationQuery, IndicatorsLinesPaginationQuery$variables } from '@components/observations/__generated__/IndicatorsLinesPaginationQuery.graphql';
 import { IndicatorsLines_data$data } from '@components/observations/__generated__/IndicatorsLines_data.graphql';
 import IndicatorCreation from './indicators/IndicatorCreation';
@@ -14,6 +15,7 @@ import { useFormatter } from '../../../components/i18n';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 import { UsePreloadedPaginationFragment } from '../../../utils/hooks/usePreloadedPaginationFragment';
 import DataTable from '../../../components/dataGrid/DataTable';
+import { DataTableProps } from '../../../components/dataGrid/dataTableTypes';
 
 const LOCAL_STORAGE_KEY = 'indicators-list';
 
@@ -150,7 +152,7 @@ const Indicators = () => {
     queryPaginationOptions,
   );
 
-  const dataColumns = {
+  const dataColumns: DataTableProps['dataColumns'] = {
     pattern_type: {},
     name: { percentWidth: 21 },
     createdBy: {
@@ -160,7 +162,10 @@ const Indicators = () => {
       isSortable: isRuntimeSort ?? false,
     },
     objectLabel: {},
-    created: { percentWidth: 10 },
+    created: {
+      percentWidth: 10,
+      render: ({ created }, { fldt }) => <Tooltip title={fldt(created)}>{fldt(created)}</Tooltip>,
+    },
     valid_until: {
       label: 'Valid until',
       percentWidth: 10,
diff --git a/opencti-platform/opencti-front/src/private/components/observations/StixCyberObservables.tsx b/opencti-platform/opencti-front/src/private/components/observations/StixCyberObservables.tsx
index 2eed95516375..702a540aa0f0 100644
--- a/opencti-platform/opencti-front/src/private/components/observations/StixCyberObservables.tsx
+++ b/opencti-platform/opencti-front/src/private/components/observations/StixCyberObservables.tsx
@@ -1,24 +1,29 @@
 import { FunctionComponent } from 'react';
 import { React } from 'mdi-material-ui';
 import useHelper from 'src/utils/hooks/useHelper';
+import { StixCyberObservablesLines_data$data } from '@components/observations/stix_cyber_observables/__generated__/StixCyberObservablesLines_data.graphql';
+import { stixCyberObservableLineFragment } from '@components/observations/stix_cyber_observables/StixCyberObservableLine';
+import { StixCyberObservablesLinesSearchQuery$data } from '@components/observations/stix_cyber_observables/__generated__/StixCyberObservablesLinesSearchQuery.graphql';
+import { StixCyberObservableLine_node$data } from '@components/observations/stix_cyber_observables/__generated__/StixCyberObservableLine_node.graphql';
 import StixCyberObservableCreation from './stix_cyber_observables/StixCyberObservableCreation';
 import Security from '../../../utils/Security';
 import { usePaginationLocalStorage } from '../../../utils/hooks/useLocalStorage';
-import ListLines from '../../../components/list_lines/ListLines';
-import StixCyberObservablesLines, { stixCyberObservablesLinesQuery, stixCyberObservablesLinesSearchQuery } from './stix_cyber_observables/StixCyberObservablesLines';
-import ToolBar from '../data/ToolBar';
-import { StixCyberObservablesLinesPaginationQuery$data } from './stix_cyber_observables/__generated__/StixCyberObservablesLinesPaginationQuery.graphql';
-import { QueryRenderer } from '../../../relay/environment';
-import useCopy from '../../../utils/hooks/useCopy';
-import { StixCyberObservablesLinesSearchQuery$data } from './stix_cyber_observables/__generated__/StixCyberObservablesLinesSearchQuery.graphql';
+import { stixCyberObservablesLinesFragment, stixCyberObservablesLinesQuery, stixCyberObservablesLinesSearchQuery } from './stix_cyber_observables/StixCyberObservablesLines';
+import {
+  StixCyberObservablesLinesPaginationQuery,
+  StixCyberObservablesLinesPaginationQuery$variables,
+} from './stix_cyber_observables/__generated__/StixCyberObservablesLinesPaginationQuery.graphql';
 import useAuth from '../../../utils/hooks/useAuth';
 import { KNOWLEDGE_KNUPDATE } from '../../../utils/hooks/useGranted';
 import ExportContextProvider from '../../../utils/ExportContextProvider';
-import useEntityToggle from '../../../utils/hooks/useEntityToggle';
-import { StixCyberObservableLine_node$data } from './stix_cyber_observables/__generated__/StixCyberObservableLine_node.graphql';
 import { useBuildEntityTypeBasedFilterContext, emptyFilterGroup, useGetDefaultFilterObject } from '../../../utils/filters/filtersUtils';
 import { useFormatter } from '../../../components/i18n';
 import Breadcrumbs from '../../../components/Breadcrumbs';
+import useQueryLoading from '../../../utils/hooks/useQueryLoading';
+import { UsePreloadedPaginationFragment } from '../../../utils/hooks/usePreloadedPaginationFragment';
+import DataTable from '../../../components/dataGrid/DataTable';
+import useCopy from '../../../utils/hooks/useCopy';
+import useEntityToggle from '../../../utils/hooks/useEntityToggle';
 
 const LOCAL_STORAGE_KEY = 'stixCyberObservables';
 
@@ -28,39 +33,77 @@ const StixCyberObservables: FunctionComponent = () => {
   const {
     platformModuleHelpers: { isRuntimeFieldEnable },
   } = useAuth();
+
   const isRuntimeSort = isRuntimeFieldEnable() ?? false;
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
-  const { viewStorage, paginationOptions, helpers } = usePaginationLocalStorage(
-    LOCAL_STORAGE_KEY,
-    {
-      filters: {
-        ...emptyFilterGroup,
-        filters: useGetDefaultFilterObject(['entity_type', 'sightedBy'], ['Stix-Cyber-Observable']),
-      },
-      searchTerm: '',
-      sortBy: 'created_at',
-      orderAsc: false,
-      openExports: false,
+  const initialValues = {
+    filters: {
+      ...emptyFilterGroup,
+      filters: useGetDefaultFilterObject(['entity_type', 'sightedBy'], ['Stix-Cyber-Observable']),
     },
+    searchTerm: '',
+    sortBy: 'created_at',
+    orderAsc: false,
+    openExports: false,
+  };
+
+  const { viewStorage, paginationOptions, helpers: storageHelpers } = usePaginationLocalStorage<StixCyberObservablesLinesPaginationQuery$variables>(
+    LOCAL_STORAGE_KEY,
+    initialValues,
+  );
+
+  const contextFilters = useBuildEntityTypeBasedFilterContext('Stix-Cyber-Observable', viewStorage.filters);
+  const queryPaginationOptions = {
+    ...paginationOptions,
+    filters: contextFilters,
+  } as unknown as StixCyberObservablesLinesPaginationQuery$variables;
+
+  const queryRef = useQueryLoading<StixCyberObservablesLinesPaginationQuery>(
+    stixCyberObservablesLinesQuery,
+    queryPaginationOptions,
   );
-  const {
-    numberOfElements,
-    filters,
-    searchTerm,
-    sortBy,
-    orderAsc,
-    openExports,
-  } = viewStorage;
 
-  const contextFilters = useBuildEntityTypeBasedFilterContext('Stix-Cyber-Observable', filters);
+  const preloadedPaginationProps = {
+    linesQuery: stixCyberObservablesLinesQuery,
+    linesFragment: stixCyberObservablesLinesFragment,
+    queryRef,
+    nodePath: ['stixCyberObservables', 'pageInfo', 'globalCount'],
+    setNumberOfElements: storageHelpers.handleSetNumberOfElements,
+  } as UsePreloadedPaginationFragment<StixCyberObservablesLinesPaginationQuery>;
+
+  const dataColumns = {
+    entity_type: {
+      percentWidth: 12,
+    },
+    observable_value: {
+      label: 'Representation',
+      percentWidth: 29,
+      isSortable: isRuntimeSort,
+    },
+    createdBy: {
+      percentWidth: 12,
+      isSortable: isRuntimeSort,
+    },
+    creator: {
+      percentWidth: 12,
+      isSortable: isRuntimeSort,
+    },
+    objectLabel: {
+      percentWidth: 15,
+    },
+    created_at: {
+      percentWidth: 10,
+    },
+    objectMarking: {
+      percentWidth: 10,
+      isSortable: isRuntimeSort,
+    },
+  };
 
   const {
-    onToggleEntity,
-    numberOfSelectedElements,
-    handleClearSelectedElements,
     selectedElements,
     deSelectedElements,
-    handleToggleSelectAll,
     selectAll,
   } = useEntityToggle<StixCyberObservableLine_node$data>(LOCAL_STORAGE_KEY);
 
@@ -75,7 +118,7 @@ const StixCyberObservables: FunctionComponent = () => {
   const handleCopy = useCopy<StixCyberObservablesLinesSearchQuery$data>(
     {
       filters: contextFilters,
-      searchTerm: searchTerm ?? '',
+      searchTerm: viewStorage.searchTerm ?? '',
       query: stixCyberObservablesLinesSearchQuery,
       selectedValues: Object.values(selectedElements).map(
         ({ observable_value }) => observable_value,
@@ -86,135 +129,47 @@ const StixCyberObservables: FunctionComponent = () => {
     selectAll,
   );
 
-  const buildColumns = () => {
-    return {
-      entity_type: {
-        label: 'Type',
-        width: '12%',
-        isSortable: true,
-      },
-      observable_value: {
-        label: 'Representation',
-        width: '25%',
-        isSortable: isRuntimeSort,
-      },
-      createdBy: {
-        label: 'Author',
-        width: '12%',
-        isSortable: isRuntimeSort,
-      },
-      creator: {
-        label: 'Creators',
-        width: '12%',
-        isSortable: isRuntimeSort,
-      },
-      objectLabel: {
-        label: 'Labels',
-        width: '15%',
-        isSortable: false,
-      },
-      created_at: {
-        label: 'Platform creation date',
-        width: '10%',
-        isSortable: true,
-      },
-      objectMarking: {
-        label: 'Marking',
-        width: '10%',
-        isSortable: isRuntimeSort,
-      },
-    };
-  };
-
-  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
-
-  const renderLines = () => {
-    return (
-      <>
-        <ListLines
-          helpers={helpers}
-          sortBy={sortBy}
-          orderAsc={orderAsc}
-          dataColumns={buildColumns()}
-          handleSort={helpers.handleSort}
-          handleSearch={helpers.handleSearch}
-          handleAddFilter={helpers.handleAddFilter}
-          handleRemoveFilter={helpers.handleRemoveFilter}
-          handleSwitchGlobalMode={helpers.handleSwitchGlobalMode}
-          handleSwitchLocalMode={helpers.handleSwitchLocalMode}
-          handleToggleExports={helpers.handleToggleExports}
-          openExports={openExports}
-          handleToggleSelectAll={handleToggleSelectAll}
-          selectAll={selectAll}
+  return (
+    <ExportContextProvider>
+      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Observations') }, { label: t_i18n('Observables'), current: true }]} />
+      {queryRef && (
+        <DataTable
+          storageKey={LOCAL_STORAGE_KEY}
+          initialValues={initialValues}
+          preloadedPaginationProps={preloadedPaginationProps}
+          resolvePath={(data: StixCyberObservablesLines_data$data) => data.stixCyberObservables?.edges?.map?.((n) => n?.node)}
+          dataColumns={dataColumns}
+          lineFragment={stixCyberObservableLineFragment}
+          toolbarFilters={contextFilters}
+          handleCopy={handleCopy}
           exportContext={{ entity_type: 'Stix-Cyber-Observable' }}
           availableEntityTypes={['Stix-Cyber-Observable']}
-          keyword={searchTerm}
-          filters={filters}
-          iconExtension={true}
-          paginationOptions={paginationOptions}
-          numberOfElements={numberOfElements}
-          createButton={isFABReplaced && <Security needs={[KNOWLEDGE_KNUPDATE]}>
-            <StixCyberObservableCreation
-              paginationKey="Pagination_stixCyberObservables"
-              paginationOptions={paginationOptions}
-              contextual={false}
-              open={false}
-              handleClose={undefined}
-              onCompleted={undefined}
-              isFromBulkRelation={undefined}
-              type={undefined}
-              display={undefined}
-              speeddial={false}
-              inputValue={undefined}
-            />
-          </Security>}
-        >
-          <QueryRenderer
-            query={stixCyberObservablesLinesQuery}
-            variables={paginationOptions}
-            render={({
-              props,
-            }: {
-              props: StixCyberObservablesLinesPaginationQuery$data;
-            }) => (
-              <StixCyberObservablesLines
-                data={props}
-                paginationOptions={paginationOptions}
-                dataColumns={buildColumns()}
-                initialLoading={props === null}
-                onLabelClick={helpers.handleAddFilter}
-                selectedElements={selectedElements}
-                deSelectedElements={deSelectedElements}
-                onToggleEntity={onToggleEntity}
-                selectAll={selectAll}
-                setNumberOfElements={helpers.handleSetNumberOfElements}
+          searchContextFinal={{ entityTypes: ['Stix-Cyber-Observable'] }} // ???? for entity_type fileter
+          createButton={isFABReplaced
+            && <Security needs={[KNOWLEDGE_KNUPDATE]}>
+              <StixCyberObservableCreation
+                paginationKey="Pagination_stixCyberObservables"
+                paginationOptions={queryPaginationOptions}
+                contextual={false}
+                open={false}
+                handleClose={undefined}
+                onCompleted={undefined}
+                isFromBulkRelation={undefined}
+                type={undefined}
+                display={undefined}
+                speeddial={false}
+                inputValue={undefined}
+                controlledDialStyles={{ marginLeft: 1 }}
               />
-            )}
-          />
-        </ListLines>
-        <ToolBar
-          selectedElements={selectedElements}
-          deSelectedElements={deSelectedElements}
-          numberOfSelectedElements={numberOfSelectedElements}
-          selectAll={selectAll}
-          filters={contextFilters}
-          search={searchTerm}
-          handleClearSelectedElements={handleClearSelectedElements}
-          handleCopy={handleCopy}
+            </Security>
+          }
         />
-      </>
-    );
-  };
-
-  return (
-    <ExportContextProvider>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Observations') }, { label: t_i18n('Observables'), current: true }]} />
-      {renderLines()}
-      {!isFABReplaced
-        && <Security needs={[KNOWLEDGE_KNUPDATE]}>
+      )}
+      {!isFABReplaced && (
+        <Security needs={[KNOWLEDGE_KNUPDATE]}>
           <StixCyberObservableCreation
             paginationKey="Pagination_stixCyberObservables"
-            paginationOptions={paginationOptions}
+            paginationOptions={queryPaginationOptions}
             contextual={false}
             open={false}
             handleClose={undefined}
@@ -226,7 +181,7 @@ const StixCyberObservables: FunctionComponent = () => {
             inputValue={undefined}
           />
         </Security>
-      }
+      )}
     </ExportContextProvider>
   );
 };
diff --git a/opencti-platform/opencti-front/src/private/components/observations/indicators/IndicatorEdition.jsx b/opencti-platform/opencti-front/src/private/components/observations/indicators/IndicatorEdition.jsx
index 6d8f430329de..318067d2dd2d 100644
--- a/opencti-platform/opencti-front/src/private/components/observations/indicators/IndicatorEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/observations/indicators/IndicatorEdition.jsx
@@ -39,7 +39,7 @@ const IndicatorEdition = ({ indicatorId }) => {
             />
           );
         }
-        return <Loader variant="inElement" />;
+        return <Loader variant="inline" />;
       }}
     />
   );
diff --git a/opencti-platform/opencti-front/src/private/components/observations/indicators/IndicatorObservables.jsx b/opencti-platform/opencti-front/src/private/components/observations/indicators/IndicatorObservables.jsx
index 6f602b6f71f4..09b6f7786495 100644
--- a/opencti-platform/opencti-front/src/private/components/observations/indicators/IndicatorObservables.jsx
+++ b/opencti-platform/opencti-front/src/private/components/observations/indicators/IndicatorObservables.jsx
@@ -34,35 +34,37 @@ const IndicatorObservablesComponent = ({ indicator }) => {
         />
       </Security>
       <div className="clearfix" />
-      <DataTableWithoutFragment
-        dataColumns={{
-          entity_type: {
-            percentWidth: 20,
-            isSortable: false,
-          },
-          observable_value: {
-            percentWidth: 60,
-            isSortable: false,
-          },
-          created_at: {
-            percentWidth: 20,
-            isSortable: false,
-          },
-        }}
-        data={observables}
-        globalCount={observablesGlobalCount}
-        rootRef={ref}
-        storageKey={`indicator-observables-${indicator.id}`}
-        variant={DataTableVariant.inline}
-        disableNavigation
-        actions={(observable) => (
-          <IndicatorObservablePopover
-            indicatorId={indicator.id}
-            observableId={observable.id}
-            onDelete={() => onDelete(observable.id)}
-          />
-        )}
-      />
+      <div style={{ marginTop: -30 }}>
+        <DataTableWithoutFragment
+          dataColumns={{
+            entity_type: {
+              percentWidth: 20,
+              isSortable: false,
+            },
+            observable_value: {
+              percentWidth: 55,
+              isSortable: false,
+            },
+            created_at: {
+              percentWidth: 25,
+              isSortable: false,
+            },
+          }}
+          data={observables}
+          globalCount={observablesGlobalCount}
+          rootRef={ref}
+          storageKey={`indicator-observables-${indicator.id}`}
+          variant={DataTableVariant.inline}
+          disableNavigation
+          actions={(observable) => (
+            <IndicatorObservablePopover
+              indicatorId={indicator.id}
+              observableId={observable.id}
+              onDelete={() => onDelete(observable.id)}
+            />
+          )}
+        />
+      </div>
     </div>
   );
 };
diff --git a/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableLine.jsx b/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableLine.jsx
index 9564b9c6cf83..dacac444cd8c 100644
--- a/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableLine.jsx
+++ b/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableLine.jsx
@@ -1,311 +1,54 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { createFragmentContainer, graphql } from 'react-relay';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import { KeyboardArrowRight } from '@mui/icons-material';
-import Checkbox from '@mui/material/Checkbox';
-import Skeleton from '@mui/material/Skeleton';
-import makeStyles from '@mui/styles/makeStyles';
-import { useFormatter } from '../../../../components/i18n';
-import StixCoreObjectLabels from '../../common/stix_core_objects/StixCoreObjectLabels';
-import ItemMarkings from '../../../../components/ItemMarkings';
-import { renderObservableValue } from '../../../../utils/String';
-import ItemIcon from '../../../../components/ItemIcon';
-import ItemEntityType from '../../../../components/ItemEntityType';
+import { graphql } from 'react-relay';
 
-// Deprecated - https://mui.com/system/styles/basics/
-// Do not use it for new code.
-const useStyles = makeStyles((theme) => ({
-  item: {
-    paddingLeft: 10,
-    height: 50,
-  },
-  itemIcon: {
-    color: theme.palette.primary.main,
-  },
-  bodyItem: {
-    height: 20,
-    fontSize: 13,
-    float: 'left',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    paddingRight: 10,
-  },
-  goIcon: {
-    position: 'absolute',
-    right: -10,
-  },
-  itemIconDisabled: {
-    color: theme.palette.grey[700],
-  },
-}));
-
-const StixCyberObservableLineComponent = ({
-  dataColumns,
-  node,
-  onLabelClick,
-  onToggleEntity,
-  selectedElements,
-  deSelectedElements,
-  selectAll,
-  onToggleShiftEntity,
-  index,
-}) => {
-  const classes = useStyles();
-  const { nsdt } = useFormatter();
-  return (
-    <ListItem
-      classes={{ root: classes.item }}
-      divider={true}
-      button={true}
-      component={Link}
-      to={`/dashboard/observations/${
-        node.entity_type === 'Artifact' ? 'artifacts' : 'observables'
-      }/${node.id}`}
-    >
-      <ListItemIcon
-        classes={{ root: classes.itemIcon }}
-        style={{ minWidth: 40 }}
-        onClick={(event) => (event.shiftKey
-          ? onToggleShiftEntity(index, node, event)
-          : onToggleEntity(node, event))
-        }
-      >
-        <Checkbox
-          edge="start"
-          checked={
-            (selectAll && !(node.id in (deSelectedElements || {})))
-            || node.id in (selectedElements || {})
-          }
-          disableRipple={true}
-        />
-      </ListItemIcon>
-      <ListItemIcon classes={{ root: classes.itemIcon }}>
-        <ItemIcon type={node.entity_type} />
-      </ListItemIcon>
-      <ListItemText
-        primary={
-          <div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.entity_type.width }}
-            >
-              <ItemEntityType entityType={node.entity_type} />
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.observable_value.width }}
-            >
-              {renderObservableValue(node)}
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.createdBy.width }}
-            >
-              {node.createdBy?.name}
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.creator.width }}
-            >
-              {(node.creators ?? []).map((c) => c?.name).join(', ')}
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.objectLabel.width }}
-            >
-              <StixCoreObjectLabels
-                variant="inList"
-                labels={node.objectLabel}
-                onClick={onLabelClick}
-              />
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.created_at.width }}
-            >
-              {nsdt(node.created_at)}
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.objectMarking.width }}
-            >
-              <ItemMarkings
-                variant="inList"
-                markingDefinitions={node.objectMarking ?? []}
-                limit={1}
-              />
-            </div>
-          </div>
-        }
-      />
-      <ListItemIcon classes={{ root: classes.goIcon }}>
-        <KeyboardArrowRight />
-      </ListItemIcon>
-    </ListItem>
-  );
-};
-
-export const StixCyberObservableLine = createFragmentContainer(
-  StixCyberObservableLineComponent,
-  {
-    node: graphql`
-      fragment StixCyberObservableLine_node on StixCyberObservable {
+// eslint-disable-next-line import/prefer-default-export
+export const stixCyberObservableLineFragment = graphql`
+  fragment StixCyberObservableLine_node on StixCyberObservable {
+    id
+    entity_type
+    parent_types
+    observable_value
+    created_at
+    createdBy {
+      ... on Identity {
         id
+        name
         entity_type
-        parent_types
-        observable_value
-        created_at
-        createdBy {
-          ... on Identity {
-            id
+      }
+    }
+    ... on IPv4Addr {
+      countries {
+        edges {
+          node {
             name
-            entity_type
-          }
-        }
-        ... on IPv4Addr {
-          countries {
-            edges {
-              node {
-                name
-                x_opencti_aliases
-              }
-            }
+            x_opencti_aliases
           }
         }
-        ... on IPv6Addr {
-          countries {
-            edges {
-              node {
-                name
-                x_opencti_aliases
-              }
-            }
+      }
+    }
+    ... on IPv6Addr {
+      countries {
+        edges {
+          node {
+            name
+            x_opencti_aliases
           }
         }
-        objectMarking {
-          id
-          definition
-          x_opencti_order
-          x_opencti_color
-        }
-        objectLabel {
-          id
-          value
-          color
-        }
-        creators {
-          id
-          name
-        }
       }
-    `,
-  },
-);
-
-export const StixCyberObservableLineDummy = (props) => {
-  const classes = useStyles();
-  const { dataColumns } = props;
-  return (
-    <ListItem classes={{ root: classes.item }} divider={true}>
-      <ListItemIcon
-        classes={{ root: classes.itemIconDisabled }}
-        style={{ minWidth: 40 }}
-      >
-        <Checkbox edge="start" disabled={true} disableRipple={true} />
-      </ListItemIcon>
-      <ListItemIcon classes={{ root: classes.itemIcon }}>
-        <Skeleton animation="wave" variant="circular" width={30} height={30} />
-      </ListItemIcon>
-      <ListItemText
-        primary={
-          <div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.entity_type.width }}
-            >
-              <Skeleton
-                animation="wave"
-                variant="rectangular"
-                width="90%"
-                height="100%"
-              />
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.observable_value.width }}
-            >
-              <Skeleton
-                animation="wave"
-                variant="rectangular"
-                width="90%"
-                height="100%"
-              />
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.createdBy.width }}
-            >
-              <Skeleton
-                animation="wave"
-                variant="rectangular"
-                width="90%"
-                height="100%"
-              />
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.creator.width }}
-            >
-              <Skeleton
-                animation="wave"
-                variant="rectangular"
-                width="90%"
-                height="100%"
-              />
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.objectLabel.width }}
-            >
-              <Skeleton
-                animation="wave"
-                variant="rectangular"
-                width="90%"
-                height="100%"
-              />
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.created_at.width }}
-            >
-              <Skeleton
-                animation="wave"
-                variant="rectangular"
-                width={140}
-                height="100%"
-              />
-            </div>
-            <div
-              className={classes.bodyItem}
-              style={{ width: dataColumns.objectMarking.width }}
-            >
-              <Skeleton
-                animation="wave"
-                variant="rectangular"
-                width={100}
-                height="100%"
-              />
-            </div>
-          </div>
-        }
-      />
-      <ListItemIcon classes={{ root: classes.goIcon }}>
-        <KeyboardArrowRight />
-      </ListItemIcon>
-    </ListItem>
-  );
-};
+    }
+    objectMarking {
+      id
+      definition
+      x_opencti_order
+      x_opencti_color
+    }
+    objectLabel {
+      id
+      value
+      color
+    }
+    creators {
+      id
+      name
+    }
+  }
+`;
diff --git a/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservablesLines.jsx b/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservablesLines.jsx
index 25597e8557b6..d94de949668a 100644
--- a/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservablesLines.jsx
+++ b/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservablesLines.jsx
@@ -1,79 +1,4 @@
-import React, { Component } from 'react';
-import * as PropTypes from 'prop-types';
-import { graphql, createPaginationContainer } from 'react-relay';
-import { pathOr } from 'ramda';
-import ListLinesContent from '../../../../components/list_lines/ListLinesContent';
-import { StixCyberObservableLine, StixCyberObservableLineDummy } from './StixCyberObservableLine';
-import { setNumberOfElements } from '../../../../utils/Number';
-
-const nbOfRowsToLoad = 50;
-
-class StixCyberObservablesLines extends Component {
-  componentDidUpdate(prevProps) {
-    setNumberOfElements(
-      prevProps,
-      this.props,
-      'stixCyberObservables',
-      this.props.setNumberOfElements.bind(this),
-    );
-  }
-
-  render() {
-    const {
-      initialLoading,
-      dataColumns,
-      relay,
-      onLabelClick,
-      onToggleEntity,
-      selectedElements,
-      deSelectedElements,
-      selectAll,
-    } = this.props;
-    return (
-      <ListLinesContent
-        initialLoading={initialLoading}
-        loadMore={relay.loadMore.bind(this)}
-        hasMore={relay.hasMore.bind(this)}
-        isLoading={relay.isLoading.bind(this)}
-        dataList={pathOr(
-          [],
-          ['stixCyberObservables', 'edges'],
-          this.props.data,
-        )}
-        globalCount={pathOr(
-          nbOfRowsToLoad,
-          ['stixCyberObservables', 'pageInfo', 'globalCount'],
-          this.props.data,
-        )}
-        LineComponent={<StixCyberObservableLine />}
-        DummyLineComponent={<StixCyberObservableLineDummy />}
-        dataColumns={dataColumns}
-        nbOfRowsToLoad={nbOfRowsToLoad}
-        onLabelClick={onLabelClick.bind(this)}
-        selectedElements={selectedElements}
-        deSelectedElements={deSelectedElements}
-        selectAll={selectAll}
-        onToggleEntity={onToggleEntity.bind(this)}
-      />
-    );
-  }
-}
-
-StixCyberObservablesLines.propTypes = {
-  classes: PropTypes.object,
-  paginationOptions: PropTypes.object,
-  dataColumns: PropTypes.object.isRequired,
-  data: PropTypes.object,
-  relay: PropTypes.object,
-  stixCyberObservables: PropTypes.object,
-  initialLoading: PropTypes.bool,
-  onLabelClick: PropTypes.func,
-  setNumberOfElements: PropTypes.func,
-  onToggleEntity: PropTypes.func,
-  selectedElements: PropTypes.object,
-  deSelectedElements: PropTypes.object,
-  selectAll: PropTypes.bool,
-};
+import { graphql } from 'react-relay';
 
 export const stixCyberObservablesLinesSubTypesQuery = graphql`
   query StixCyberObservablesLinesSubTypesQuery($type: String!) {
@@ -150,79 +75,51 @@ export const stixCyberObservablesLinesSearchQuery = graphql`
   }
 `;
 
-export default createPaginationContainer(
-  StixCyberObservablesLines,
-  {
-    data: graphql`
-      fragment StixCyberObservablesLines_data on Query
-      @argumentDefinitions(
-        types: { type: "[String]" }
-        search: { type: "String" }
-        count: { type: "Int", defaultValue: 25 }
-        cursor: { type: "ID" }
-        orderBy: {
-          type: "StixCyberObservablesOrdering"
-          defaultValue: created_at
-        }
-        orderMode: { type: "OrderingMode", defaultValue: asc }
-        filters: { type: "FilterGroup" }
-      ) {
-        stixCyberObservables(
-          types: $types
-          search: $search
-          first: $count
-          after: $cursor
-          orderBy: $orderBy
-          orderMode: $orderMode
-          filters: $filters
-        ) @connection(key: "Pagination_stixCyberObservables") {
-          edges {
-            node {
-              id
-              standard_id
-              entity_type
-              observable_value
-              created_at
-              objectMarking {
-                id
-                definition
-                x_opencti_order
-                x_opencti_color
-              }
-              ...StixCyberObservableLine_node
-            }
-          }
-          pageInfo {
-            endCursor
-            hasNextPage
-            globalCount
+export const stixCyberObservablesLinesFragment = graphql`
+  fragment StixCyberObservablesLines_data on Query
+  @argumentDefinitions(
+    types: { type: "[String]" }
+    search: { type: "String" }
+    count: { type: "Int", defaultValue: 25 }
+    cursor: { type: "ID" }
+    orderBy: {
+      type: "StixCyberObservablesOrdering"
+      defaultValue: created_at
+    }
+    orderMode: { type: "OrderingMode", defaultValue: asc }
+    filters: { type: "FilterGroup" }
+  )
+  @refetchable(queryName: "StixCyberObservablesLinesRefetchQuery") {
+    stixCyberObservables(
+      types: $types
+      search: $search
+      first: $count
+      after: $cursor
+      orderBy: $orderBy
+      orderMode: $orderMode
+      filters: $filters
+    ) @connection(key: "Pagination_stixCyberObservables") {
+      edges {
+        node {
+          id
+          standard_id
+          entity_type
+          observable_value
+          created_at
+          objectMarking {
+            id
+            definition
+            x_opencti_order
+            x_opencti_color
           }
+          ...StixCyberObservableLine_node
         }
       }
-    `,
-  },
-  {
-    direction: 'forward',
-    getConnectionFromProps(props) {
-      return props.data && props.data.stixCyberObservables;
-    },
-    getFragmentVariables(prevVars, totalCount) {
-      return {
-        ...prevVars,
-        count: totalCount,
-      };
-    },
-    getVariables(props, { count, cursor }, fragmentVariables) {
-      return {
-        types: fragmentVariables.types,
-        search: fragmentVariables.search,
-        count,
-        cursor,
-        orderBy: fragmentVariables.orderBy,
-        orderMode: fragmentVariables.orderMode,
-        filters: fragmentVariables.filters,
-      };
-    },
-    query: stixCyberObservablesLinesQuery,
-  },
-);
+      pageInfo {
+        endCursor
+        hasNextPage
+        globalCount
+      }
+    }
+  }
+  `;
diff --git a/opencti-platform/opencti-front/src/private/components/settings/Labels.jsx b/opencti-platform/opencti-front/src/private/components/settings/Labels.jsx
index e2a51614bf33..0b6eaae41c79 100644
--- a/opencti-platform/opencti-front/src/private/components/settings/Labels.jsx
+++ b/opencti-platform/opencti-front/src/private/components/settings/Labels.jsx
@@ -15,7 +15,7 @@ import { emptyFilterGroup, useBuildEntityTypeBasedFilterContext } from '../../..
 const useStyles = makeStyles(() => ({
   container: {
     margin: 0,
-    padding: '0 200px 0 0',
+    padding: '0 180px 0 0',
     maxWidth: '100%',
   },
 }));
diff --git a/opencti-platform/opencti-front/src/private/components/settings/retention/RetentionPopover.jsx b/opencti-platform/opencti-front/src/private/components/settings/retention/RetentionPopover.jsx
index 41d2226a5428..412b188d1295 100644
--- a/opencti-platform/opencti-front/src/private/components/settings/retention/RetentionPopover.jsx
+++ b/opencti-platform/opencti-front/src/private/components/settings/retention/RetentionPopover.jsx
@@ -15,7 +15,6 @@ import Slide from '@mui/material/Slide';
 import MoreVert from '@mui/icons-material/MoreVert';
 import inject18n from '../../../../components/i18n';
 import { commitMutation, QueryRenderer } from '../../../../relay/environment';
-import Loader from '../../../../components/Loader';
 import RetentionEdition from './RetentionEdition';
 import { deleteNode } from '../../../../utils/store';
 
@@ -147,7 +146,7 @@ class RetentionPopover extends Component {
                 />
               );
             }
-            return <Loader variant="inElement" />;
+            return null;
           }}
         />
         <Dialog
diff --git a/opencti-platform/opencti-front/src/private/components/settings/roles/RolePopover.jsx b/opencti-platform/opencti-front/src/private/components/settings/roles/RolePopover.jsx
index 93ba0f6ff7d9..791dcc16c255 100644
--- a/opencti-platform/opencti-front/src/private/components/settings/roles/RolePopover.jsx
+++ b/opencti-platform/opencti-front/src/private/components/settings/roles/RolePopover.jsx
@@ -15,7 +15,6 @@ import Slide from '@mui/material/Slide';
 import MoreVert from '@mui/icons-material/MoreVert';
 import inject18n from '../../../../components/i18n';
 import { commitMutation, QueryRenderer } from '../../../../relay/environment';
-import Loader from '../../../../components/Loader';
 import RoleEdition from './RoleEdition';
 import withRouter from '../../../../utils/compat_router/withRouter';
 
@@ -150,7 +149,7 @@ class RolePopover extends Component {
                 />
               );
             }
-            return <Loader variant="inElement" />;
+            return null;
           }}
         />
         <Dialog
diff --git a/opencti-platform/opencti-front/src/private/components/techniques/Narratives.tsx b/opencti-platform/opencti-front/src/private/components/techniques/Narratives.tsx
index d9d730300e3a..449dfbca8391 100644
--- a/opencti-platform/opencti-front/src/private/components/techniques/Narratives.tsx
+++ b/opencti-platform/opencti-front/src/private/components/techniques/Narratives.tsx
@@ -80,8 +80,10 @@ const Narratives: FunctionComponent = () => {
             keyword={searchTerm}
           />
           <div style={{
-            marginTop: -5,
-            marginRight: 35,
+            marginTop: 0,
+            marginRight: 0,
+            display: 'flex',
+            alignItems: 'center',
           }}
           >
             <ToggleButtonGroup
@@ -97,6 +99,11 @@ const Narratives: FunctionComponent = () => {
                 enableSubEntityLines={true}
               />
             </ToggleButtonGroup>
+            {isFABReplaced && (
+              <Security needs={[KNOWLEDGE_KNUPDATE, KNOWLEDGE_KNPARTICIPATE]}>
+                <NarrativeCreation paginationOptions={queryPaginationOptions} />
+              </Security>
+            )}
           </div>
         </div>
         <div className="clearfix" />
@@ -177,7 +184,7 @@ const Narratives: FunctionComponent = () => {
                     value="lines"
                     aria-label="lines"
                   >
-                    <FiligranIcon icon={ListViewIcon} color="primary" size="small" />
+                    <FiligranIcon icon={ListViewIcon} color="secondary" size="small" />
                   </ToggleButton>
                 </Tooltip>
               ),
@@ -188,7 +195,7 @@ const Narratives: FunctionComponent = () => {
                     aria-label="subEntityLines"
                     style={{ height: 36 }}
                   >
-                    <FiligranIcon icon={SublistViewIcon} color="secondary" size="small" />
+                    <FiligranIcon icon={SublistViewIcon} color="primary" size="small" />
                   </ToggleButton>
                 </Tooltip>
               )]}
diff --git a/opencti-platform/opencti-front/src/private/components/techniques/attack_patterns/AttackPatternEdition.jsx b/opencti-platform/opencti-front/src/private/components/techniques/attack_patterns/AttackPatternEdition.jsx
index 37854abe9e43..be38d9eceebb 100644
--- a/opencti-platform/opencti-front/src/private/components/techniques/attack_patterns/AttackPatternEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/techniques/attack_patterns/AttackPatternEdition.jsx
@@ -43,7 +43,7 @@ class AttackPatternEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/techniques/courses_of_action/CourseOfActionEdition.jsx b/opencti-platform/opencti-front/src/private/components/techniques/courses_of_action/CourseOfActionEdition.jsx
index b4b78108d555..6ed0699da333 100644
--- a/opencti-platform/opencti-front/src/private/components/techniques/courses_of_action/CourseOfActionEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/techniques/courses_of_action/CourseOfActionEdition.jsx
@@ -44,7 +44,7 @@ class CourseOfActionEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/techniques/narratives/NarrativeEdition.jsx b/opencti-platform/opencti-front/src/private/components/techniques/narratives/NarrativeEdition.jsx
index 597e44f2690a..3c6f59fb61a1 100644
--- a/opencti-platform/opencti-front/src/private/components/techniques/narratives/NarrativeEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/techniques/narratives/NarrativeEdition.jsx
@@ -44,7 +44,7 @@ class NarrativeEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/threats/Campaigns.tsx b/opencti-platform/opencti-front/src/private/components/threats/Campaigns.tsx
index 507b2bbf7011..60d9d13e4e00 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/Campaigns.tsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/Campaigns.tsx
@@ -176,9 +176,9 @@ const Campaigns = () => {
                   <ViewModuleOutlined fontSize="small" color="primary" />
                 </Tooltip>
               </ToggleButton>),
-              (<ToggleButton key="cards" value="lines" aria-label="lines">
+              (<ToggleButton key="lines" value="lines" aria-label="lines">
                 <Tooltip title={t_i18n('Lines view')}>
-                  <ViewListOutlined color="primary" fontSize="small" />
+                  <ViewListOutlined color="secondary" fontSize="small" />
                 </Tooltip>
               </ToggleButton>),
             ]}
diff --git a/opencti-platform/opencti-front/src/private/components/threats/IntrusionSets.tsx b/opencti-platform/opencti-front/src/private/components/threats/IntrusionSets.tsx
index ed4b1b2591e7..48da9600576b 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/IntrusionSets.tsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/IntrusionSets.tsx
@@ -168,9 +168,9 @@ const IntrusionSets = () => {
                   <ViewModuleOutlined fontSize="small" color="primary" />
                 </Tooltip>
               </ToggleButton>),
-              (<ToggleButton key="cards" value="lines" aria-label="lines">
+              (<ToggleButton key="lines" value="lines" aria-label="lines">
                 <Tooltip title={t_i18n('Lines view')}>
-                  <ViewListOutlined color="primary" fontSize="small" />
+                  <ViewListOutlined color="secondary" fontSize="small" />
                 </Tooltip>
               </ToggleButton>),
             ]}
diff --git a/opencti-platform/opencti-front/src/private/components/threats/ThreatActorsGroup.tsx b/opencti-platform/opencti-front/src/private/components/threats/ThreatActorsGroup.tsx
index 663585dc1202..8ce31867f46e 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/ThreatActorsGroup.tsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/ThreatActorsGroup.tsx
@@ -172,9 +172,9 @@ const ThreatActorsGroup = () => {
                   <ViewModuleOutlined fontSize="small" color="primary" />
                 </Tooltip>
               </ToggleButton>),
-              (<ToggleButton key="cards" value="lines" aria-label="lines">
+              (<ToggleButton key="lines" value="lines" aria-label="lines">
                 <Tooltip title={t_i18n('Lines view')}>
-                  <ViewListOutlined color="primary" fontSize="small" />
+                  <ViewListOutlined color="secondary" fontSize="small" />
                 </Tooltip>
               </ToggleButton>),
             ]}
diff --git a/opencti-platform/opencti-front/src/private/components/threats/ThreatActorsIndividual.tsx b/opencti-platform/opencti-front/src/private/components/threats/ThreatActorsIndividual.tsx
index e8c84082f1d8..8c30bd778f75 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/ThreatActorsIndividual.tsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/ThreatActorsIndividual.tsx
@@ -177,7 +177,7 @@ const ThreatActorsIndividual = () => {
               </ToggleButton>),
               (<ToggleButton key="lines" value="lines" aria-label="lines">
                 <Tooltip title={t_i18n('Lines view')}>
-                  <ViewListOutlined color="primary" fontSize="small" />
+                  <ViewListOutlined color="secondary" fontSize="small" />
                 </Tooltip>
               </ToggleButton>),
             ]}
diff --git a/opencti-platform/opencti-front/src/private/components/threats/campaigns/CampaignEdition.jsx b/opencti-platform/opencti-front/src/private/components/threats/campaigns/CampaignEdition.jsx
index 25b8af0562f0..ad5f0e2cfeab 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/campaigns/CampaignEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/campaigns/CampaignEdition.jsx
@@ -54,7 +54,7 @@ class CampaignEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/threats/intrusion_sets/IntrusionSetEdition.jsx b/opencti-platform/opencti-front/src/private/components/threats/intrusion_sets/IntrusionSetEdition.jsx
index 4d5c928ca3b7..dbd5342e5533 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/intrusion_sets/IntrusionSetEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/intrusion_sets/IntrusionSetEdition.jsx
@@ -44,7 +44,7 @@ class IntrusionSetEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_group/ThreatActorGroupEdition.jsx b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_group/ThreatActorGroupEdition.jsx
index 234eed6da3ff..af79982e4da0 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_group/ThreatActorGroupEdition.jsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_group/ThreatActorGroupEdition.jsx
@@ -53,7 +53,7 @@ class ThreatActorGroupEdition extends Component {
               />
             );
           }
-          return <Loader variant="inElement" />;
+          return <Loader variant="inline" />;
         }}
       />
     );
diff --git a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_group/ThreatActorGroupLocation.jsx b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_group/ThreatActorGroupLocation.jsx
index 80c9194b76a0..86897be3f4c0 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_group/ThreatActorGroupLocation.jsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_group/ThreatActorGroupLocation.jsx
@@ -21,6 +21,7 @@ import Security from '../../../../utils/Security';
 import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
 import AddLocationsThreatActorGroup from './AddLocationsThreatActorGroup';
 import { addLocationsThreatActorGroupMutationRelationDelete } from './AddLocationsThreatActorGroupLines';
+import FieldOrEmpty from '../../../../components/FieldOrEmpty';
 
 class ThreatActorGroupLocationsComponent extends Component {
   removeLocation(locationEdge) {
@@ -60,62 +61,59 @@ class ThreatActorGroupLocationsComponent extends Component {
           />
         </Security>
         <div className="clearfix" />
-        <List style={{ marginTop: -10 }}>
-          {threatActorGroup.locations.edges.length === 0 && (
-            <ListItem dense={true} divider={true} button={false}>
-              <ListItemText primary="-" />
-            </ListItem>
-          )}
-          {threatActorGroup.locations.edges.map((locationEdge) => {
-            const { types } = locationEdge;
-            const location = locationEdge.node;
-            const link = resolveLink(location.entity_type);
-            const flag = location.entity_type === 'Country'
+        <FieldOrEmpty source={threatActorGroup.locations.edges}>
+          <List style={{ marginTop: -10 }}>
+            {threatActorGroup.locations.edges.map((locationEdge) => {
+              const { types } = locationEdge;
+              const location = locationEdge.node;
+              const link = resolveLink(location.entity_type);
+              const flag = location.entity_type === 'Country'
               && R.head(
                 (location.x_opencti_aliases ?? []).filter(
                   (n) => n?.length === 2,
                 ),
               );
-            return (
-              <ListItem
-                key={location.id}
-                dense={true}
-                divider={true}
-                button={true}
-                component={Link}
-                to={`${link}/${location.id}`}
-              >
-                <ListItemIcon>
+              return (
+                <ListItem
+                  key={location.id}
+                  dense={true}
+                  divider={true}
+                  button={true}
+                  component={Link}
+                  to={`${link}/${location.id}`}
+                >
                   <ListItemIcon>
-                    {flag ? (
-                      <img
-                        style={{ width: 20 }}
-                        src={`${APP_BASE_PATH}/static/flags/4x3/${flag.toLowerCase()}.svg`}
-                        alt={location.name}
-                      />
-                    ) : (
-                      <ItemIcon type={location.entity_type} />
-                    )}
+                    <ListItemIcon>
+                      {flag ? (
+                        <img
+                          style={{ width: 20 }}
+                          src={`${APP_BASE_PATH}/static/flags/4x3/${flag.toLowerCase()}.svg`}
+                          alt={location.name}
+                        />
+                      ) : (
+                        <ItemIcon type={location.entity_type} />
+                      )}
+                    </ListItemIcon>
                   </ListItemIcon>
-                </ListItemIcon>
-                <ListItemText primary={location.name} />
-                {types.includes('manual') ? (
-                  <ListItemSecondaryAction>
-                    <Security needs={[KNOWLEDGE_KNUPDATE]}>
-                      <IconButton
-                        aria-label="Remove"
-                        onClick={() => this.removeLocation(locationEdge)}
-                        size="large"
-                      >
-                        <LinkOff />
-                      </IconButton>
-                    </Security>
-                  </ListItemSecondaryAction>
-                ) : <AutoFix fontSize="small" style={{ marginRight: 13 }}/>}
-              </ListItem>
-            );
-          })}
-        </List>
+                  <ListItemText primary={location.name} />
+                  {types.includes('manual') ? (
+                    <ListItemSecondaryAction>
+                      <Security needs={[KNOWLEDGE_KNUPDATE]}>
+                        <IconButton
+                          aria-label="Remove"
+                          onClick={() => this.removeLocation(locationEdge)}
+                          size="large"
+                        >
+                          <LinkOff />
+                        </IconButton>
+                      </Security>
+                    </ListItemSecondaryAction>
+                  ) : <AutoFix fontSize="small" style={{ marginRight: 13 }}/>}
+                </ListItem>
+              );
+            })}
+          </List>
+        </FieldOrEmpty>
       </>
     );
   }
diff --git a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/AddIndividualsThreatActorIndividual.tsx b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/AddIndividualsThreatActorIndividual.tsx
index 77f3ad2c63b2..d61fe4c1d24c 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/AddIndividualsThreatActorIndividual.tsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/AddIndividualsThreatActorIndividual.tsx
@@ -35,25 +35,15 @@ AddIndividualsThreatActorIndividualProps
       count: 50,
     },
   );
-  const getRelationships = () => {
-    const relations = [];
-    for (const { node } of threatActorIndividual.stixCoreRelationships?.edges ?? []) {
-      const { relationship_type } = node ?? {};
-      if (relationship_type === 'impersonates') relations.push(node);
-    }
-    return relations;
-  };
 
   return (<div>
-    {(getRelationships().length > 0) && (
-      <IconButton
-        color='primary'
-        style={{ marginTop: '-11px' }}
-        onClick={handleOpen}
-      >
-        <Add fontSize="small" />
-      </IconButton>
-    )}
+    <IconButton
+      color='primary'
+      style={{ marginTop: '-11px' }}
+      onClick={handleOpen}
+    >
+      <Add fontSize="small" />
+    </IconButton>
     <Drawer
       open={open}
       onClose={handleClose}
diff --git a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/AddPersonasThreatActorIndividual.tsx b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/AddPersonasThreatActorIndividual.tsx
index 8542427786da..e335b43ecc66 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/AddPersonasThreatActorIndividual.tsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/AddPersonasThreatActorIndividual.tsx
@@ -36,25 +36,14 @@ AddPersonaThreatActorIndividualProps
     },
   );
 
-  const getRelationships = () => {
-    const relations = [];
-    for (const { node } of threatActorIndividual.stixCoreRelationships?.edges ?? []) {
-      const { relationship_type } = node ?? {};
-      if (relationship_type === 'known-as') relations.push(node);
-    }
-    return relations;
-  };
-
   return (<div>
-    {(getRelationships().length > 0) && (
-      <IconButton
-        color='primary'
-        style={{ marginTop: '-11px' }}
-        onClick={handleOpen}
-      >
-        <Add fontSize="small" />
-      </IconButton>
-    )}
+    <IconButton
+      color='primary'
+      style={{ marginTop: '-11px' }}
+      onClick={handleOpen}
+    >
+      <Add fontSize="small" />
+    </IconButton>
     <Drawer
       open={open}
       onClose={handleClose}
diff --git a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/ThreatActorIndividualDetailsChips.tsx b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/ThreatActorIndividualDetailsChips.tsx
index 0b077cd70463..25e7f4edfc81 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/ThreatActorIndividualDetailsChips.tsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/ThreatActorIndividualDetailsChips.tsx
@@ -5,6 +5,7 @@ import { KNOWLEDGE_KNUPDATE } from 'src/utils/hooks/useGranted';
 import { ThreatActorIndividualDetails_ThreatActorIndividual$data } from './__generated__/ThreatActorIndividualDetails_ThreatActorIndividual.graphql';
 import AddPersonaThreatActorIndividual from './AddPersonasThreatActorIndividual';
 import AddIndividualsThreatActorIndividual from './AddIndividualsThreatActorIndividual';
+import FieldOrEmpty from '../../../../components/FieldOrEmpty';
 
 type SupportedTypes = 'known-as' | 'impersonates';
 type SupportedFields = 'persona_name' | 'name';
@@ -59,43 +60,45 @@ ThreatActorIndividualDetailsChipsProps
     setNodes(getRelationshipsOfType(relType));
   }, [data]);
 
-  // Hide if there are no valid relations
-
-  return (<div style={nodes.length > 0 ? { marginBottom: '20px' } : {}}>
-    <div style={{
-      display: 'flex',
-      flexDirection: 'row',
-    }}
-    >
-      {(nodes.length > 0) && (
-      <Typography
-        variant="h3"
-        gutterBottom={true}
-      >
-        {title}
-      </Typography>)}
-      <Security
-        needs={[KNOWLEDGE_KNUPDATE]}
-        placeholder={<div style={{ height: 29 }} />}
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'row',
+      }}
       >
-        <AddComponent threatActorIndividual={data} />
-      </Security>
-    </div>
-    <div className='clearfix' />
-    {(nodes.length > 0) && (
-      nodes.map(({ id, to }) => (
-        <Button
-          key={id}
-          variant='outlined'
-          size='small'
-          href={`${path}/${to?.id}`}
-          style={{ margin: '0 5px 5px 0' }}
+
+        <Typography
+          variant="h3"
+          gutterBottom={true}
+        >
+          {title}
+        </Typography>
+        <Security
+          needs={[KNOWLEDGE_KNUPDATE]}
+          placeholder={<div style={{ height: 29 }} />}
         >
-          {to?.[field]}
-        </Button>
-      ))
-    )}
-  </div>);
+          <AddComponent threatActorIndividual={data} />
+        </Security>
+      </div>
+      <div className='clearfix' />
+      <FieldOrEmpty source={nodes}>
+        {
+        nodes.map(({ id, to }) => (
+          <Button
+            key={id}
+            variant='outlined'
+            size='small'
+            href={`${path}/${to?.id}`}
+            style={{ margin: '0 5px 5px 0' }}
+          >
+            {to?.[field]}
+          </Button>
+        ))
+      }
+      </FieldOrEmpty>
+    </div>
+  );
 };
 
 export default ThreatActorIndividualDetailsChips;
diff --git a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/ThreatActorIndividualLocation.jsx b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/ThreatActorIndividualLocation.jsx
index 38841e9587a8..563ef891864b 100644
--- a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/ThreatActorIndividualLocation.jsx
+++ b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_individual/ThreatActorIndividualLocation.jsx
@@ -63,7 +63,7 @@ class ThreatActorIndividualLocationsComponent extends Component {
           />
         </Security>
         <div className="clearfix" />
-        <FieldOrEmpty source={threatActorIndividual.locations}>
+        <FieldOrEmpty source={threatActorIndividual.locations.edges}>
           <List style={{ marginTop: -10 }}>
             {threatActorIndividual.locations.edges.map((locationEdge) => {
               const { types } = locationEdge;
diff --git a/opencti-platform/opencti-front/src/private/components/workspaces/Workspaces.tsx b/opencti-platform/opencti-front/src/private/components/workspaces/Workspaces.tsx
index a68f76aaaed1..b6e6c9a5d447 100644
--- a/opencti-platform/opencti-front/src/private/components/workspaces/Workspaces.tsx
+++ b/opencti-platform/opencti-front/src/private/components/workspaces/Workspaces.tsx
@@ -2,9 +2,6 @@ import React, { FunctionComponent } from 'react';
 import useHelper from 'src/utils/hooks/useHelper';
 import { WorkspacesLinesPaginationQuery, WorkspacesLinesPaginationQuery$variables } from '@components/workspaces/__generated__/WorkspacesLinesPaginationQuery.graphql';
 import { WorkspaceLineDummy, workspaceLineFragment } from '@components/workspaces/WorkspaceLine';
-import ToggleButton from '@mui/material/ToggleButton';
-import Tooltip from '@mui/material/Tooltip';
-import { ViewListOutlined } from '@mui/icons-material';
 import { WorkspacesLines_data$data } from '@components/workspaces/__generated__/WorkspacesLines_data.graphql';
 import WorkspacePopover from '@components/workspaces/WorkspacePopover';
 import ListLines from '../../../components/list_lines/ListLines';
@@ -130,13 +127,6 @@ const Workspaces: FunctionComponent<WorkspacesProps> = ({
         lineFragment={workspaceLineFragment}
         entityTypes={['Workspace']}
         searchContextFinal={{ entityTypes: ['Workspace'] }}
-        additionalHeaderButtons={[
-          <ToggleButton key="cards" value="lines" aria-label="lines">
-            <Tooltip title={t_i18n('Lines view')}>
-              <ViewListOutlined color="primary" fontSize="small"/>
-            </Tooltip>
-          </ToggleButton>,
-        ]}
         createButton={isFeatureEnable('FAB_REPLACEMENT') && (
           <Security needs={[EXPLORE_EXUPDATE, INVESTIGATION_INUPDATE]}>
             <WorkspaceCreation
diff --git a/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/public_dashboards/PublicDashboards.tsx b/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/public_dashboards/PublicDashboards.tsx
index 3140be67b91a..dab78c395d9d 100644
--- a/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/public_dashboards/PublicDashboards.tsx
+++ b/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/public_dashboards/PublicDashboards.tsx
@@ -1,7 +1,4 @@
 import React from 'react';
-import ToggleButton from '@mui/material/ToggleButton';
-import Tooltip from '@mui/material/Tooltip';
-import { ViewListOutlined } from '@mui/icons-material';
 import { graphql } from 'react-relay';
 import PublicDashboardLineActions from './PublicDashboardLineActions';
 import PublicDashboardCreation from './PublicDashboardCreation';
@@ -207,13 +204,6 @@ const PublicDashboards = () => {
           lineFragment={publicDashboardFragment}
           entityTypes={['PublicDashboard']}
           searchContextFinal={{ entityTypes: ['PublicDashboard'] }}
-          additionalHeaderButtons={[
-            <ToggleButton key="cards" value="lines" aria-label="lines">
-              <Tooltip title={t_i18n('Lines view')}>
-                <ViewListOutlined color="primary" fontSize="small"/>
-              </Tooltip>
-            </ToggleButton>,
-          ]}
           actions={(row) => (
             <PublicDashboardLineActions
               publicDashboard={row}
diff --git a/opencti-platform/opencti-front/src/public/components/dashboard/stix_core_objects/PublicStixCoreObjectsList.tsx b/opencti-platform/opencti-front/src/public/components/dashboard/stix_core_objects/PublicStixCoreObjectsList.tsx
index dc32f4efc9b2..991705ddd89e 100644
--- a/opencti-platform/opencti-front/src/public/components/dashboard/stix_core_objects/PublicStixCoreObjectsList.tsx
+++ b/opencti-platform/opencti-front/src/public/components/dashboard/stix_core_objects/PublicStixCoreObjectsList.tsx
@@ -1,5 +1,5 @@
 import { graphql, PreloadedQuery, usePreloadedQuery } from 'react-relay';
-import React from 'react';
+import React, { useRef } from 'react';
 import WidgetListCoreObjects from '../../../../components/dashboard/WidgetListCoreObjects';
 import WidgetNoData from '../../../../components/dashboard/WidgetNoData';
 import type { PublicWidgetContainerProps } from '../PublicWidgetContainerProps';
@@ -8,6 +8,7 @@ import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
 import WidgetContainer from '../../../../components/dashboard/WidgetContainer';
 import WidgetLoader from '../../../../components/dashboard/WidgetLoader';
 import { PublicStixCoreObjectsListQuery } from './__generated__/PublicStixCoreObjectsListQuery.graphql';
+import { DataTableProps } from '../../../../components/dataGrid/dataTableTypes';
 
 const publicStixCoreObjectsListQuery = graphql`
   query PublicStixCoreObjectsListQuery(
@@ -204,11 +205,13 @@ const publicStixCoreObjectsListQuery = graphql`
 interface PublicStixCoreObjectsListComponentProps {
   queryRef: PreloadedQuery<PublicStixCoreObjectsListQuery>
   dateAttribute: string
+  rootRef: DataTableProps['rootRef']
 }
 
 const PublicStixCoreObjectsListComponent = ({
   queryRef,
   dateAttribute,
+  rootRef,
 }: PublicStixCoreObjectsListComponentProps) => {
   const { publicStixCoreObjects } = usePreloadedQuery(
     publicStixCoreObjectsListQuery,
@@ -221,12 +224,15 @@ const PublicStixCoreObjectsListComponent = ({
         data={[...publicStixCoreObjects.edges]}
         dateAttribute={dateAttribute}
         publicWidget
+        rootRef={rootRef}
       />
     );
   }
   return <WidgetNoData />;
 };
 
+PublicStixCoreObjectsListComponent.displayName = 'PublicStixCoreObjectsListComponent';
+
 const PublicStixCoreObjectsList = ({
   uriKey,
   widget,
@@ -248,16 +254,20 @@ const PublicStixCoreObjectsList = ({
 
   const dateAttribute = dataSelection[0].date_attribute ?? 'created_at';
 
+  const rootRef = useRef<HTMLDivElement>(null);
+
   return (
     <WidgetContainer
       title={parameters.title ?? title ?? t_i18n('Entities number')}
       variant="inLine"
+      ref={rootRef}
     >
       {queryRef ? (
         <React.Suspense fallback={<WidgetLoader />}>
           <PublicStixCoreObjectsListComponent
             queryRef={queryRef}
             dateAttribute={dateAttribute}
+            rootRef={rootRef.current ?? undefined}
           />
         </React.Suspense>
       ) : (
diff --git a/opencti-platform/opencti-front/src/utils/filters/filtersUtils.tsx b/opencti-platform/opencti-front/src/utils/filters/filtersUtils.tsx
index c2fd13d4bd50..724fa99e4d93 100644
--- a/opencti-platform/opencti-front/src/utils/filters/filtersUtils.tsx
+++ b/opencti-platform/opencti-front/src/utils/filters/filtersUtils.tsx
@@ -96,7 +96,7 @@ export const stixFilters = [
 // utilities
 
 export const isFilterGroupNotEmpty = (filterGroup?: FilterGroup | null) => {
-  return (
+  return !!(
     filterGroup
     && (filterGroup.filters?.length > 0 || filterGroup.filterGroups?.length > 0)
   );
diff --git a/opencti-platform/opencti-front/src/utils/utils.ts b/opencti-platform/opencti-front/src/utils/utils.ts
index 33f9d78bc471..7437fbc56f37 100644
--- a/opencti-platform/opencti-front/src/utils/utils.ts
+++ b/opencti-platform/opencti-front/src/utils/utils.ts
@@ -90,3 +90,13 @@ export const getPaddingRight = (locationPath: string, entityId: string, entityTy
   }
   return paddingRight;
 };
+
+export const throttle = (callback: (...a: unknown[]) => unknown, wait: number) => {
+  let timeoutId: number;
+  return (...args: unknown[]) => {
+    window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback(...args);
+    }, wait);
+  };
+};
diff --git a/opencti-platform/opencti-front/tests_e2e/model/form/reportForm.pageModel.ts b/opencti-platform/opencti-front/tests_e2e/model/form/reportForm.pageModel.ts
index f5d4b2302c5f..bc0f751e60d8 100644
--- a/opencti-platform/opencti-front/tests_e2e/model/form/reportForm.pageModel.ts
+++ b/opencti-platform/opencti-front/tests_e2e/model/form/reportForm.pageModel.ts
@@ -6,7 +6,7 @@ import TextFieldPageModel from '../field/TextField.pageModel';
 import FileFieldPageModel from '../field/FileField.pageModel';
 
 export default class ReportFormPage {
-  nameField = new TextFieldPageModel(this.page, 'Name', 'text');
+  nameField = new TextFieldPageModel(this.page, 'Name', 'text-no-label');
   contentField = new TextFieldPageModel(this.page, 'Content', 'rich-content');
   descriptionField = new TextFieldPageModel(this.page, 'Description', 'text-area');