diff --git a/packages/mindplot/package.json b/packages/mindplot/package.json
index 151dedc8..dbdc6e3c 100644
--- a/packages/mindplot/package.json
+++ b/packages/mindplot/package.json
@@ -21,7 +21,7 @@
     },
     "scripts": {
         "build": "webpack --config webpack.prod.js",
-        "test": "webpack serve --config webpack.test.js",
+        "tests": "webpack serve --config webpack.test.js",
         "start": "webpack serve --config webpack.dev.js"
     },
     "dependencies": {
diff --git a/packages/web2d/package.json b/packages/web2d/package.json
index a76f996b..6fe97a42 100644
--- a/packages/web2d/package.json
+++ b/packages/web2d/package.json
@@ -22,7 +22,7 @@
     "scripts": {
         "start": "nodemon --watch lib",
         "build": "webpack --config webpack.prod.js",
-        "test": "webpack serve --config webpack.test.js"
+        "tests": "webpack serve --config webpack.test.js"
     },
     "devDependencies": {
         "@babel/core": "^7.14.6",
diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx
index 1c4edb02..1d403f0e 100644
--- a/packages/webapp/src/app.tsx
+++ b/packages/webapp/src/app.tsx
@@ -72,8 +72,8 @@ const App = (): ReactElement => {
             </QueryClientProvider>
         </Provider>
     ) : (
-            <div>Loading ... </div>
-        );
+        <div>Loading ... </div>
+    );
 };
 
 export default App;
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx
index 6c26c9e2..e4f05a4b 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx
@@ -66,7 +66,7 @@ const CreateDialog = ({ onClose }: CreateProps): React.ReactElement => {
                 error={error}
                 title={intl.formatMessage({
                     id: 'create.title',
-                    defaultMessage: 'Create a new mindmap.',
+                    defaultMessage: 'Create a new mindmap',
                 })}
                 description={intl.formatMessage({
                     id: 'create.description',
diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx
index 4ef4557c..6804e1b7 100644
--- a/packages/webapp/src/components/maps-page/index.tsx
+++ b/packages/webapp/src/components/maps-page/index.tsx
@@ -67,7 +67,10 @@ const MapsPage = (): ReactElement => {
     const intl = useIntl();
 
     useEffect(() => {
-        document.title = intl.formatMessage({ id: 'maps.page-title', defaultMessage: 'My Maps | WiseMapping' });
+        document.title = intl.formatMessage({
+            id: 'maps.page-title',
+            defaultMessage: 'My Maps | WiseMapping',
+        });
     }, []);
 
     const mutation = useMutation((id: number) => client.deleteLabel(id), {
@@ -94,27 +97,27 @@ const MapsPage = (): ReactElement => {
     const filterButtons: ToolbarButtonInfo[] = [
         {
             filter: { type: 'all' },
-            label: intl.formatMessage({ id: 'maps.nav-all', defaultMessage:'All' }),
+            label: intl.formatMessage({ id: 'maps.nav-all', defaultMessage: 'All' }),
             icon: <ScatterPlotTwoTone color="secondary" />,
         },
         {
             filter: { type: 'owned' },
-            label: intl.formatMessage({ id: 'maps.nav-onwned', defaultMessage:'Owned' }),
+            label: intl.formatMessage({ id: 'maps.nav-onwned', defaultMessage: 'Owned' }),
             icon: <PersonOutlineTwoTone color="secondary" />,
         },
         {
             filter: { type: 'starred' },
-            label: intl.formatMessage({ id: 'maps.nav-starred', defaultMessage:'Starred' }),
+            label: intl.formatMessage({ id: 'maps.nav-starred', defaultMessage: 'Starred' }),
             icon: <StarTwoTone color="secondary" />,
         },
         {
             filter: { type: 'shared' },
-            label: intl.formatMessage({ id: 'maps.nav-shared', defaultMessage:'Shared with me' }),
+            label: intl.formatMessage({ id: 'maps.nav-shared', defaultMessage: 'Shared with me' }),
             icon: <ShareTwoTone color="secondary" />,
         },
         {
             filter: { type: 'public' },
-            label: intl.formatMessage({ id: 'maps.nav-public', defaultMessage:'Public' }),
+            label: intl.formatMessage({ id: 'maps.nav-public', defaultMessage: 'Public' }),
             icon: <PublicTwoTone color="secondary" />,
         },
     ];
@@ -219,18 +222,19 @@ const MapsPage = (): ReactElement => {
                     </div>
 
                     <List component="nav">
-                        {filterButtons.map(buttonInfo => {
-                            return (<StyleListItem
-                                icon={buttonInfo.icon}
-                                label={buttonInfo.label}
-                                filter={buttonInfo.filter}
-                                active={filter}
-                                onClick={handleMenuClick}
-                                onDelete={handleLabelDelete}
-                                key={`${buttonInfo.filter.type}:${buttonInfo.label}`}
-                            />)
-                        }
-                        )}
+                        {filterButtons.map((buttonInfo) => {
+                            return (
+                                <StyleListItem
+                                    icon={buttonInfo.icon}
+                                    label={buttonInfo.label}
+                                    filter={buttonInfo.filter}
+                                    active={filter}
+                                    onClick={handleMenuClick}
+                                    onDelete={handleLabelDelete}
+                                    key={`${buttonInfo.filter.type}:${buttonInfo.label}`}
+                                />
+                            );
+                        })}
                     </List>
 
                     <div
diff --git a/packages/webapp/src/components/maps-page/maps-list/index.tsx b/packages/webapp/src/components/maps-page/maps-list/index.tsx
index 36f16256..098cc98c 100644
--- a/packages/webapp/src/components/maps-page/maps-list/index.tsx
+++ b/packages/webapp/src/components/maps-page/maps-list/index.tsx
@@ -57,9 +57,9 @@ function getComparator<Key extends keyof any>(
     order: Order,
     orderBy: Key
 ): (
-        a: { [key in Key]: number | string | boolean | Label[] | undefined },
-        b: { [key in Key]: number | string | Label[] | boolean }
-    ) => number {
+    a: { [key in Key]: number | string | boolean | Label[] | undefined },
+    b: { [key in Key]: number | string | Label[] | boolean }
+) => number {
     return order === 'desc'
         ? (a, b) => descendingComparator(a, b, orderBy)
         : (a, b) => -descendingComparator(a, b, orderBy);
@@ -95,15 +95,8 @@ interface EnhancedTableProps {
 function EnhancedTableHead(props: EnhancedTableProps) {
     const intl = useIntl();
 
-    const {
-        classes,
-        onSelectAllClick,
-        order,
-        orderBy,
-        numSelected,
-        rowCount,
-        onRequestSort,
-    } = props;
+    const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
+        props;
 
     const createSortHandler = (property: keyof MapInfo) => (event: React.MouseEvent<unknown>) => {
         onRequestSort(event, property);
@@ -117,7 +110,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
         },
         {
             id: 'labels',
-            numeric: false
+            numeric: false,
         },
         {
             id: 'createdBy',
@@ -222,7 +215,8 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
                 break;
             case 'label':
                 result =
-                    !mapInfo.labels || mapInfo.labels.some((label) => label.id === (filter as LabelFilter).label.id)
+                    !mapInfo.labels ||
+                    mapInfo.labels.some((label) => label.id === (filter as LabelFilter).label.id);
                 break;
             case 'public':
                 result = mapInfo.isPublic;
@@ -336,19 +330,18 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
             event.stopPropagation();
         };
     };
-    9
+    9;
     const starredMultation = useMutation<void, ErrorInfo, number>(
         (id: number) => {
             const map = mapsInfo.find((m) => m.id == id);
-            const starred = !(map?.starred);
+            const starred = !map?.starred;
 
             // Follow a optimistic update approach ...
-            queryClient.setQueryData<MapInfo[]>('maps', mapsInfo => {
+            queryClient.setQueryData<MapInfo[]>('maps', (mapsInfo) => {
                 if (map) {
                     map.starred = starred;
                 }
                 return mapsInfo || [];
-
             });
             return client.updateStarred(id, starred);
         },
@@ -404,7 +397,13 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                 <Toolbar className={classes.toolbar} variant="dense">
                     <div className={classes.toolbarActions}>
                         {selected.length > 0 && (
-                            <Tooltip arrow={true} title={intl.formatMessage({ id: 'map.delete-selected', defaultMessage: 'Delete selected' })}>
+                            <Tooltip
+                                arrow={true}
+                                title={intl.formatMessage({
+                                    id: 'map.delete-selected',
+                                    defaultMessage: 'Delete selected',
+                                })}
+                            >
                                 <Button
                                     color="primary"
                                     size="medium"
@@ -429,8 +428,8 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                             rowsPerPageOptions={[]}
                             rowsPerPage={rowsPerPage}
                             page={page}
-                            onChangePage={handleChangePage}
-                            onChangeRowsPerPage={handleChangeRowsPerPage}
+                            onPageChange={handleChangePage}
+                            onRowsPerPageChange={handleChangeRowsPerPage}
                             component="div"
                         />
 
@@ -439,7 +438,10 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                                 <SearchIcon />
                             </div>
                             <InputBase
-                                placeholder={intl.formatMessage({ id: 'maps.search-action', defaultMessage: 'Search ...' })}
+                                placeholder={intl.formatMessage({
+                                    id: 'maps.search-action',
+                                    defaultMessage: 'Search ...',
+                                })}
                                 classes={{
                                     root: classes.searchInputRoot,
                                     input: classes.searchInputInput,
@@ -478,119 +480,140 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                                     </TableCell>
                                 </TableRow>
                             ) : (
-                                        stableSort(mapsInfo, getComparator(order, orderBy))
-                                            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                                            .map((row: MapInfo) => {
-                                                const isItemSelected = isSelected(row.id);
-                                                const labelId = row.id;
+                                stableSort(mapsInfo, getComparator(order, orderBy))
+                                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                                    .map((row: MapInfo) => {
+                                        const isItemSelected = isSelected(row.id);
+                                        const labelId = row.id;
 
-                                                return (
-                                                    <TableRow
-                                                        hover
-                                                        onClick={(event) => handleRowClick(event, row.id)}
-                                                        role="checkbox"
-                                                        aria-checked={isItemSelected}
-                                                        tabIndex={-1}
-                                                        key={row.id}
-                                                        selected={isItemSelected}
-                                                        style={{ border: '0' }}
+                                        return (
+                                            <TableRow
+                                                hover
+                                                onClick={(event) => handleRowClick(event, row.id)}
+                                                role="checkbox"
+                                                aria-checked={isItemSelected}
+                                                tabIndex={-1}
+                                                key={row.id}
+                                                selected={isItemSelected}
+                                                style={{ border: '0' }}
+                                            >
+                                                <TableCell
+                                                    padding="checkbox"
+                                                    className={classes.bodyCell}
+                                                >
+                                                    <Checkbox
+                                                        checked={isItemSelected}
+                                                        inputProps={{
+                                                            'aria-labelledby': String(labelId),
+                                                        }}
+                                                        size="small"
+                                                    />
+                                                </TableCell>
+
+                                                <TableCell
+                                                    padding="checkbox"
+                                                    className={classes.bodyCell}
+                                                >
+                                                    <Tooltip
+                                                        arrow={true}
+                                                        title={intl.formatMessage({
+                                                            id: 'maps.tooltip-starred',
+                                                            defaultMessage: 'Starred',
+                                                        })}
                                                     >
-                                                        <TableCell
-                                                            padding="checkbox"
-                                                            className={classes.bodyCell}
+                                                        <IconButton
+                                                            size="small"
+                                                            onClick={(e) =>
+                                                                handleStarred(e, row.id)
+                                                            }
                                                         >
-                                                            <Checkbox
-                                                                checked={isItemSelected}
-                                                                inputProps={{
-                                                                    'aria-labelledby': String(labelId),
+                                                            <StarRateRoundedIcon
+                                                                color="action"
+                                                                style={{
+                                                                    color: row.starred
+                                                                        ? 'yellow'
+                                                                        : 'gray',
                                                                 }}
-                                                                size="small"
                                                             />
-                                                        </TableCell>
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                </TableCell>
 
-                                                        <TableCell
-                                                            padding="checkbox"
-                                                            className={classes.bodyCell}
+                                                <TableCell className={classes.bodyCell}>
+                                                    <Tooltip
+                                                        arrow={true}
+                                                        title={intl.formatMessage({
+                                                            id: 'maps.tooltip-open',
+                                                            defaultMessage: 'Open for edition',
+                                                        })}
+                                                        placement="bottom-start"
+                                                    >
+                                                        <Link
+                                                            href={`/c/maps/${row.id}/edit`}
+                                                            color="textPrimary"
+                                                            underline="always"
+                                                            onClick={(e) => e.stopPropagation()}
                                                         >
-                                                            <Tooltip arrow={true} title={intl.formatMessage({ id: 'maps.tooltip-starred', defaultMessage: 'Starred' })}>
-                                                                <IconButton
-                                                                    size="small"
-                                                                    onClick={(e) =>
-                                                                        handleStarred(e, row.id)
-                                                                    }
-                                                                >
-                                                                    <StarRateRoundedIcon
-                                                                        color="action"
-                                                                        style={{
-                                                                            color: row.starred
-                                                                                ? 'yellow'
-                                                                                : 'gray',
-                                                                        }}
-                                                                    />
-                                                                </IconButton>
-                                                            </Tooltip>
-                                                        </TableCell>
+                                                            {row.title}
+                                                        </Link>
+                                                    </Tooltip>
+                                                </TableCell>
 
-                                                        <TableCell className={classes.bodyCell}>
-                                                            <Tooltip
-                                                                arrow={true}
-                                                                title={intl.formatMessage({ id: 'maps.tooltip-open', defaultMessage: 'Open for edition' })}
-                                                                placement="bottom-start"
-                                                            >
-                                                                <Link
-                                                                    href={`/c/maps/${row.id}/edit`}
-                                                                    color="textPrimary"
-                                                                    underline="always"
-                                                                    onClick={(e) => e.stopPropagation()}
-                                                                >
-                                                                    {row.title}
-                                                                </Link>
-                                                            </Tooltip>
-                                                        </TableCell>
+                                                <TableCell className={classes.bodyCell}>
+                                                    <LabelsCell labels={row.labels} />
+                                                </TableCell>
 
-                                                        <TableCell className={classes.bodyCell}>
-                                                            <LabelsCell labels={row.labels} />
-                                                        </TableCell>
+                                                <TableCell className={classes.bodyCell}>
+                                                    {row.createdBy}
+                                                </TableCell>
 
-                                                        <TableCell className={classes.bodyCell}>
-                                                            {row.createdBy}
-                                                        </TableCell>
+                                                <TableCell className={classes.bodyCell}>
+                                                    <Tooltip
+                                                        arrow={true}
+                                                        title={intl.formatMessage(
+                                                            {
+                                                                id: 'maps.modified-by-desc',
+                                                                defaultMessage:
+                                                                    'Modified by {by} on {on}',
+                                                            },
+                                                            {
+                                                                by: row.lastModificationBy,
+                                                                on: dayjs(
+                                                                    row.lastModificationTime
+                                                                ).format('lll'),
+                                                            }
+                                                        )}
+                                                        placement="bottom-start"
+                                                    >
+                                                        <span>
+                                                            {dayjs(
+                                                                row.lastModificationTime
+                                                            ).fromNow()}
+                                                        </span>
+                                                    </Tooltip>
+                                                </TableCell>
 
-                                                        <TableCell className={classes.bodyCell}>
-                                                            <Tooltip
-                                                                arrow={true}
-                                                                title={intl.formatMessage({ id: 'maps.modified-by-desc', defaultMessage: 'Modified by {by} on {on}' }, { by: row.lastModificationBy, on: dayjs(row.lastModificationTime).format('lll') })}
-                                                                placement="bottom-start"
-                                                            >
-                                                                <span>
-                                                                    {dayjs(
-                                                                        row.lastModificationTime
-                                                                    ).fromNow()}
-                                                                </span>
-                                                            </Tooltip>
-                                                        </TableCell>
-
-                                                        <TableCell className={classes.bodyCell}>
-                                                            <Tooltip
-                                                                arrow={true}
-                                                                title={intl.formatMessage({
-                                                                    id: 'map.more-actions',
-                                                                    defaultMessage: 'More Actions',
-                                                                })}
-                                                            >
-                                                                <IconButton
-                                                                    aria-label="Others"
-                                                                    size="small"
-                                                                    onClick={handleActionClick(row.id)}
-                                                                >
-                                                                    <MoreHorizIcon color="action" />
-                                                                </IconButton>
-                                                            </Tooltip>
-                                                        </TableCell>
-                                                    </TableRow>
-                                                );
-                                            })
-                                    )}
+                                                <TableCell className={classes.bodyCell}>
+                                                    <Tooltip
+                                                        arrow={true}
+                                                        title={intl.formatMessage({
+                                                            id: 'map.more-actions',
+                                                            defaultMessage: 'More Actions',
+                                                        })}
+                                                    >
+                                                        <IconButton
+                                                            aria-label="Others"
+                                                            size="small"
+                                                            onClick={handleActionClick(row.id)}
+                                                        >
+                                                            <MoreHorizIcon color="action" />
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                </TableCell>
+                                            </TableRow>
+                                        );
+                                    })
+                            )}
                         </TableBody>
                     </Table>
                 </TableContainer>
@@ -601,6 +624,6 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                 onClose={() => setActiveDialog(undefined)}
                 mapsId={activeDialog ? activeDialog.mapsId : []}
             />
-        </div >
+        </div>
     );
 };
diff --git a/packages/webapp/src/components/maps-page/maps-list/styled.ts b/packages/webapp/src/components/maps-page/maps-list/styled.ts
index 8a444b4c..2a4932c9 100644
--- a/packages/webapp/src/components/maps-page/maps-list/styled.ts
+++ b/packages/webapp/src/components/maps-page/maps-list/styled.ts
@@ -1,5 +1,5 @@
 import { fade } from '@material-ui/core/styles';
-import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import { Theme } from '@material-ui/core/styles/createTheme';
 import createStyles from '@material-ui/core/styles/createStyles';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 
diff --git a/packages/webapp/src/components/maps-page/style.ts b/packages/webapp/src/components/maps-page/style.ts
index c2bc7a72..ab6f4746 100644
--- a/packages/webapp/src/components/maps-page/style.ts
+++ b/packages/webapp/src/components/maps-page/style.ts
@@ -1,4 +1,4 @@
-import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import { Theme } from '@material-ui/core/styles/createTheme';
 import createStyles from '@material-ui/core/styles/createStyles';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 
@@ -27,11 +27,11 @@ export const useStyles = makeStyles((theme: Theme) =>
         },
         newMapButton: {
             marginRight: 10,
-            minWidth: '130px'
+            minWidth: '130px',
         },
         importButton: {
             marginRight: 10,
-            minWidth: '130px'
+            minWidth: '130px',
         },
         rightButtonGroup: {
             marginRight: 10,
diff --git a/packages/webapp/src/theme/index.ts b/packages/webapp/src/theme/index.ts
index 44950279..332b2588 100644
--- a/packages/webapp/src/theme/index.ts
+++ b/packages/webapp/src/theme/index.ts
@@ -1,4 +1,4 @@
-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import createMuiTheme from '@material-ui/core/styles/createTheme';
 
 const theme = createMuiTheme({
     overrides: {
@@ -6,8 +6,8 @@ const theme = createMuiTheme({
             '@global': {
                 body: {
                     backgroundColor: 'white',
-                    // Important: This size is the min to diplay all pages except maps list. 
-                    minWidth: '450px'
+                    // Important: This size is the min to diplay all pages except maps list.
+                    minWidth: '450px',
                 },
             },
         },
@@ -28,9 +28,9 @@ const theme = createMuiTheme({
             root: {
                 color: '#f9a826',
             },
-            outlined:{
-                zIndex: 'inherit'
-            }
+            outlined: {
+                zIndex: 'inherit',
+            },
         },
         MuiButton: {
             root: {
@@ -47,7 +47,7 @@ const theme = createMuiTheme({
                 '&:hover': {
                     backgroundColor: 'rgba(249, 168, 38, 0.91)',
                 },
-            }
+            },
         },
     },
     typography: {
diff --git a/packages/webcomponent/.gitignore b/packages/webcomponent/.gitignore
index e69de29b..b7433c5b 100644
--- a/packages/webcomponent/.gitignore
+++ b/packages/webcomponent/.gitignore
@@ -0,0 +1,3 @@
+lib/
+node_module/
+