diff --git a/README.md b/README.md
index 0df40678..755a7aad 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,22 @@
 
 Library for sharing GridSuite apps commons components
 
-#### For developers
+
+## Use and integration
+### MUI & Emotion styles
+Some components of commons-ui define custom rules in Mui styling system that need
+to be initialized.  
+To have TypeScript helping (through module augmentation), you can in a `.d.ts`
+file at the root of your project source folder (like `globals.d.ts`):
+```ts
+/// <reference types="@gridsuite/commons-ui/module-mui" />
+/// <reference types="@gridsuite/commons-ui/module-emotion" />
+```
+Typescript will check the new options with function related to `Theme` interface.
+
+
+## Build & deploy
+### For developers
 
 The commons-ui library have a demo app in which you can call your components to test them.
 The `npm start` command install the library's dependencies then launches the demo app.
@@ -13,37 +28,38 @@ to build commons-ui via
 - `npm run build:pack`
 
 Then in the my-app project :
-- Change the commons-ui dependency in my-app's package.json from    
-`@gridsuite/commons-ui:"^x.x.x"`    
-to     
-`@gridsuite/commons-ui:"file:{PATH_TO_LIBRARY}/gridsuite-commons-ui-{LIBRARY_VERSION}.tgz"` 
+- Change the commons-ui dependency in my-app's `package.json`
+    from`@gridsuite/commons-ui:"^x.x.x"`
+    to `@gridsuite/commons-ui:"file:{PATH_TO_LIBRARY}/gridsuite-commons-ui-{LIBRARY_VERSION}.tgz"` 
 - `npm install`
 - `npm start`
 
-*Warning* : with Create React App, we realised the library was not updating correctly if you try to install the library multiple times.
-To fix this, run this command from the app **after** running "npm install"
-- rm -Rf node_modules/.cache
- 
+> [!WARNING]
+> with Create React App, we realised the library was not updating correctly if you try to install the library multiple times.  
+> To fix this, run this command from the app **after** running "npm install"
+> ```shell
+> rm -Rf node_modules/.cache
+> ```
+
 
-#### For integrators
+### For integrators
 
 If you want to deploy a new version of commons-ui in the [NPM package registry](https://www.npmjs.com/package/@gridsuite/commons-ui),
 you need to follow the steps below:
-
--   [Make a release action](https://github.com/gridsuite/commons-ui/actions/workflows/release.yml)
+  - [Make a release action](https://github.com/gridsuite/commons-ui/actions/workflows/release.yml)
   - In the 'run workflow' combobox select, let the branch on main
   - Enter the type of evolution (major | minor | patch)
   - Enter your NPM access token (it must be an **automation** access token to bypass 2FA, see the [access token documentation](https://docs.npmjs.com/creating-and-viewing-access-tokens) for details)
   - Click 'run workflow'
 
-#### License Headers and dependencies checking
 
-To check dependencies license compatibility with this project one locally, please run the following command :
+### License Headers and dependencies checking
 
-```
+To check dependencies license compatibility with this project one locally, please run the following command :
+```shell
 npm run licenses-check
 ```
 
-Notes : 
-* Check [license-checker-config.json](license-checker-config.json) for license white list and exclusion.
-If you need to update this list, please inform organization's owners.
+> [!NOTE]  
+> Check [license-checker-config.json](license-checker-config.json) for license whitelist and exclusion.
+> If you need to update this list, please inform organization's owners.
diff --git a/demo/src/TableTab.jsx b/demo/src/TableTab.jsx
index eef8b206..4c1f0dee 100644
--- a/demo/src/TableTab.jsx
+++ b/demo/src/TableTab.jsx
@@ -6,8 +6,7 @@
  */
 
 import { useCallback, useMemo, useState } from 'react';
-import { styled } from '@mui/system';
-import { Box, Button, FormControlLabel, Stack, Switch, TextField } from '@mui/material';
+import { Box, Button, FormControlLabel, Stack, styled, Switch, TextField } from '@mui/material';
 import { DEFAULT_CELL_PADDING } from '../../src';
 import {
     ChangeWays,
@@ -37,7 +36,7 @@ const evenThenOddOrderingKey = (n) => {
 };
 
 /**
- * @param {import('@mui/material/styles').Theme} theme Theme from ThemeProvider
+ * @param {import('@mui/material').Theme} theme Theme from ThemeProvider
  */
 const stylesVirtualizedTable = (theme) => ({
     '& .table': {
diff --git a/demo/src/app.jsx b/demo/src/app.jsx
index 3579c85b..6814d42f 100644
--- a/demo/src/app.jsx
+++ b/demo/src/app.jsx
@@ -44,8 +44,6 @@ import {
     testDataTree,
 } from '../data/TreeViewFinder';
 
-import LOGS_JSON from '../data/ReportViewer';
-
 import searchEquipments from '../data/EquipmentSearchBar';
 
 import TableTab from './TableTab';
@@ -55,60 +53,60 @@ import InputsTab from './InputsTab';
 import { EquipmentSearchDialog } from './equipment-search';
 import { InlineSearch } from './inline-search';
 import {
-    MultipleSelectionDialog,
-    OverflowableText,
-    SnackbarProvider,
-    TopBar,
-    TreeViewFinder,
-    CardErrorBoundary,
-    EquipmentItem,
     AuthenticationRouter,
-    reportViewerEn,
-    loginEn,
-    topBarEn,
-    tableEn,
-    treeviewFinderEn,
+    CardErrorBoundary,
+    cardErrorBoundaryEn,
+    cardErrorBoundaryFr,
+    commonButtonEn,
+    commonButtonFr,
+    csvEn,
+    csvFr,
+    descriptionEn,
+    descriptionFr,
     elementSearchEn,
+    elementSearchFr,
+    ElementType,
+    EquipmentItem,
     equipmentSearchEn,
+    equipmentSearchFr,
+    equipmentsEn,
+    equipmentsFr,
     filterEn,
     filterExpertEn,
-    descriptionEn,
-    equipmentsEn,
-    csvEn,
-    cardErrorBoundaryEn,
+    filterExpertFr,
+    filterFr,
     flatParametersEn,
-    multipleSelectionDialogEn,
+    flatParametersFr,
+    generateTreeViewFinderClass,
+    getFileIcon,
+    initializeAuthenticationDev,
     inputsEn,
     inputsFr,
-    multipleSelectionDialogFr,
-    flatParametersFr,
-    cardErrorBoundaryFr,
-    filterExpertFr,
-    csvFr,
-    equipmentsFr,
-    descriptionFr,
-    filterFr,
-    equipmentSearchFr,
-    elementSearchFr,
-    treeviewFinderFr,
-    tableFr,
-    topBarFr,
-    loginFr,
-    reportViewerFr,
-    LIGHT_THEME,
     LANG_ENGLISH,
-    LANG_SYSTEM,
     LANG_FRENCH,
-    ElementType,
-    getFileIcon,
-    initializeAuthenticationDev,
-    toNestedGlobalSelectors,
-    generateTreeViewFinderClass,
-    useSnackMessage,
-    commonButtonEn,
-    commonButtonFr,
+    LANG_SYSTEM,
+    LIGHT_THEME,
+    loginEn,
+    loginFr,
+    MultipleSelectionDialog,
+    multipleSelectionDialogEn,
+    multipleSelectionDialogFr,
     networkModificationsEn,
     networkModificationsFr,
+    OverflowableText,
+    reportViewerEn,
+    reportViewerFr,
+    SnackbarProvider,
+    tableEn,
+    tableFr,
+    toNestedGlobalSelectors,
+    TopBar,
+    topBarEn,
+    topBarFr,
+    TreeViewFinder,
+    treeviewFinderEn,
+    treeviewFinderFr,
+    useSnackMessage,
 } from '../../src';
 
 const messages = {
@@ -175,7 +173,7 @@ const getMuiTheme = (theme) => {
     return darkTheme;
 };
 
-const style = {
+const styles = {
     button: {
         float: 'left',
         margin: '5px',
@@ -183,7 +181,7 @@ const style = {
 };
 
 /**
- * @param {import('@mui/material/styles').Theme} theme Theme from ThemeProvider
+ * @param {import('@mui/material').Theme} theme Theme from ThemeProvider
  */
 const TreeViewFinderCustomStyles = (theme) => ({
     icon: {
@@ -196,6 +194,9 @@ const TreeViewFinderCustomStyles = (theme) => ({
     },
 });
 
+/**
+ * @param {import('@mui/material').Theme} theme Theme from ThemeProvider
+ */
 const TreeViewFinderCustomStylesEmotion = ({ theme }) =>
     toNestedGlobalSelectors(TreeViewFinderCustomStyles(theme), generateTreeViewFinderClass);
 const CustomTreeViewFinder = styled(TreeViewFinder)(TreeViewFinderCustomStylesEmotion);
@@ -215,7 +216,7 @@ function SnackErrorButton() {
         <Button
             variant="contained"
             color="error"
-            style={style.button}
+            style={styles.button}
             onClick={() => {
                 snackError({
                     messageTxt: 'Snack error message',
@@ -234,7 +235,7 @@ function SnackWarningButton() {
         <Button
             variant="contained"
             color="warning"
-            style={style.button}
+            style={styles.button}
             onClick={() => {
                 snackWarning({
                     messageTxt: 'Snack warning message',
@@ -253,7 +254,7 @@ function SnackInfoButton() {
         <Button
             variant="contained"
             color="info"
-            style={style.button}
+            style={styles.button}
             onClick={() => {
                 snackInfo({
                     messageTxt: 'Snack info message',
@@ -274,7 +275,7 @@ function PermanentSnackButton() {
             <Button
                 variant="contained"
                 color="info"
-                style={style.button}
+                style={styles.button}
                 onClick={() => {
                     const key = snackInfo({
                         messageTxt: 'Permanent Snack info message',
@@ -289,7 +290,7 @@ function PermanentSnackButton() {
             <Button
                 variant="contained"
                 color="info"
-                style={style.button}
+                style={styles.button}
                 onClick={() => {
                     closeSnackbar(snackKey);
                     setSnackKey(undefined);
diff --git a/package-lock.json b/package-lock.json
index 7c3a4bb9..9f231119 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -117,7 +117,6 @@
                 "@mui/icons-material": "^5.15.14",
                 "@mui/lab": "5.0.0-alpha.169",
                 "@mui/material": "^5.15.14",
-                "@mui/system": "^5.15.15",
                 "@mui/x-tree-view": "^6.17.0",
                 "ag-grid-community": "^31.0.0",
                 "ag-grid-react": "^31.2.0",
diff --git a/package.json b/package.json
index d92c752a..c32f8651 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,30 @@
 {
     "name": "@gridsuite/commons-ui",
     "version": "0.76.2",
-    "description": "common react components for gridsuite applications",
+    "description": "Common React components for GridSuite applications",
     "engines": {
         "npm": ">=9",
         "node": ">=18"
     },
-    "exports": "./dist/index.js",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./module-mui": {
+            "types": "./src/module-mui.d.ts"
+        },
+        "./module-emotion": {
+            "types": "./src/module-emotion.d.ts"
+        },
+        "./package.json": "./package.json"
+    },
     "files": [
-        "dist"
+        "dist",
+        "src/module-mui.d.ts",
+        "src/module-emotion.d.ts"
     ],
     "sideEffects": [
         "**/*.css"
@@ -53,7 +67,6 @@
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",
         "@mui/material": "^5.15.14",
-        "@mui/system": "^5.15.15",
         "@mui/x-tree-view": "^6.17.0",
         "ag-grid-community": "^31.0.0",
         "ag-grid-react": "^31.2.0",
diff --git a/src/components/authentication/Login.tsx b/src/components/authentication/Login.tsx
index e5289671..0beea538 100644
--- a/src/components/authentication/Login.tsx
+++ b/src/components/authentication/Login.tsx
@@ -4,22 +4,23 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Avatar, Box, Button, Container, Link, Theme, Typography } from '@mui/material';
+import { Avatar, Box, Button, Container, Link, Typography } from '@mui/material';
 import { LockOutlined as LockOutlinedIcon } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '../../utils/styles';
 
 const styles = {
-    paper: (theme: Theme) => ({
+    paper: (theme) => ({
         marginTop: theme.spacing(8),
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
     }),
-    avatar: (theme: Theme) => ({
+    avatar: (theme) => ({
         margin: theme.spacing(1),
         backgroundColor: theme.palette.secondary.main,
     }),
-    submit: (theme: Theme) => ({
+    submit: (theme) => ({
         margin: theme.spacing(3, 0, 2),
         borderRadius: '30px',
     }),
@@ -27,7 +28,7 @@ const styles = {
         width: 64,
         height: 64,
     },
-};
+} as const satisfies MuiStyles;
 
 export interface LoginProps {
     onLoginClick: () => void;
diff --git a/src/components/authentication/Logout.tsx b/src/components/authentication/Logout.tsx
index 26a7507d..a5ac6486 100644
--- a/src/components/authentication/Logout.tsx
+++ b/src/components/authentication/Logout.tsx
@@ -5,26 +5,27 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Avatar, Box, Button, Container, Link, Theme, Typography } from '@mui/material';
+import { Avatar, Box, Button, Container, Link, Typography } from '@mui/material';
 import { LogoutOutlined as LogoutOutlinedIcon } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '../../utils/styles';
 
 const styles = {
-    paper: (theme: Theme) => ({
+    paper: (theme) => ({
         marginTop: theme.spacing(8),
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
     }),
-    avatar: (theme: Theme) => ({
+    avatar: (theme) => ({
         margin: theme.spacing(1),
         backgroundColor: theme.palette.error.main,
     }),
-    submit: (theme: Theme) => ({
+    submit: (theme) => ({
         margin: theme.spacing(3, 0, 2),
         borderRadius: '30px',
     }),
-};
+} as const satisfies MuiStyles;
 
 export interface LogoutProps {
     onLogoutClick: () => void;
diff --git a/src/components/cardErrorBoundary/CardErrorBoundary.tsx b/src/components/cardErrorBoundary/CardErrorBoundary.tsx
index 9684573d..5bcaecde 100644
--- a/src/components/cardErrorBoundary/CardErrorBoundary.tsx
+++ b/src/components/cardErrorBoundary/CardErrorBoundary.tsx
@@ -19,9 +19,8 @@ import {
     Collapse,
     IconButton,
     IconButtonProps,
-    Theme,
-    Typography,
     styled,
+    Typography,
 } from '@mui/material';
 import { Component, ErrorInfo, ReactNode } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -33,7 +32,7 @@ export interface ExpandMoreProps extends IconButtonProps {
 const ExpandMore = styled((props: ExpandMoreProps) => {
     const { expand, ...other } = props;
     return <IconButton {...other} />;
-})(({ theme, expand }: { theme: Theme; expand: boolean }) => ({
+})(({ theme, expand }) => ({
     transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
     marginLeft: 'auto',
     transition: theme.transitions.create('transform', {
diff --git a/src/components/checkBoxList/ClickableRowItem.tsx b/src/components/checkBoxList/ClickableRowItem.tsx
index f3c39a24..0ce84d92 100644
--- a/src/components/checkBoxList/ClickableRowItem.tsx
+++ b/src/components/checkBoxList/ClickableRowItem.tsx
@@ -7,6 +7,7 @@
 import { Checkbox, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { OverflowableText } from '../overflowableText';
 import { ClickableRowItemProps } from './checkBoxList.type';
+import { type MuiStyles } from '../../utils/styles';
 
 const styles = {
     unclickableItem: {
@@ -15,7 +16,7 @@ const styles = {
         },
         cursor: 'inherit',
     },
-};
+} as const satisfies MuiStyles;
 
 export function ClickableRowItem({
     sx,
diff --git a/src/components/checkBoxList/DraggableClickableCheckBoxItem.tsx b/src/components/checkBoxList/DraggableClickableCheckBoxItem.tsx
index 151403a0..eb5dda0b 100644
--- a/src/components/checkBoxList/DraggableClickableCheckBoxItem.tsx
+++ b/src/components/checkBoxList/DraggableClickableCheckBoxItem.tsx
@@ -6,18 +6,19 @@
  */
 
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-import { Checkbox, IconButton, ListItemIcon, ListItemText, Theme } from '@mui/material';
+import { Checkbox, IconButton, ListItemIcon, ListItemText } from '@mui/material';
 import { OverflowableText } from '../overflowableText';
 import { DraggableClickableCheckBoxItemProps } from './checkBoxList.type';
+import { type MuiStyles } from '../../utils/styles';
 
 const styles = {
-    dragIcon: (theme: Theme) => ({
+    dragIcon: (theme) => ({
         padding: 'unset',
         border: theme.spacing(0),
         borderRadius: theme.spacing(0),
         zIndex: 90,
     }),
-};
+} as const satisfies MuiStyles;
 
 export function DraggableClickableCheckBoxItem({
     sx,
diff --git a/src/components/checkBoxList/DraggableClickableRowItem.tsx b/src/components/checkBoxList/DraggableClickableRowItem.tsx
index 58dc7e3b..6aa4a74d 100644
--- a/src/components/checkBoxList/DraggableClickableRowItem.tsx
+++ b/src/components/checkBoxList/DraggableClickableRowItem.tsx
@@ -6,12 +6,12 @@
  */
 
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-import { Checkbox, IconButton, ListItemButton, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material';
+import { Checkbox, IconButton, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { OverflowableText } from '../overflowableText';
 import { DraggableClickableRowItemProps } from './checkBoxList.type';
-import { mergeSx } from '../../utils';
+import { mergeSx, type MuiStyles } from '../../utils/styles';
 
-const styles: Record<string, SxProps<Theme>> = {
+const styles = {
     dragIcon: (theme) => ({
         padding: 'unset',
         border: theme.spacing(0),
@@ -24,7 +24,7 @@ const styles: Record<string, SxProps<Theme>> = {
         },
         cursor: 'inherit',
     },
-};
+} as const satisfies MuiStyles;
 
 export function DraggableClickableRowItem({
     sx,
diff --git a/src/components/checkBoxList/checkBoxList.type.ts b/src/components/checkBoxList/checkBoxList.type.ts
index 46b4d25d..67cc8d6c 100644
--- a/src/components/checkBoxList/checkBoxList.type.ts
+++ b/src/components/checkBoxList/checkBoxList.type.ts
@@ -7,20 +7,19 @@
 
 import React from 'react';
 import { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material';
+import { type MuiStyle } from '../../utils/styles';
 
 export type CheckBoxListItemSx = {
-    checkBoxIcon?: SxProps<Theme>;
-    label?: SxProps<Theme>;
-    checkboxListItem?: SxProps<Theme>;
-    checkboxButton?: SxProps<Theme>;
-    checkbox?: SxProps<Theme>;
+    checkBoxIcon?: MuiStyle;
+    label?: MuiStyle;
+    checkboxListItem?: MuiStyle;
+    checkboxButton?: MuiStyle;
+    checkbox?: MuiStyle;
 };
 
 export type CheckBoxListSx = {
-    dragAndDropContainer?: SxProps<Theme>;
-    checkboxList?: SxProps<Theme>;
+    dragAndDropContainer?: MuiStyle;
+    checkboxList?: MuiStyle;
 };
 
 export type CheckBoxListItemSxMethod<T> = (item: T) => CheckBoxListItemSx;
diff --git a/src/components/customAGGrid/customAggrid.style.ts b/src/components/customAGGrid/customAggrid.style.ts
index 9ad9c15d..3df01966 100644
--- a/src/components/customAGGrid/customAggrid.style.ts
+++ b/src/components/customAGGrid/customAggrid.style.ts
@@ -4,13 +4,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Theme } from '@mui/material/styles/createTheme';
-import { SystemStyleObject } from '@mui/system/styleFunctionSx/styleFunctionSx';
+
+import { type MuiStyles } from '../../utils/styles';
 
 export const CUSTOM_AGGRID_THEME = 'custom-aggrid-theme';
 
 export const styles = {
-    grid: (theme: Theme): SystemStyleObject<Theme> => ({
+    grid: (theme) => ({
         width: 'auto',
         height: '100%',
         position: 'relative',
@@ -49,7 +49,7 @@ export const styles = {
             borderRight: 'none',
         },
     },
-    overlayBackground: (theme: Theme) => ({
+    overlayBackground: (theme) => ({
         '& .ag-overlay-loading-wrapper': {
             background: theme.aggrid.overlay.background,
         },
@@ -57,4 +57,4 @@ export const styles = {
             background: 'none',
         },
     }),
-};
+} as const satisfies MuiStyles;
diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx
index 7e2708f6..690c58a5 100644
--- a/src/components/customAGGrid/customAggrid.tsx
+++ b/src/components/customAGGrid/customAggrid.tsx
@@ -6,16 +6,14 @@
  */
 
 import React, { useCallback } from 'react';
-import { Theme } from '@mui/material/styles/createTheme';
+import { Box, useTheme } from '@mui/material';
 import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import { useIntl } from 'react-intl';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { ColumnResizedEvent, GetLocaleTextParams } from 'ag-grid-community';
-import { Box } from '@mui/system';
-import { SxProps, useTheme } from '@mui/material';
 import { mergeSx } from '../../utils/styles';
-import { styles, CUSTOM_AGGRID_THEME } from './customAggrid.style';
+import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style';
 
 interface CustomAGGGridStyleProps {
     shouldHidePinnedHeaderRightBorder?: boolean;
@@ -38,7 +36,7 @@ const onColumnResized = (params: ColumnResizedEvent) => {
 
 export const CustomAGGrid = React.forwardRef<AgGridReact, CustomAGGridProps>((props, ref) => {
     const { shouldHidePinnedHeaderRightBorder = false, showOverlay = false, ...agGridReactProps } = props;
-    const theme = useTheme<Theme>();
+    const theme = useTheme();
     const intl = useIntl();
 
     const GRID_PREFIX = 'grid.';
@@ -57,9 +55,9 @@ export const CustomAGGrid = React.forwardRef<AgGridReact, CustomAGGridProps>((pr
     return (
         <Box
             sx={mergeSx(
-                styles.grid as SxProps | undefined,
+                styles.grid,
                 shouldHidePinnedHeaderRightBorder ? styles.noBorderRight : undefined,
-                showOverlay ? (styles.overlayBackground as SxProps | undefined) : undefined
+                showOverlay ? styles.overlayBackground : undefined
             )}
             className={`${theme.aggrid.theme} ${CUSTOM_AGGRID_THEME}`}
         >
diff --git a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx
index 677d635b..8b964e62 100644
--- a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx
+++ b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx
@@ -14,6 +14,7 @@ import { SubmitButton } from '../../inputs/reactHookForm/utils/SubmitButton';
 import { CancelButton } from '../../inputs/reactHookForm/utils/CancelButton';
 import { CustomFormProvider } from '../../inputs/reactHookForm/provider/CustomFormProvider';
 import { PopupConfirmationDialog } from '../popupConfirmationDialog/PopupConfirmationDialog';
+import { type MuiStyles } from '../../../utils/styles';
 
 export interface CustomMuiDialogProps<T extends FieldValues = FieldValues> {
     open: boolean;
@@ -41,7 +42,7 @@ const styles = {
             margin: 'auto',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 /**
  * all those styles are made to work with each other in order to control the scroll behavior:
@@ -74,7 +75,7 @@ export const unscrollableDialogStyles = {
         overflowY: 'auto',
         padding: 1,
     },
-};
+} as const satisfies MuiStyles;
 
 export function CustomMuiDialog<T extends FieldValues = FieldValues>({
     open,
diff --git a/src/components/directoryItemSelector/DirectoryItemSelector.tsx b/src/components/directoryItemSelector/DirectoryItemSelector.tsx
index 0b55d74f..04de5ae8 100644
--- a/src/components/directoryItemSelector/DirectoryItemSelector.tsx
+++ b/src/components/directoryItemSelector/DirectoryItemSelector.tsx
@@ -6,7 +6,6 @@
  */
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { SxProps, Theme } from '@mui/material';
 import { UUID } from 'crypto';
 import { getFileIcon } from '../../utils/mapper/getFileIcon';
 import { ElementType } from '../../utils/types/elementType';
@@ -14,14 +13,15 @@ import { TreeViewFinder, TreeViewFinderNodeProps, TreeViewFinderProps } from '..
 import { useSnackMessage } from '../../hooks/useSnackMessage';
 import { fetchDirectoryContent, fetchElementsInfos, fetchRootFolders } from '../../services';
 import { ElementAttributes } from '../../utils';
+import { type MuiStyles } from '../../utils/styles';
 
 const styles = {
-    icon: (theme: Theme) => ({
+    icon: (theme) => ({
         marginRight: theme.spacing(1),
         width: '18px',
         height: '18px',
     }),
-};
+} as const satisfies MuiStyles;
 
 // TODO: check avec Kevin / Sylvain
 type ElementAttributesBase = {
@@ -202,7 +202,7 @@ export function DirectoryItemSelector({
                 id: e.elementUuid,
                 name: e.elementName,
                 specificMetadata: e.specificMetadata,
-                icon: getFileIcon(e.type, styles.icon as SxProps),
+                icon: getFileIcon(e.type, styles.icon),
                 children: e.type === ElementType.DIRECTORY ? convertChildren(e.children) : undefined,
                 childrenCount: e.type === ElementType.DIRECTORY ? e.subdirectoriesCount : undefined,
             };
@@ -215,7 +215,7 @@ export function DirectoryItemSelector({
                 return {
                     id: e.elementUuid,
                     name: e.elementName,
-                    icon: getFileIcon(e.type, styles.icon as SxProps),
+                    icon: getFileIcon(e.type, styles.icon),
                     children:
                         e.type === ElementType.DIRECTORY
                             ? convertChildren(nodeMap.current[e.elementUuid].children)
diff --git a/src/components/elementSearch/elementItem/EquipmentItem.tsx b/src/components/elementSearch/elementItem/EquipmentItem.tsx
index 9eb8030e..32d3850d 100644
--- a/src/components/elementSearch/elementItem/EquipmentItem.tsx
+++ b/src/components/elementSearch/elementItem/EquipmentItem.tsx
@@ -8,11 +8,11 @@ import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
 import clsx from 'clsx';
 import { FormattedMessage } from 'react-intl';
-import { Box, SxProps, Theme } from '@mui/material';
+import { Box } from '@mui/material';
 import { EQUIPMENT_TYPE, EquipmentInfos } from '../../../utils/types/equipmentType';
 import { TagRenderer } from '../tagRenderer/TagRenderer';
 import { OverflowableText } from '../../overflowableText';
-import { mergeSx } from '../../../utils/styles';
+import { mergeSx, type MuiStyle } from '../../../utils/styles';
 
 export interface EquipmentItemProps {
     inputValue: string;
@@ -27,11 +27,11 @@ export interface EquipmentItemProps {
         equipmentVlTag?: string;
     };
     styles?: {
-        result?: SxProps<Theme>;
-        equipmentOption?: SxProps<Theme>;
-        equipmentTag?: SxProps<Theme>;
-        equipmentTypeTag?: SxProps<Theme>;
-        equipmentVlTag?: SxProps<Theme>;
+        result?: MuiStyle;
+        equipmentOption?: MuiStyle;
+        equipmentTag?: MuiStyle;
+        equipmentTypeTag?: MuiStyle;
+        equipmentVlTag?: MuiStyle;
     };
 }
 
diff --git a/src/components/elementSearch/tagRenderer/TagRenderer.tsx b/src/components/elementSearch/tagRenderer/TagRenderer.tsx
index 21f00bd3..bfc4a991 100644
--- a/src/components/elementSearch/tagRenderer/TagRenderer.tsx
+++ b/src/components/elementSearch/tagRenderer/TagRenderer.tsx
@@ -5,10 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import clsx from 'clsx';
-import { SxProps, Theme } from '@mui/material';
 import { OverflowableText } from '../../overflowableText';
 import { EQUIPMENT_TYPE, EquipmentInfos } from '../../../utils/types/equipmentType';
-import { mergeSx } from '../../../utils/styles';
+import { mergeSx, type MuiStyle } from '../../../utils/styles';
 
 export interface TagRendererProps {
     element: EquipmentInfos;
@@ -17,8 +16,8 @@ export interface TagRendererProps {
         equipmentVlTag?: string;
     };
     styles?: {
-        equipmentTag?: SxProps<Theme>;
-        equipmentVlTag?: SxProps<Theme>;
+        equipmentTag?: MuiStyle;
+        equipmentVlTag?: MuiStyle;
     };
 }
 
diff --git a/src/components/expandableGroup/ExpandableGroup.tsx b/src/components/expandableGroup/ExpandableGroup.tsx
index c8bb1b70..d3fc6832 100644
--- a/src/components/expandableGroup/ExpandableGroup.tsx
+++ b/src/components/expandableGroup/ExpandableGroup.tsx
@@ -4,19 +4,20 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Accordion, AccordionDetails, AccordionSummary, Theme, Typography } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
 import { PropsWithChildren, ReactNode, useState } from 'react';
 import { ExpandCircleDown, ExpandMore } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '../../utils/styles';
 
 const styles = {
-    accordion: () => ({
+    accordion: {
         '&:before': {
             display: 'none',
         },
         background: 'none',
-    }),
-    accordionSummary: (theme: Theme) => ({
+    },
+    accordionSummary: (theme) => ({
         flexDirection: 'row-reverse', // place icon at the left
         padding: 0, // reset default left right space in summary
         '.MuiAccordionSummary-content': {
@@ -35,10 +36,10 @@ const styles = {
             transform: 'rotate(0deg)',
         },
     }),
-    accordionDetails: () => ({
+    accordionDetails: {
         padding: 0, // reset default left right space in details
-    }),
-};
+    },
+} as const satisfies MuiStyles;
 
 export interface ExpandableGroupProps extends PropsWithChildren {
     renderHeader: ReactNode;
diff --git a/src/components/flatParameters/FlatParameters.tsx b/src/components/flatParameters/FlatParameters.tsx
index d7762760..13b40021 100644
--- a/src/components/flatParameters/FlatParameters.tsx
+++ b/src/components/flatParameters/FlatParameters.tsx
@@ -18,20 +18,20 @@ import {
     Switch,
     TextField,
     TextFieldProps,
-    Theme,
     Tooltip,
     Typography,
 } from '@mui/material';
 import { Tune as TuneIcon } from '@mui/icons-material';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { MultipleSelectionDialog } from '../multipleSelectionDialog/MultipleSelectionDialog';
+import { type MuiStyles } from '../../utils/styles';
 
 const styles = {
     paramList: {
         width: '100%',
         margin: 0,
     },
-    paramListItem: (theme: Theme) => ({
+    paramListItem: (theme) => ({
         display: 'flex',
         justifyContent: 'space-between',
         gap: theme.spacing(2),
@@ -43,7 +43,7 @@ const styles = {
         minWidth: '30%',
         overflowWrap: 'anywhere',
     },
-};
+} as const satisfies MuiStyles;
 
 const FloatRE = /^-?\d*[.,]?\d*([eE]-?\d*)?$/;
 const IntegerRE = /^-?\d*$/;
diff --git a/src/components/inputs/reactHookForm/DirectoryItemsInput.tsx b/src/components/inputs/reactHookForm/DirectoryItemsInput.tsx
index 129c6212..6450b1c4 100644
--- a/src/components/inputs/reactHookForm/DirectoryItemsInput.tsx
+++ b/src/components/inputs/reactHookForm/DirectoryItemsInput.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Chip, FormControl, Grid, IconButton, Theme, Tooltip } from '@mui/material';
+import { Chip, FormControl, Grid, IconButton, Tooltip } from '@mui/material';
 import FolderIcon from '@mui/icons-material/Folder';
 import { useCallback, useMemo, useState } from 'react';
 import { useController, useFieldArray } from 'react-hook-form';
@@ -18,7 +18,7 @@ import { isFieldRequired } from './utils/functions';
 import { ErrorInput } from './errorManagement/ErrorInput';
 import { useSnackMessage } from '../../../hooks/useSnackMessage';
 import { TreeViewFinderNodeProps } from '../../treeViewFinder';
-import { mergeSx } from '../../../utils/styles';
+import { mergeSx, type MuiStyles } from '../../../utils/styles';
 import { OverflowableText } from '../../overflowableText';
 import { MidFormError } from './errorManagement/MidFormError';
 import { DirectoryItemSelector } from '../../directoryItemSelector/DirectoryItemSelector';
@@ -37,7 +37,7 @@ const styles = {
         borderRadius: '4px',
         overflow: 'hidden',
     },
-    formDirectoryElementsError: (theme: Theme) => ({
+    formDirectoryElementsError: (theme) => ({
         borderColor: theme.palette.error.main,
     }),
     formDirectoryElements2: {
@@ -52,7 +52,7 @@ const styles = {
     addDirectoryElements: {
         marginTop: '-5px',
     },
-};
+} as const satisfies MuiStyles;
 
 export interface DirectoryItemsInputProps {
     label: string | undefined;
diff --git a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx
index 094fcd30..109faba4 100644
--- a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx
+++ b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx
@@ -15,6 +15,7 @@ import { useIntl } from 'react-intl';
 import { CellEditingStoppedEvent, ColumnState, SortChangedEvent } from 'ag-grid-community';
 import { BottomRightButtons } from './BottomRightButtons';
 import { FieldConstants } from '../../../../utils/constants/fieldConstants';
+import { type MuiStyle, type MuiStyleObj } from '../../../../utils/styles';
 
 export const ROW_DRAGGING_SELECTION_COLUMN_DEF = [
     {
@@ -25,8 +26,9 @@ export const ROW_DRAGGING_SELECTION_COLUMN_DEF = [
     },
 ];
 
-const style = (customProps: any) => ({
-    grid: (theme: any) => ({
+const style =
+    (customProps: MuiStyleObj = {}): MuiStyle =>
+    (theme) => ({
         width: 'auto',
         height: '100%',
         position: 'relative',
@@ -36,10 +38,10 @@ const style = (customProps: any) => ({
         // https://www.ag-grid.com/react-data-grid/global-style-customisation/
         '--ag-alpine-active-color': `${theme.palette.primary.main} !important`,
         '--ag-checkbox-indeterminate-color': `${theme.palette.primary.main} !important`,
-        '--ag-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-header-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-odd-row-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-modal-overlay-background-color': `${theme.agGridBackground.color} !important`,
+        '--ag-background-color': `${theme.aggrid.background.color} !important`,
+        '--ag-header-background-color': `${theme.aggrid.background.color} !important`,
+        '--ag-odd-row-background-color': `${theme.aggrid.background.color} !important`,
+        '--ag-modal-overlay-background-color': `${theme.aggrid.background.color} !important`,
         '--ag-selected-row-background-color': 'transparent !important',
         '--ag-range-selection-border-color': 'transparent !important',
 
@@ -71,24 +73,23 @@ const style = (customProps: any) => ({
             height: '100%',
             border: 'inherit',
             outline: 'inherit',
-            backgroundColor: theme.agGridBackground.color,
+            backgroundColor: theme.aggrid.background.color,
         },
         '& .Mui-focused .MuiOutlinedInput-root': {
             // borders moves row height
             outline: 'var(--ag-borders-input) var(--ag-input-focus-border-color)',
             outlineOffset: '-1px',
-            backgroundColor: theme.agGridBackground.color,
+            backgroundColor: theme.aggrid.background.color,
         },
         ...customProps,
-    }),
-});
+    });
 
 export interface CustomAgGridTableProps {
     name: string;
     columnDefs: any;
     makeDefaultRowData: any;
     csvProps: unknown;
-    cssProps: unknown;
+    cssProps?: MuiStyleObj;
     defaultColDef: unknown;
     pagination: boolean;
     paginationPageSize: number;
@@ -111,8 +112,7 @@ export function CustomAgGridTable({
     stopEditingWhenCellsLoseFocus,
     ...props
 }: CustomAgGridTableProps) {
-    // FIXME: right type => Theme -->  not defined there ( gridStudy and gridExplore definition not the same )
-    const theme: any = useTheme();
+    const theme = useTheme();
     const [gridApi, setGridApi] = useState<any>(null);
     const [selectedRows, setSelectedRows] = useState([]);
     const [newRowAdded, setNewRowAdded] = useState(false);
@@ -237,7 +237,7 @@ export function CustomAgGridTable({
 
     return (
         <>
-            <Box className={theme.aggrid.theme} sx={style(cssProps).grid}>
+            <Box className={theme.aggrid.theme} sx={style(cssProps)}>
                 <AgGridReact
                     rowData={rowData}
                     onGridReady={onGridReady}
diff --git a/src/components/inputs/reactHookForm/numbers/RangeInput.tsx b/src/components/inputs/reactHookForm/numbers/RangeInput.tsx
index 9c380f6d..cfe4b787 100644
--- a/src/components/inputs/reactHookForm/numbers/RangeInput.tsx
+++ b/src/components/inputs/reactHookForm/numbers/RangeInput.tsx
@@ -13,14 +13,15 @@ import { FloatInput } from './FloatInput';
 import yup from '../../../../utils/yupConfig';
 import { MuiSelectInput } from '../selectInputs/MuiSelectInput';
 import { FieldConstants } from '../../../../utils/constants/fieldConstants';
+import { type MuiStyles } from '../../../../utils/styles';
 
-const style = {
-    inputLegend: (theme: any) => ({
+const styles = {
+    inputLegend: (theme) => ({
         backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16))',
         backgroundColor: theme.palette.background.paper,
         padding: '0 8px 0 8px',
     }),
-};
+} as const satisfies MuiStyles;
 
 export const RangeType = {
     EQUALITY: { id: 'EQUALITY', label: 'equality' },
@@ -75,7 +76,7 @@ export function RangeInput({ name, label }: RangeInputProps) {
 
     return (
         <FormControl fullWidth>
-            <InputLabel sx={style.inputLegend} shrink>
+            <InputLabel sx={styles.inputLegend} shrink>
                 <FormattedMessage id={label} />
             </InputLabel>
             <Grid container spacing={0}>
diff --git a/src/components/inputs/reactHookForm/text/ExpandingTextField.tsx b/src/components/inputs/reactHookForm/text/ExpandingTextField.tsx
index 4ff6a26d..4262ae41 100644
--- a/src/components/inputs/reactHookForm/text/ExpandingTextField.tsx
+++ b/src/components/inputs/reactHookForm/text/ExpandingTextField.tsx
@@ -6,7 +6,7 @@
  */
 
 import { useState } from 'react';
-import { TextFieldProps, Theme, Typography } from '@mui/material';
+import { type TextFieldProps, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useCustomFormContext } from '../provider/useCustomFormContext';
 import { TextInput, TextInputProps } from './TextInput';
@@ -47,10 +47,8 @@ export function ExpandingTextField({
     const isOverTheLimit = descriptionWatch?.length > maxCharactersNumber;
     const descriptionLength = descriptionWatch?.length ?? 0;
     const descriptionCounter = `${descriptionLength}/${maxCharactersNumber}`;
-
     const rowsToDisplay = isFocused ? rows : minRows;
-
-    const formProps = {
+    const formProps: TextInputProps['formProps'] = {
         size: 'medium',
         multiline: true,
         onFocus: handleFocus,
@@ -67,7 +65,7 @@ export function ExpandingTextField({
         FormHelperTextProps: {
             sx: {
                 ml: 'auto',
-                color: (theme: Theme) => (isOverTheLimit ? theme.palette.error.main : theme.palette.text.secondary),
+                color: (theme) => (isOverTheLimit ? theme.palette.error.main : theme.palette.text.secondary),
             },
         },
         ...(rowsToDisplay && { rows: rowsToDisplay }),
diff --git a/src/components/inputs/reactHookForm/utils/CancelButton.tsx b/src/components/inputs/reactHookForm/utils/CancelButton.tsx
index 064d2d29..7a358045 100644
--- a/src/components/inputs/reactHookForm/utils/CancelButton.tsx
+++ b/src/components/inputs/reactHookForm/utils/CancelButton.tsx
@@ -5,9 +5,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Button } from '@mui/material';
+import { Button, useThemeProps } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import { useThemeProps } from '@mui/material/styles';
 
 export function CancelButton({ ...inProps }) {
     const props = useThemeProps({ props: inProps, name: 'CancelButton' });
diff --git a/src/components/inputs/reactHookForm/utils/TextFieldWithAdornment.tsx b/src/components/inputs/reactHookForm/utils/TextFieldWithAdornment.tsx
index 0cb7ca7c..5550d9a6 100644
--- a/src/components/inputs/reactHookForm/utils/TextFieldWithAdornment.tsx
+++ b/src/components/inputs/reactHookForm/utils/TextFieldWithAdornment.tsx
@@ -7,9 +7,9 @@
 
 import { useCallback, useState } from 'react';
 import { Clear as ClearIcon } from '@mui/icons-material';
-import { IconButton, InputAdornment, TextField, TextFieldProps } from '@mui/material';
-
+import { IconButton, InputAdornment, TextField, TextFieldProps, TextFieldVariants } from '@mui/material';
 import { Input } from '../../../../utils/types/types';
+import { type MuiStyleObj } from '../../../../utils/styles';
 
 export type TextFieldWithAdornmentProps = TextFieldProps & {
     // variant already included in TextFieldProps
@@ -19,26 +19,24 @@ export type TextFieldWithAdornmentProps = TextFieldProps & {
     handleClearValue?: () => void;
 };
 
+function getAdornmentStyle(innerVariant: TextFieldVariants) {
+    if (innerVariant === 'filled') {
+        return {
+            alignItems: 'start',
+            marginBottom: '0.4em',
+        } as const satisfies MuiStyleObj;
+    }
+    if (innerVariant === 'standard') {
+        return { marginBottom: '0.3em' } as const satisfies MuiStyleObj;
+    }
+    return undefined;
+}
+
 export function TextFieldWithAdornment(props: TextFieldWithAdornmentProps) {
     const { adornmentPosition, adornmentText, value, variant, handleClearValue, ...otherProps } = props;
 
     const [isFocused, setIsFocused] = useState(false);
 
-    const getAdornmentStyle = useCallback((innerVariant: 'standard' | 'filled' | 'outlined') => {
-        if (innerVariant === 'filled') {
-            return {
-                alignItems: 'start',
-                marginBottom: '0.4em',
-            };
-        }
-        if (innerVariant === 'standard') {
-            return {
-                marginBottom: '0.3em',
-            };
-        }
-        return undefined;
-    }, []);
-
     const getClearAdornment = useCallback(
         (position: 'start' | 'end') => {
             return (
@@ -60,7 +58,7 @@ export function TextFieldWithAdornment(props: TextFieldWithAdornmentProps) {
                 </InputAdornment>
             );
         },
-        [adornmentText, getAdornmentStyle, variant]
+        [adornmentText, variant]
     );
 
     const withEndAdornmentText = useCallback(() => {
diff --git a/src/components/inputs/reactQueryBuilder/AutocompleteWithFavorites.tsx b/src/components/inputs/reactQueryBuilder/AutocompleteWithFavorites.tsx
index 5a4e7c0a..2ade60e5 100644
--- a/src/components/inputs/reactQueryBuilder/AutocompleteWithFavorites.tsx
+++ b/src/components/inputs/reactQueryBuilder/AutocompleteWithFavorites.tsx
@@ -5,16 +5,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Autocomplete, Box, TextField, Theme } from '@mui/material';
+import { Autocomplete, Box, TextField } from '@mui/material';
 import { useMemo } from 'react';
 import { AutocompleteProps } from '@mui/material/Autocomplete/Autocomplete';
+import { type MuiStyles } from '../../../utils/styles';
 
 const styles = {
-    favBox: (theme: Theme) => ({
+    favBox: (theme) => ({
         borderBottom: '1px solid',
         borderColor: theme.palette.divider,
     }),
-};
+} as const satisfies MuiStyles;
 
 interface AutocompleteWithFavoritesProps<Value>
     extends Omit<
@@ -54,7 +55,7 @@ export function AutocompleteWithFavorites<Value>({
             isOptionEqualToValue={(option, val) => option === val || val === ''}
             {...otherProps}
             /* props should not be overridden */
-            groupBy={(option: Value) => (favorites.includes(option) ? `fav` : 'not_fav')}
+            groupBy={(option: Value) => (favorites.includes(option) ? 'fav' : 'not_fav')}
             multiple={Array.isArray(value)}
             renderInput={(params) => <TextField {...params} error={!valid} />}
             renderGroup={(item) => {
diff --git a/src/components/inputs/reactQueryBuilder/ValueEditor.tsx b/src/components/inputs/reactQueryBuilder/ValueEditor.tsx
index 3484bf1b..919b3957 100644
--- a/src/components/inputs/reactQueryBuilder/ValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/ValueEditor.tsx
@@ -23,6 +23,7 @@ import { PropertyValueEditor } from './PropertyValueEditor';
 import { FilterType } from '../../filter/constants/FilterConstants';
 import { GroupValueEditor } from './compositeRuleEditor/GroupValueEditor';
 import { OPERATOR_OPTIONS } from '../../filter/expert/expertFilterConstants';
+import { type MuiStyles } from '../../../utils/styles';
 
 const styles = {
     noArrows: {
@@ -33,7 +34,7 @@ const styles = {
             MozAppearance: 'textfield',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 export function ValueEditor(props: ValueEditorProps) {
     const { field, operator, value, rule, handleOnChange, inputType, fieldData } = props;
diff --git a/src/components/inputs/reactQueryBuilder/compositeRuleEditor/GroupValueEditor.tsx b/src/components/inputs/reactQueryBuilder/compositeRuleEditor/GroupValueEditor.tsx
index 3c1805b6..958aa38a 100644
--- a/src/components/inputs/reactQueryBuilder/compositeRuleEditor/GroupValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/compositeRuleEditor/GroupValueEditor.tsx
@@ -5,18 +5,19 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { ValueEditorProps } from 'react-querybuilder';
-import { Grid, Theme } from '@mui/material';
+import { Grid } from '@mui/material';
 import { useCallback } from 'react';
 import { RuleValueEditor } from './RuleValueEditor';
 import { CompositeField, CompositeGroup, CompositeRule } from '../../../filter/expert/expertFilter.type';
+import { type MuiStyles } from '../../../../utils/styles';
 
 const styles = {
-    group: (theme: Theme) => ({
+    group: (theme) => ({
         border: 1,
         borderRadius: 1,
         borderColor: theme.palette.grey[500],
     }),
-};
+} as const satisfies MuiStyles;
 
 export function GroupValueEditor(props: ValueEditorProps<CompositeField>) {
     const {
diff --git a/src/components/inputs/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.tsx b/src/components/inputs/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.tsx
index 3963b1f7..90e77e63 100644
--- a/src/components/inputs/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.tsx
@@ -8,6 +8,7 @@ import { ValueEditorProps } from 'react-querybuilder';
 import { Grid, MenuItem, Select, Typography } from '@mui/material';
 import { useIntl } from 'react-intl';
 import { CompositeRule, OperatorOption } from '../../../filter/expert/expertFilter.type';
+import { type MuiStyles } from '../../../../utils/styles';
 
 const styles = {
     gridItem: {
@@ -15,7 +16,7 @@ const styles = {
         justifyContent: 'flex-end',
         alignItems: 'baseline',
     },
-};
+} as const satisfies MuiStyles;
 
 type RuleValueEditorProps = ValueEditorProps & {
     rule?: CompositeRule;
diff --git a/src/components/muiVirtualizedTable/ColumnHeader.tsx b/src/components/muiVirtualizedTable/ColumnHeader.tsx
index 3ce92576..6e710188 100644
--- a/src/components/muiVirtualizedTable/ColumnHeader.tsx
+++ b/src/components/muiVirtualizedTable/ColumnHeader.tsx
@@ -6,16 +6,13 @@
  */
 
 import { ComponentProps, forwardRef, MouseEvent, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
-
 import {
     ArrowDownward as ArrowDownwardIcon,
     ArrowUpward as ArrowUpwardIcon,
     FilterAltOutlined as FilterAltOutlinedIcon,
 } from '@mui/icons-material';
-
-import { styled } from '@mui/system';
-import { Box, BoxProps, Theme } from '@mui/material';
-import { mergeSx } from '../../utils/styles';
+import { Box, BoxProps, styled } from '@mui/material';
+import { mergeSx, type MuiStyles } from '../../utils/styles';
 
 const styles = {
     label: {
@@ -43,7 +40,7 @@ const styles = {
     filterButton: {
         stroke: 'currentcolor',
     },
-    filterTooLossy: (theme: Theme) => ({
+    filterTooLossy: (theme) => ({
         stroke: theme.palette.secondary.main,
     }),
     transparent: {
@@ -52,7 +49,7 @@ const styles = {
     hovered: {
         opacity: 0.5,
     },
-};
+} as const satisfies MuiStyles;
 
 interface SortButtonProps {
     signedRank?: number;
diff --git a/src/components/muiVirtualizedTable/MuiVirtualizedTable.tsx b/src/components/muiVirtualizedTable/MuiVirtualizedTable.tsx
index 2e5f4e08..96fd0fe9 100644
--- a/src/components/muiVirtualizedTable/MuiVirtualizedTable.tsx
+++ b/src/components/muiVirtualizedTable/MuiVirtualizedTable.tsx
@@ -8,17 +8,16 @@
 /**
  * This class has been taken from 'Virtualized Table' example at https://material-ui.com/components/tables/
  */
-import { createRef, PureComponent, ReactElement, ReactNode, MouseEvent, KeyboardEvent, MutableRefObject } from 'react';
+import { createRef, KeyboardEvent, MouseEvent, MutableRefObject, PureComponent, ReactNode } from 'react';
 import { FormattedMessage } from 'react-intl';
 import clsx from 'clsx';
 import memoize from 'memoize-one';
-import { Autocomplete, Chip, IconButton, Popover, SxProps, TableCell, TextField } from '@mui/material';
-import { styled } from '@mui/system';
+import { Autocomplete, Chip, IconButton, Popover, styled, TableCell, TextField } from '@mui/material';
 import { GetApp as GetAppIcon } from '@mui/icons-material';
 import { AutoSizer, Column, ColumnProps, RowMouseEventHandlerParams, Table, TableCellProps } from 'react-virtualized';
 import CsvDownloader from 'react-csv-downloader';
 import { OverflowableText } from '../overflowableText/OverflowableText';
-import { makeComposeClasses, toNestedGlobalSelectors } from '../../utils/styles';
+import { makeComposeClasses, MuiStyleObj, MuiStyles, toNestedGlobalSelectors } from '../../utils/styles';
 import {
     ChangeWays,
     collectibleHelper,
@@ -72,7 +71,7 @@ const defaultStyles = {
         // https://github.com/bvaughn/react-virtualized/issues/454
         '& .ReactVirtualized__Table__headerRow': {
             flip: false,
-        },
+        } as MuiStyleObj, // "flip" property isn't recognized
     },
     [cssTableRow]: {
         cursor: 'pointer',
@@ -91,7 +90,7 @@ const defaultStyles = {
     },
     [cssRowBackgroundDark]: {},
     [cssRowBackgroundLight]: {},
-};
+} as const satisfies MuiStyles;
 
 // TODO find a better system, maybe MUI will fix/improve this ?
 // Different from all others because of the poor nested sx support for portals
@@ -99,7 +98,7 @@ const defaultStyles = {
 const defaultTooltipSx = {
     maxWidth: '1260px',
     fontSize: '0.9rem',
-};
+} as const satisfies MuiStyleObj;
 
 //TODO do we need to export this to clients (index.js) ?
 export const generateMuiVirtualizedTableClass = (className: string) => `MuiVirtualizedTable-${className}`;
@@ -253,7 +252,7 @@ export interface MuiVirtualizedTableProps extends CustomColumnProps {
     onRowClick?: (event: RowMouseEventHandlerParams) => void;
     rowHeight: number;
     onCellClick: (row: RowProps, column: ColumnProps) => void;
-    tooltipSx: SxProps;
+    tooltipSx: MuiStyleObj;
     name: string;
     exportCSVDataKeys: unknown[];
     enableExportCSV: boolean;
diff --git a/src/components/overflowableText/OverflowableText.tsx b/src/components/overflowableText/OverflowableText.tsx
index 8b1b2adb..c570c5f3 100644
--- a/src/components/overflowableText/OverflowableText.tsx
+++ b/src/components/overflowableText/OverflowableText.tsx
@@ -5,8 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { ReactElement, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { Box, BoxProps, SxProps, Theme, Tooltip, styled } from '@mui/material';
+import { Box, BoxProps, styled, Tooltip, TooltipProps } from '@mui/material';
 import { Style } from 'node:util';
+import { type MuiStyle, type MuiStyles } from '../../utils/styles';
 
 const overflowStyle = {
     overflow: {
@@ -20,12 +21,12 @@ const overflowStyle = {
         width: 'fit-content',
         maxWidth: 'fit-content',
     },
-};
+} as const satisfies MuiStyles;
 
-const multilineOverflowStyle = (numberOfLinesToDisplay?: number): SxProps => ({
+const multilineOverflowStyle = (numberOfLinesToDisplay?: number): MuiStyle => ({
     overflow: 'hidden',
     display: '-webkit-box',
-    WebkitLineClamp: numberOfLinesToDisplay /* number of lines to show */,
+    WebkitLineClamp: numberOfLinesToDisplay, // number of lines to show
     lineClamp: numberOfLinesToDisplay,
     WebkitBoxOrient: 'vertical',
     wordWrap: 'break-word', // prevent bug when writing a very long word
@@ -34,15 +35,15 @@ const multilineOverflowStyle = (numberOfLinesToDisplay?: number): SxProps => ({
 export interface OverflowableTextProps extends BoxProps {
     text?: ReactElement | string;
     maxLineCount?: number;
-    tooltipStyle?: Style;
-    tooltipSx?: SxProps<Theme>;
+    tooltipStyle?: Style; // TODO can be only boolean
+    tooltipSx?: MuiStyle;
 }
 
 export const OverflowableText = styled(
     ({
         text,
         maxLineCount, // overflowable text can be displayed on several lines if this is set to a number > 1 tooltipStyle,
-        tooltipStyle,
+        tooltipStyle, // TODO: why not just do "tooltipSx!==undefined"?
         tooltipSx,
         className,
         children,
@@ -77,30 +78,32 @@ export const OverflowableText = styled(
             element.current?.clientHeight,
         ]);
 
-        const defaultTooltipSx = !tooltipStyle ? overflowStyle.tooltip : false;
         // the previous tooltipStyle classname API was replacing default, not
         // merging with the defaults, so keep the same behavior with the new tooltipSx API
-        const finalTooltipSx = tooltipSx || defaultTooltipSx;
-        const tooltipStyleProps = {
-            ...(tooltipStyle && { classes: { tooltip: tooltipStyle } }),
-            ...(finalTooltipSx && {
-                slotProps: { tooltip: { sx: finalTooltipSx } },
-            }),
-        };
+        const finalTooltipSx = tooltipSx ?? (!tooltipStyle ? overflowStyle.tooltip : undefined);
 
         return (
             <Tooltip
                 title={text || ''}
                 disableHoverListener={!overflowed}
-                {
-                    ...tooltipStyleProps /* legacy classes or newer slotProps API */
-                }
+                /* legacy classes or newer slotProps API */
+                classes={useMemo<TooltipProps['classes']>(
+                    () => tooltipStyle && { tooltip: tooltipStyle },
+                    [tooltipStyle]
+                )}
+                slotProps={useMemo<TooltipProps['slotProps']>(
+                    () => finalTooltipSx && { tooltip: { sx: finalTooltipSx } },
+                    [finalTooltipSx]
+                )}
             >
                 <Box
                     {...props}
                     ref={element}
                     className={className}
-                    sx={isMultiLine ? multilineOverflowStyle(maxLineCount) : overflowStyle.overflow}
+                    sx={useMemo(
+                        () => (isMultiLine ? multilineOverflowStyle(maxLineCount) : overflowStyle.overflow),
+                        [isMultiLine, maxLineCount]
+                    )}
                 >
                     {children || text}
                 </Box>
diff --git a/src/components/snackbarProvider/SnackbarProvider.tsx b/src/components/snackbarProvider/SnackbarProvider.tsx
index a7dd4737..83ef6372 100644
--- a/src/components/snackbarProvider/SnackbarProvider.tsx
+++ b/src/components/snackbarProvider/SnackbarProvider.tsx
@@ -6,9 +6,10 @@
  */
 
 import { useRef } from 'react';
-import { IconButton, styled, Theme } from '@mui/material';
+import { IconButton, styled } from '@mui/material';
 import ClearIcon from '@mui/icons-material/Clear';
-import { SnackbarProvider as OrigSnackbarProvider, SnackbarKey, SnackbarProviderProps } from 'notistack';
+import { SnackbarKey, SnackbarProvider as OrigSnackbarProvider, SnackbarProviderProps } from 'notistack';
+import { type MuiStyles } from '../../utils/styles';
 
 const StyledOrigSnackbarProvider = styled(OrigSnackbarProvider)(() => ({
     '&.notistack-MuiContent': {
@@ -21,10 +22,8 @@ const StyledOrigSnackbarProvider = styled(OrigSnackbarProvider)(() => ({
 }));
 
 const styles = {
-    buttonColor: (theme: Theme) => ({
-        color: theme.palette.common.white,
-    }),
-};
+    buttonColor: (theme) => ({ color: theme.palette.common.white }),
+} as const satisfies MuiStyles;
 
 /* A wrapper around notistack's SnackbarProvider that provides defaults props */
 export function SnackbarProvider(props: SnackbarProviderProps) {
diff --git a/src/components/topBar/AboutDialog.tsx b/src/components/topBar/AboutDialog.tsx
index 8f314a37..959b0080 100644
--- a/src/components/topBar/AboutDialog.tsx
+++ b/src/components/topBar/AboutDialog.tsx
@@ -22,7 +22,6 @@ import {
     Fade,
     Grid,
     Stack,
-    Theme,
     Tooltip,
     tooltipClasses,
     Typography,
@@ -34,6 +33,7 @@ import { LoadingButton } from '@mui/lab';
 import { Apps, DnsOutlined, ExpandMore, Gavel, QuestionMark, Refresh, WidgetsOutlined } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
 import { LogoText } from './GridLogo';
+import { type MuiStyles } from '../../utils/styles';
 
 const styles = {
     general: {
@@ -52,21 +52,19 @@ const styles = {
         textAlign: 'center',
         marginTop: 0,
     },
-    versionField: (isUnknown: boolean) =>
-        isUnknown
-            ? {
-                  fontSize: '1.5em',
-                  fontWeight: 'bold',
-              }
-            : {
-                  fontStyle: 'italic',
-              },
+    versionField: {
+        fontStyle: 'italic',
+    },
+    versionFieldUnknown: {
+        fontSize: '1.5em',
+        fontWeight: 'bold',
+    },
     detailsSection: {
         '.MuiAccordionSummary-content > .MuiSvgIcon-root': {
             marginRight: '0.5rem',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 function getGlobalVersion(
     fnPromise: (() => Promise<string>) | undefined,
@@ -153,7 +151,7 @@ const moduleStyles = {
         alignSelf: 'flex-end',
         flexShrink: 0,
     },
-    tooltip: (theme: Theme) => ({
+    tooltip: (theme) => ({
         [`& .${tooltipClasses.tooltip}`]: {
             border: '1px solid #dadde9',
             boxShadow: theme.shadows[1],
@@ -174,7 +172,7 @@ const moduleStyles = {
             paddingLeft: '0.5em',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 const ModuleTypesIcons = {
     app: <WidgetsOutlined sx={moduleStyles.icons} fontSize="small" color="primary" />,
@@ -410,7 +408,11 @@ export function AboutDialog({
                                         version: (
                                             <Typography
                                                 component="span"
-                                                sx={styles.versionField(!loadingGlobalVersion && !!actualGlobalVersion)}
+                                                sx={
+                                                    !loadingGlobalVersion && !!actualGlobalVersion
+                                                        ? styles.versionFieldUnknown
+                                                        : styles.versionField
+                                                }
                                             >
                                                 {actualGlobalVersion || 'unknown'}
                                             </Typography>
diff --git a/src/components/topBar/GridLogo.tsx b/src/components/topBar/GridLogo.tsx
index 33872918..9f998b80 100644
--- a/src/components/topBar/GridLogo.tsx
+++ b/src/components/topBar/GridLogo.tsx
@@ -5,10 +5,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Box, SxProps, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { BrokenImage } from '@mui/icons-material';
 import { ReactNode } from 'react';
-import { mergeSx } from '../../utils/styles';
+import { mergeSx, type MuiStyle, type MuiStyles } from '../../utils/styles';
 
 const styles = {
     logo: {
@@ -24,7 +24,7 @@ const styles = {
     clickable: {
         cursor: 'pointer',
     },
-};
+} as const satisfies MuiStyles;
 
 export interface GridLogoProps extends Omit<LogoTextProps, 'style'> {
     appLogo: ReactNode;
@@ -53,6 +53,6 @@ export function GridLogo({ appLogo, appName, appColor, onClick }: Partial<GridLo
 export interface LogoTextProps {
     appName: string;
     appColor: string;
-    style: SxProps;
+    style: MuiStyle;
     onClick: () => void;
 }
diff --git a/src/components/topBar/TopBar.tsx b/src/components/topBar/TopBar.tsx
index 2c29d1dc..a45b9532 100644
--- a/src/components/topBar/TopBar.tsx
+++ b/src/components/topBar/TopBar.tsx
@@ -23,7 +23,7 @@ import {
     MenuProps,
     Paper,
     Popper,
-    Theme,
+    styled,
     ToggleButton,
     ToggleButtonGroup,
     Toolbar,
@@ -37,13 +37,11 @@ import {
     Computer as ComputerIcon,
     ExitToApp as ExitToAppIcon,
     HelpOutline as HelpOutlineIcon,
-    Person as PersonIcon,
     ManageAccounts,
+    Person as PersonIcon,
     Settings as SettingsIcon,
     WbSunny as WbSunnyIcon,
 } from '@mui/icons-material';
-import { styled } from '@mui/system';
-
 import { User } from 'oidc-client';
 import { GridLogo, GridLogoProps } from './GridLogo';
 import { AboutDialog, AboutDialogProps } from './AboutDialog';
@@ -58,6 +56,7 @@ import {
     LANG_SYSTEM,
     LIGHT_THEME,
 } from '../../utils/constants/browserConstants';
+import { type MuiStyles } from '../../utils/styles';
 
 const styles = {
     grow: {
@@ -72,7 +71,7 @@ const styles = {
         textDecoration: 'none',
         color: 'inherit',
     },
-    name: (theme: Theme) => ({
+    name: (theme) => ({
         backgroundColor: darken(theme.palette.background.paper, 0.1),
         paddingTop: '10px',
         borderRadius: '100%',
@@ -119,7 +118,7 @@ const styles = {
         height: '30px',
         width: '48px',
     },
-};
+} as const satisfies MuiStyles;
 
 const StyledMenu = styled((props: MenuProps) => (
     <Menu
diff --git a/src/components/topBar/UserInformationDialog.tsx b/src/components/topBar/UserInformationDialog.tsx
index 91cfcf97..40b9140a 100644
--- a/src/components/topBar/UserInformationDialog.tsx
+++ b/src/components/topBar/UserInformationDialog.tsx
@@ -5,14 +5,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Dialog, DialogActions, DialogContent, DialogTitle, Grid, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, Dialog, DialogActions, DialogContent, DialogTitle, Grid, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { User } from 'oidc-client';
 import { useEffect, useState } from 'react';
 import { CancelButton } from '../inputs/reactHookForm/utils/CancelButton';
 import fetchUserDetails from '../../services/userAdmin';
 import { UserDetail } from '../../utils/types/types';
+import { type MuiStyles } from '../../utils/styles';
 
 const styles = {
     DialogTitle: { fontSize: '1.5rem' },
@@ -20,7 +20,7 @@ const styles = {
     quotasBox: { marginTop: '60px' },
     quotasTopography: { marginTop: '30px', marginBottom: '25px', fontSize: '1.15rem' },
     usedTopography: { marginLeft: '15%' },
-};
+} as const satisfies MuiStyles;
 
 interface UserInformationDialogProps {
     openDialog: boolean;
diff --git a/src/components/treeViewFinder/TreeViewFinder.tsx b/src/components/treeViewFinder/TreeViewFinder.tsx
index e3160048..f9a1b901 100644
--- a/src/components/treeViewFinder/TreeViewFinder.tsx
+++ b/src/components/treeViewFinder/TreeViewFinder.tsx
@@ -7,9 +7,6 @@
 
 import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-
-import { styled } from '@mui/system';
-
 import {
     Button,
     ButtonProps,
@@ -18,17 +15,17 @@ import {
     DialogContent,
     DialogContentText,
     DialogTitle,
-    Typography,
     ModalProps,
+    styled,
+    Typography,
 } from '@mui/material';
-
 import { TreeItem, TreeView, TreeViewClasses } from '@mui/x-tree-view';
 import {
     Check as CheckIcon,
     ChevronRight as ChevronRightIcon,
     ExpandMore as ExpandMoreIcon,
 } from '@mui/icons-material';
-import { makeComposeClasses, toNestedGlobalSelectors } from '../../utils/styles';
+import { makeComposeClasses, type MuiStyles, toNestedGlobalSelectors } from '../../utils/styles';
 import { CancelButton } from '../inputs/reactHookForm/utils/CancelButton';
 
 // As a bunch of individual variables to try to make it easier
@@ -61,7 +58,7 @@ const defaultStyles = {
         marginRight: '4px',
     },
     [cssIcon]: {},
-};
+} as const satisfies MuiStyles;
 
 export const generateTreeViewFinderClass = (className: string) => `GsiTreeViewFinder-${className}`;
 const composeClasses = makeComposeClasses(generateTreeViewFinderClass);
diff --git a/src/module-emotion.d.ts b/src/module-emotion.d.ts
new file mode 100644
index 00000000..0a217ee5
--- /dev/null
+++ b/src/module-emotion.d.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright © 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+// https://github.com/emotion-js/emotion/discussions/2291
+//   https://emotion.sh/docs/typescript#define-a-theme
+
+// import { Theme as EmotionTheme } from '@emotion/react';
+import { Theme as MaterialUITheme } from '@mui/material';
+
+declare module '@emotion/react' {
+    // Re-declare the emotion theme to have the properties of the MaterialUiTheme
+    // eslint-disable-next-line spaced-comment
+    export interface Theme extends /*EmotionTheme,*/ MaterialUITheme {}
+}
diff --git a/src/module-mui.d.ts b/src/module-mui.d.ts
index eb2d1037..fccdd23e 100644
--- a/src/module-mui.d.ts
+++ b/src/module-mui.d.ts
@@ -1,21 +1,45 @@
-/**
- * Copyright (c) 2024, RTE (http://www.rte-france.com)
+/*
+ * Copyright © 2024, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+/* eslint-disable spaced-comment */
+//import { Theme as MuiTheme, ThemeOptions as MuiThemeOptions } from '@mui/material/styles/createTheme';
+//import { Palette as MuiPalette, PaletteOptions as MuiPaletteOptions } from '@mui/material/styles/createPalette';
+import type { CSSObject } from '@mui/styled-engine';
+import type { Property } from 'csstype';
+
+type CommonMuiTheme = {
+    aggrid: {
+        theme: 'ag-theme-alpine' | 'ag-theme-alpine-dark';
+        highlightColor: Property.Color;
+        valueChangeHighlightBackgroundColor: Property.Color;
+        overlay: {
+            background: CSSObject;
+        };
+        background: CSSObject;
+    };
+};
+
+type CommonMuiPalette = {};
+
 // used to customize mui theme
 // https://mui.com/material-ui/customization/theming/#typescript
-declare module '@mui/material/styles/createTheme' {
-    interface Theme {
-        aggrid: {
-            theme: string;
-            highlightColor: string;
-            valueChangeHighlightBackgroundColor: string;
-            overlay: {
-                background: string;
-            };
-        };
-    }
+declare module '@mui/material/styles' {
+    // export * from '@mui/material/styles';
+
+    export interface Theme extends /*MuiTheme,*/ Required<CommonMuiTheme> {}
+    // allow configuration using `createTheme`
+    export interface ThemeOptions extends /*MuiThemeOptions,*/ Partial<CommonMuiTheme> {}
+
+    export interface Palette extends /*MuiPalette,*/ Required<CommonMuiPalette> {}
+    // allow configuration using `createPalette`
+    export interface PaletteOptions extends /*MuiPaletteOptions,*/ Partial<CommonMuiPalette> {}
+}
+
+declare module '@mui/utils/capitalize' {
+    // override to have result prediction
+    export default function capitalize<S extends string>(string: S): Capitalize<S>;
 }
diff --git a/src/tests/testsUtils.test.tsx b/src/tests/testsUtils.test.tsx
index 04aab50b..71560e7f 100644
--- a/src/tests/testsUtils.test.tsx
+++ b/src/tests/testsUtils.test.tsx
@@ -5,28 +5,28 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+import { type ReactElement } from 'react';
 import { render as rtlRender } from '@testing-library/react';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, type Theme, ThemeProvider } from '@mui/material';
 import { IntlProvider } from 'react-intl';
-import { Theme } from '@mui/system';
 import {
-    loginEn,
-    reportViewerEn,
-    topBarEn,
-    tableEn,
-    treeviewFinderEn,
+    cardErrorBoundaryEn,
+    commonButtonEn,
+    csvEn,
+    descriptionEn,
+    directoryItemsInputEn,
     elementSearchEn,
     equipmentSearchEn,
+    equipmentsEn,
     filterEn,
     filterExpertEn,
-    descriptionEn,
-    equipmentsEn,
-    csvEn,
-    cardErrorBoundaryEn,
     flatParametersEn,
+    loginEn,
     multipleSelectionDialogEn,
-    commonButtonEn,
-    directoryItemsInputEn,
+    reportViewerEn,
+    tableEn,
+    topBarEn,
+    treeviewFinderEn,
 } from '../translations/en';
 
 const fullTrad = {
@@ -48,7 +48,7 @@ const fullTrad = {
     ...commonButtonEn,
     ...directoryItemsInputEn,
 };
-const renderWithTranslation = (ui: React.ReactElement, trad: Record<string, string> = fullTrad) => (
+const renderWithTranslation = (ui: ReactElement, trad: Record<string, string> = fullTrad) => (
     <IntlProvider locale="en" messages={trad}>
         {ui}
     </IntlProvider>
@@ -85,7 +85,7 @@ const lightTheme = createTheme(
         },
     }
 );
-const renderWithTheme = (ui: React.ReactElement, theme: Theme = lightTheme) => (
+const renderWithTheme = (ui: ReactElement, theme: Theme = lightTheme) => (
     <ThemeProvider theme={theme}>{ui}</ThemeProvider>
 );
 
diff --git a/src/utils/mapper/getFileIcon.tsx b/src/utils/mapper/getFileIcon.tsx
index 930a71dd..bfafa50d 100644
--- a/src/utils/mapper/getFileIcon.tsx
+++ b/src/utils/mapper/getFileIcon.tsx
@@ -14,10 +14,10 @@ import {
     Settings as SettingsIcon,
     TableView as TableViewIcon,
 } from '@mui/icons-material';
-import { SxProps, Theme } from '@mui/material';
+import { type MuiStyle } from '../styles';
 import { ElementType } from '../types/elementType';
 
-export function getFileIcon(type: ElementType, style: SxProps<Theme>) {
+export function getFileIcon(type: ElementType, style: MuiStyle) {
     switch (type) {
         case ElementType.STUDY:
             return <PhotoLibraryIcon sx={style} />;
diff --git a/src/utils/styles.ts b/src/utils/styles.ts
index ed86480a..80ec99c9 100644
--- a/src/utils/styles.ts
+++ b/src/utils/styles.ts
@@ -5,6 +5,22 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { SxProps, Theme } from '@mui/material';
+import type { SystemStyleObject } from '@mui/system';
+
+/**
+ * Mui's {@link SxProps} preset with {@link Theme}.
+ */
+export type MuiStyle = SxProps<Theme>;
+
+/**
+ * Alias for `const styles = {}` definitions.
+ */
+export type MuiStyles = Record<string, SxProps<Theme>>;
+
+/**
+ * Same Mui's SxProps, but without the array and function version in possibilities.
+ */
+export type MuiStyleObj = SystemStyleObject<Theme>;
 
 // TODO do we need to export this to clients (index.ts) ?
 // like mui sx(slot)/class merging but simpler with less features
@@ -16,11 +32,11 @@ export const makeComposeClasses =
 export const toNestedGlobalSelectors = (styles: object, generateGlobalClass: (className: string) => string) =>
     Object.fromEntries(Object.entries(styles).map(([k, v]) => [`& .${generateGlobalClass(k)}`, v]));
 
-const isSxProps = (sx: SxProps<Theme> | undefined): sx is SxProps => {
+const isSxProps = (sx: MuiStyle | undefined): sx is SxProps => {
     return sx !== undefined;
 };
 
 // https://mui.com/system/getting-started/the-sx-prop/#passing-the-sx-prop
 // You cannot spread or concat directly because `SxProps` (typeof sx) can be an array. */
 // same as [{}, ...(Array.isArray(sx) ? sx : [sx])]
-export const mergeSx = (...allSx: (SxProps<Theme> | undefined)[]) => allSx.filter(isSxProps).flat();
+export const mergeSx = (...allSx: (MuiStyle | undefined)[]) => allSx.filter(isSxProps).flat();
diff --git a/src/utils/types/equipmentType.ts b/src/utils/types/equipmentType.ts
index 953c31eb..ce496a56 100644
--- a/src/utils/types/equipmentType.ts
+++ b/src/utils/types/equipmentType.ts
@@ -5,8 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Theme } from '@mui/material';
-import { LIGHT_THEME } from '../constants/browserConstants';
+import { type MuiStyles } from '../styles';
 
 export const TYPE_TAG_MAX_SIZE = '90px';
 export const VL_TAG_MAX_SIZE = '100px';
@@ -21,16 +20,12 @@ export const equipmentStyles = {
         alignItems: 'center',
         justifyContent: 'space-between',
     },
-    equipmentTag: (theme: string | Theme) => ({
+    equipmentTag: (theme) => ({
         borderRadius: '10px',
         padding: '4px',
         fontSize: 'x-small',
         textAlign: 'center',
-        color:
-            // TODO remove first condition when gridstudy is updated
-            theme === LIGHT_THEME || (typeof theme !== 'string' && theme?.palette?.mode === 'light')
-                ? 'inherit'
-                : 'black',
+        color: theme.palette.mode === 'light' ? 'inherit' : 'black',
     }),
     equipmentTypeTag: {
         minWidth: TYPE_TAG_MAX_SIZE,
@@ -48,7 +43,7 @@ export const equipmentStyles = {
         width: '100%',
         padding: '2px',
     },
-};
+} as const satisfies MuiStyles;
 
 /**
  * The order of the equipments in this list is important, as many UI follow it directly.
diff --git a/vite.config.mts b/vite.config.mts
index c9aa0f24..03dfa6df 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -6,8 +6,8 @@
  */
 
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
-import type { PluginOption } from 'vite'; // eslint-disable-line no-unused-vars
+import { defineConfig, type PluginOption } from 'vite'; // eslint-disable-line no-unused-vars
+// @ts-expect-error TS7016: Could not find a declaration file for module vite-plugin-eslint implicitly has an any type.
 import eslint from 'vite-plugin-eslint';
 import svgr from 'vite-plugin-svgr';
 import { libInjectCss } from 'vite-plugin-lib-inject-css';
@@ -44,7 +44,7 @@ export default defineConfig((config) => ({
             // from https://rollupjs.org/configuration-options/#input
             input: Object.fromEntries(
                 globSync('src/**/*.{js,jsx,ts,tsx}', {
-                    ignore: ['src/vite-env.d.ts', 'src/**/*.test.{js,jsx,ts,tsx}'],
+                    ignore: ['src/vite-env.d.ts', 'src/module-*.d.ts', 'src/**/*.test.{js,jsx,ts,tsx}'],
                 }).map((file) => [
                     // This remove `src/` as well as the file extension from each
                     // file, so e.g. src/nested/foo.js becomes nested/foo