diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8bc48c4..f8d8ae1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [v2.6.0](https://github.com/netservicespa/astrea-react-ds/commit/94a729a8687c6be837e21e10fe1523dac3b19442) (Nov 15 2024)
+
+## New Additions
+
+- **NsNotificationList**:
+  - Introduced the new `NsNotificationList` component.
+  - Added translation support.
+  - Exported types for usage.
+  - Created a Storybook story for demonstration.
+
+- **NsDataGrid**:
+  - Column Visibility Menu: Introduced a menu to manage column visibility, dynamically positionable using the render function within the table component.
+
+- **Storybook**:
+  - Added Figma integration within Storybook stories.
+
+## Improved
+
+- **NsCard**:
+  - Added `sx` support for enhanced customization.
+
+- **NsTooltip**:
+  - Expanded applicability, allowing tooltips to be applied to any element instead of just icons.
+
+- **Storybook**:
+  - Removed `@storybook/addon-mdx-gfm` as it is no longer necessary.
+  - Integrated `Remark` to support GitHub Flavored Markdown (GFM) in Storybook documentation.
+  - Upgraded Storybook to version 8.4.
+
+- **NsDataGrid**:
+  - Custom Layout Support: Updated `NsDataGridClient` to accept a custom renderer for flexible layouts.
+  - Translation Structure: Introduced `table.controls` section for handling translations, starting with `columnVisibility: "Columns Visibility"`.
+  - Dynamic Alignment: The column visibility button is now right-aligned using `justifyContent: 'flex-end`.
+  - Removed `Typography` within table cells to enable full cell customization.
+
+- **NsNotification**:
+  - Added the ability to include links in notifications.
+  - Introduced a `markAllAsRead` function.
+  - Enhanced translation support.
+
+- **NsHeader**:
+  - Added cascading menu support via dropdown, with an example in Storybook.
+  - Fixed `infoBox` positioning to align on the right.
+  - Removed unnecessary SVG margins.
+
+- **NsFeedback**:
+  - Improved colors based on accessibility testing.
+
+- **NsDropdown**:
+  - Added support for disabling the overlay.
+
+## Fixed
+
+- **Exports**:
+  - Removed `types.ts` file; type declarations are now included within component files.
+  - Resolved deprecated `assert.CallTracker` issue for compatibility with newer Node.js versions.
+
 # [v2.5.0](https://github.com/netservicespa/astrea-react-ds/commit/2395ae49e5f9e3d2443a81a162c3c1c094ccebed) (Nov 5 2024)
 
 ## New Additions
diff --git a/package.json b/package.json
index cf4e167..83aeb38 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netservice/astrea-react-ds",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "main": "dist/umd/index.min.js",
   "module": "dist/esm/index.js",
   "license": "Apache-2.0",
diff --git a/src/components/components/Dropdown/NsDropDown.tsx b/src/components/components/Dropdown/NsDropDown.tsx
index db65170..19cc93c 100644
--- a/src/components/components/Dropdown/NsDropDown.tsx
+++ b/src/components/components/Dropdown/NsDropDown.tsx
@@ -1,9 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useId } from 'react';
 import { Box, Divider, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
 import LogoutIcon from '@mui/icons-material/Logout';
-import { alpha, styled } from '@mui/material/styles';
-
+import { alpha, styled, SxProps, Theme, useTheme } from '@mui/material/styles';
+import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
 /**
  * DynamicLink/ dropdown Component
  * @author vadim.chilinciuc
@@ -11,7 +10,7 @@ import { alpha, styled } from '@mui/material/styles';
 
 export interface IDropdownItems {
     name: string;
-    path: string;
+    path: string | IDropdownItems[];
     icon?: React.ReactElement;
 }
 export interface IDropDownConfiguration {
@@ -23,6 +22,8 @@ export interface IDropDownConfiguration {
         vertical?: any;
         horizontal?: any;
     };
+    hover?: boolean;
+    dropDownIcon?: React.ReactElement | boolean;
 }
 export interface IDropDown {
     /**
@@ -53,6 +54,7 @@ export interface IDropDown {
      * Extra configuration for Backdrop.
      */
     overlay?: boolean;
+    icon?: boolean | React.ReactElement;
 }
 
 export interface DynamicLinkProps {
@@ -70,12 +72,11 @@ export interface DynamicLinkProps {
      * The clickable element (e.g., icon, div, component) that triggers the redirection.
      */
     children: any;
+    sx?: SxProps<Theme>;
 }
 
 export const StyledLink = styled('a')(({ theme }) => ({
     color: `${theme.palette.primary.main}`,
-    backgroundColor: 'transparent !important',
-    margin: '0px !important',
 }));
 
 const StyledMenu = styled(Menu)<{ overlay: boolean }>(({ theme, overlay }) => ({
@@ -84,34 +85,35 @@ const StyledMenu = styled(Menu)<{ overlay: boolean }>(({ theme, overlay }) => ({
     },
 }));
 
-export const DynamicLink = ({ router, to, children }: DynamicLinkProps) => {
+type ExtendChildrenProps = {
+    children: React.ReactElement;
+    icon?: boolean | React.ReactElement;
+    isOpen: boolean;
+};
+export const DynamicLink = ({ router, to, children, sx }: DynamicLinkProps) => {
     const isReactRouter = typeof router?.history !== 'undefined';
     const isNextRouter = typeof router?.push !== 'undefined';
-
+    const commonStyle = {
+        className: 'font-semiBold',
+        style: { textDecoration: 'none', cursor: 'pointer', margin: '0px' },
+        sx,
+    };
     if (isReactRouter) {
         return (
-            <StyledLink
-                onClick={() => router.history.push(to)}
-                className={'font-semiBold'}
-                style={{ textDecoration: 'none', cursor: 'pointer', margin: '0px' }}
-            >
+            <StyledLink onClick={() => router.history.push(to)} {...commonStyle}>
                 {children}
             </StyledLink>
         );
     } else if (isNextRouter) {
         return (
-            <StyledLink
-                onClick={() => router.push(to)}
-                className={'font-semiBold'}
-                style={{ textDecoration: 'none', cursor: 'pointer', margin: '0px' }}
-            >
+            <StyledLink onClick={() => router.push(to)} {...commonStyle}>
                 {children}
             </StyledLink>
         );
     } else {
         // Handle the case when neither React Router nor Next.js Router is detected
         return (
-            <StyledLink href={to} className={'font-semiBold'} style={{ textDecoration: 'none', margin: '0px' }}>
+            <StyledLink href={to} {...commonStyle}>
                 {children}
             </StyledLink>
         );
@@ -125,10 +127,11 @@ export const NsDropDown = ({
     children,
     dropDownConfiguration,
     overlay = false,
+    icon = false,
 }: IDropDown) => {
+    const theme = useTheme();
     const [isOpen, setIsOpen] = useState(false);
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
     const handleMenuOpen = (event: React.MouseEvent<HTMLDivElement>) => {
         setIsOpen(true);
         setAnchorEl(event.currentTarget);
@@ -146,15 +149,22 @@ export const NsDropDown = ({
 
     const renderMenuItems = () => {
         if (Array.isArray(dropdownItems)) {
-            const items = dropdownItems.map((item, index: number) => (
-                <DynamicLink to={item.path} router={router} key={item.path}>
-                    <MenuItem>
-                        {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
-                        {item.name}
-                    </MenuItem>
-                    {index < dropdownItems.length - 1 && <Divider />}
-                </DynamicLink>
-            ));
+            const items = dropdownItems.map((item, index) => {
+                if (typeof item.path === 'string') {
+                    return (
+                        <React.Fragment key={item.path}>
+                            <DynamicLink to={item.path} router={router}>
+                                <MenuItem>
+                                    {item.icon && item.icon}
+                                    {item.name}
+                                </MenuItem>
+                            </DynamicLink>
+                            {index < dropdownItems.length - 1 && <Divider />}
+                        </React.Fragment>
+                    );
+                }
+                return null;
+            });
 
             if (onLogout) {
                 items.push(
@@ -176,10 +186,97 @@ export const NsDropDown = ({
         }
     };
 
+    const ExtendChildren = ({ children, icon, isOpen }: ExtendChildrenProps) => {
+        return (
+            <Box
+                sx={{
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+
+                    '&:hover': {
+                        backgroundColor: theme.palette.primary.main,
+                        color: '#fff',
+                    },
+                    '&:hover a': {
+                        color: '#fff',
+                    },
+                    '&:hover svg': {
+                        color: '#fff',
+                    },
+                }}
+            >
+                {React.Children.map(children, (child, i) => {
+                    if (React.isValidElement(child)) {
+                        return (
+                            <Box
+                                key={useId()}
+                                sx={{
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                }}
+                            >
+                                {React.cloneElement(child)}
+                                {icon &&
+                                    (isOpen ? (
+                                        typeof icon === 'boolean' ? (
+                                            <KeyboardArrowUpOutlinedIcon
+                                                sx={{
+                                                    transition: 'transform 0.3s',
+                                                    color: theme.palette.primary.main,
+                                                }}
+                                            />
+                                        ) : (
+                                            <>{icon}</>
+                                        )
+                                    ) : typeof icon === 'boolean' ? (
+                                        <KeyboardArrowUpOutlinedIcon
+                                            sx={{
+                                                color: theme.palette.primary.main,
+                                                transform: 'rotate(180deg)',
+                                                transition: 'transform 0.3s',
+                                            }}
+                                        />
+                                    ) : (
+                                        <Box
+                                            sx={{
+                                                transform: 'rotate(180deg)',
+                                                transition: 'transform 0.3s',
+                                                display: 'inline-flex',
+                                            }}
+                                        >
+                                            {icon}
+                                        </Box>
+                                    ))}
+                            </Box>
+                        );
+                    }
+                    return child;
+                })}
+            </Box>
+        );
+    };
+
     return (
         <>
-            <Box sx={{ cursor: 'pointer' }} onClick={handleMenuOpen}>
-                {React.isValidElement(children) && React.Children.only(children)}
+            <Box
+                sx={{
+                    cursor: 'pointer',
+                    height: '100%',
+                    display: 'flex',
+                    direction: 'row',
+                    alignItems: 'center',
+                    ...(dropDownConfiguration?.hover && {
+                        '&:hover': {
+                            backgroundColor: theme.palette.primary.main,
+                            color: '#fff',
+                        },
+                    }),
+                }}
+                onClick={handleMenuOpen}
+            >
+                <ExtendChildren children={children} icon={icon} isOpen={isOpen} />
             </Box>
             <StyledMenu
                 overlay={overlay}
diff --git a/src/components/components/datatable/NsDataGrid.tsx b/src/components/components/datatable/NsDataGrid.tsx
index 1080484..1746531 100644
--- a/src/components/components/datatable/NsDataGrid.tsx
+++ b/src/components/components/datatable/NsDataGrid.tsx
@@ -1,5 +1,5 @@
 import { TableContainerProps } from '@mui/material';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef as BaseColumnDef } from '@tanstack/react-table';
 import React from 'react';
 import { NsDataGridOptions } from './NsDataGridBase';
 import { NsDataGridClient, NsDataGridClientProps } from './NsDataGridClient';
@@ -29,6 +29,13 @@ export type NsDataGridClientRenderFn = (
     children?: React.ReactNode,
 ) => React.ReactElement;
 
+export type ColumnDef<RowType, Value = any> = BaseColumnDef<RowType, Value> & {
+    meta?: {
+        hide?: boolean; // Proprietà per nascondere le colonne
+        [key: string]: any;
+    };
+};
+
 export interface NsDataGridCommonProps<RowType extends object, FilterType extends object> extends TableContainerProps {
     /**
      * An array of column definitions for the grid.
diff --git a/src/components/components/datatable/NsDataGridBase.tsx b/src/components/components/datatable/NsDataGridBase.tsx
index d739dc1..8d8091c 100644
--- a/src/components/components/datatable/NsDataGridBase.tsx
+++ b/src/components/components/datatable/NsDataGridBase.tsx
@@ -53,14 +53,16 @@ export interface NsDataGridOptions<RowType extends object> {
         /** The available page sizes */
         rowsPerPageOptions?: number[];
     };
+    bodyTextAlign?: 'center' | 'left' | 'right';
+    headerJustifyContent?: 'space-evenly' | 'flex-start' | 'flex-end';
+    /** Specify selected Row */
+    selectedRow?: string;
 }
 
 export interface NsDataGridBaseProps<RowType extends object> extends TableContainerProps {
     table: Table<RowType>;
     options?: NsDataGridOptions<RowType>;
     debug?: boolean;
-    bodyTextAlign?: 'center' | 'left' | 'right';
-    headerJustifyContent?: 'space-evenly' | 'flex-start' | 'flex-end';
 }
 
 /**
@@ -131,8 +133,6 @@ export function NsDataGridBase<RowType extends object>({
     table,
     options = {},
     debug = false,
-    headerJustifyContent,
-    bodyTextAlign,
     // Mui TableContainer props
     sx,
     component = Paper,
@@ -180,7 +180,9 @@ export function NsDataGridBase<RowType extends object>({
                                             }
                                         }}
                                     >
-                                        <HeaderBoxStyled headerJustifyContent={headerJustifyContent || 'space-evenly'}>
+                                        <HeaderBoxStyled
+                                            headerJustifyContent={options.headerJustifyContent || 'space-evenly'}
+                                        >
                                             <Typography variant="h3">
                                                 {header.isPlaceholder
                                                     ? null
@@ -206,7 +208,7 @@ export function NsDataGridBase<RowType extends object>({
                         </TableRow>
                     ))}
                 </TableHeadStyled>
-                <TableBody debug={debug} table={table} bodyTextAlign={bodyTextAlign} />
+                <TableBody debug={debug} table={table} bodyTextAlign={options.bodyTextAlign} />
             </MuiTable>
         </TableContainer>
     );
diff --git a/src/components/components/datatable/NsDataGridClient.tsx b/src/components/components/datatable/NsDataGridClient.tsx
index f298661..1ee0846 100644
--- a/src/components/components/datatable/NsDataGridClient.tsx
+++ b/src/components/components/datatable/NsDataGridClient.tsx
@@ -64,7 +64,7 @@ export function NsDataGridClient<RowType extends object, FilterType extends obje
 
     const table = useReactTable<RowType>({
         data,
-        columns,
+        columns: columns.filter((column) => !column.meta?.hide),
         defaultColumn,
         columnResizeMode: 'onChange',
         getCoreRowModel: getCoreRowModel(),
diff --git a/src/components/components/datatable/NsDataGridServer.tsx b/src/components/components/datatable/NsDataGridServer.tsx
index e26f9f4..747ace1 100644
--- a/src/components/components/datatable/NsDataGridServer.tsx
+++ b/src/components/components/datatable/NsDataGridServer.tsx
@@ -111,7 +111,7 @@ export function NsDataGridServer<RowType extends object, FilterType extends obje
     const [filters, setFilters] = React.useState<TableFilters<FilterType>>({});
 
     const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
-    const [columnVisibility, setColumnVisibility] = React.useState({})
+    const [columnVisibility, setColumnVisibility] = React.useState({});
 
     // Notify event listener of filter change
     React.useEffect(() => {
@@ -170,7 +170,18 @@ export function NsDataGridServer<RowType extends object, FilterType extends obje
             sorting.map((sort) => [sort.id, sort.desc ? 'desc' : 'asc']),
         ) as ColumnSorting<RowType>;
         // Call fetcher with pagination and sorting
-        fetcher(pagination, mySorting, filters).then(setPage);
+        // fetcher(pagination, mySorting, filters).then(setPage);
+        fetcher(pagination, mySorting, filters).then((data) => {
+            setPage(data);
+            // if (data.data.length > 0) {
+            //     setRowSelection({ [data.data[0].id!]: true });
+            // }
+            console.log('options', options);
+            if (options.selectedRow) {
+                const firstRowId = options.selectedRow;
+                setRowSelection({ [firstRowId]: true });
+            }
+        });
     }, [pagination, sorting, filters, fetcher]);
 
     // Reset pagination on filter change
@@ -188,7 +199,7 @@ export function NsDataGridServer<RowType extends object, FilterType extends obje
     // @tanstack/react-table setup
     const table = useReactTable({
         data: page.data,
-        columns,
+        columns: columns.filter((column) => !column.meta?.hide),
         defaultColumn,
         enableColumnResizing: options?.resizable,
         columnResizeMode: 'onChange',
@@ -231,7 +242,14 @@ export function NsDataGridServer<RowType extends object, FilterType extends obje
         <></>
     );
     const TableComponent = <NsDataGridBase {...{ table, options, debug, sx, component }} />;
-    const TablePagerComponent = <PagerComponent type="server" table={table} paginationInfo={page} rowsPerPageOptions={options?.pagination?.rowsPerPageOptions}/>;
+    const TablePagerComponent = (
+        <PagerComponent
+            type="server"
+            table={table}
+            paginationInfo={page}
+            rowsPerPageOptions={options?.pagination?.rowsPerPageOptions}
+        />
+    );
     const ColumnVisibilityComponent = <ColumnVisibilityMenu table={table} />;
 
     return render(FilterContainerComponent, TableComponent, TablePagerComponent, children, ColumnVisibilityComponent);
diff --git a/src/components/components/datatable/filtering/ColumnVisibilityMenu.tsx b/src/components/components/datatable/filtering/ColumnVisibilityMenu.tsx
index 082add5..ab31b53 100644
--- a/src/components/components/datatable/filtering/ColumnVisibilityMenu.tsx
+++ b/src/components/components/datatable/filtering/ColumnVisibilityMenu.tsx
@@ -34,20 +34,45 @@ export function ColumnVisibilityMenu<RowType extends object>({ table }: ColumnVi
                 anchorEl={anchorEl}
                 open={isMenuOpen}
                 onClose={handleMenuClose}
-                sx={{ maxHeight: 300, width: '20ch' }}
+                sx={{
+                    minWidth: 200,
+                    width: 'auto',
+                }}
+                slotProps={{
+                    paper: {
+                        sx: {
+                            minWidth: 200,
+                            width: 'auto',
+                        },
+                    },
+                }}
             >
-                {table.getAllLeafColumns().map((column) => (
-                    <MenuItem key={column.id} onClick={column.getToggleVisibilityHandler()}>
-                        <ListItemIcon>
-                            <Checkbox
-                                checked={column.getIsVisible()}
-                                size="small"
-                            />
-                        </ListItemIcon>
-                        <Typography variant="body2">{column.id}</Typography>
-                    </MenuItem>
-                ))}
+                {table.getAllLeafColumns().map((column) => {
+                    // Determinare il testo da visualizzare
+                    const header = typeof column.columnDef.header === 'string' 
+                        ? column.columnDef.header 
+                        : column.id;
+
+                    return (
+                        <MenuItem
+                            key={column.id}
+                            onClick={column.getToggleVisibilityHandler()}
+                            sx={{
+                                whiteSpace: 'nowrap',
+                                width: 'auto',
+                            }}
+                        >
+                            <ListItemIcon>
+                                <Checkbox
+                                    checked={column.getIsVisible()}
+                                    size="small"
+                                />
+                            </ListItemIcon>
+                            <Typography variant="body2">{header}</Typography>
+                        </MenuItem>
+                    );
+                })}
             </Menu>
         </Box>
     );
-}
\ No newline at end of file
+}
diff --git a/src/components/components/notification/NsNotification.tsx b/src/components/components/notification/NsNotification.tsx
index 4fefc24..d66d1c0 100644
--- a/src/components/components/notification/NsNotification.tsx
+++ b/src/components/components/notification/NsNotification.tsx
@@ -15,13 +15,13 @@ export interface IReadWrite {
 }
 
 export interface NotificationData {
-    notifications: IReadWrite[];
+    notifications?: IReadWrite[];
     markAsRead?: (...args: any[]) => any;
     /**
      * Link to show more
      */
     showMore?: DynamicLinkProps;
-    totalCount: number;
+    totalCount?: number;
 }
 
 /**
@@ -33,10 +33,10 @@ export interface NotificationData {
  * An object containing the notification data, including both read and unread notifications.
  */
 export interface INotificationData {
-    read: NotificationData;
-    unread: NotificationData;
+    read?: NotificationData;
+    unread?: NotificationData;
     onlyButton?: Omit<DynamicLinkProps, 'children'>;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     markAsRead?: (...args: any[]) => any;
 }
 
@@ -84,32 +84,33 @@ const MainNotificationDiv = ({
                 </div>
             )}
 
-            {notifications.map((item: any, index: number) => {
-                return (
-                    <DynamicLink {...item.link}>
-                        <ListItem
-                            key={index}
-                            divider
-                            style={{
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                cursor: 'pointer',
-                            }}
-                        >
-                            <ListItemIcon>
-                                {item.status === Status.valid ? (
-                                    <CheckCircleIcon color={'primary'} />
-                                ) : (
-                                    <ErrorOutlineIcon color={'error'} />
-                                )}
-                            </ListItemIcon>
-                            <Typography component="h4" variant="h4">
-                                {item.text}
-                            </Typography>
-                        </ListItem>
-                    </DynamicLink>
-                );
-            })}
+            {notifications &&
+                notifications.map((item: any, index: number) => {
+                    return (
+                        <DynamicLink {...item.link}>
+                            <ListItem
+                                key={index}
+                                divider
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    cursor: 'pointer',
+                                }}
+                            >
+                                <ListItemIcon>
+                                    {item.status === Status.valid ? (
+                                        <CheckCircleIcon color={'primary'} />
+                                    ) : (
+                                        <ErrorOutlineIcon color={'error'} />
+                                    )}
+                                </ListItemIcon>
+                                <Typography component="h4" variant="h4">
+                                    {item.text}
+                                </Typography>
+                            </ListItem>
+                        </DynamicLink>
+                    );
+                })}
 
             {isReadUnread === 'UNREAD' && markAsRead && (
                 <Button sx={{ width: '100%', fontSize: '18px', textDecoration: 'underline' }} onClick={markAsRead}>
@@ -128,12 +129,12 @@ export const NsNotification: React.FC<INotificationData> = ({ read, unread, chil
     const tabs = [
         {
             id: '1',
-            label: t('header.notification.unreadCount', { count: unread.totalCount }),
+            label: t('header.notification.unreadCount', { count: unread?.totalCount || 0 }),
             children: <MainNotificationDiv isReadUnread={'UNREAD'} {...unread} markAsRead={markAsRead} />,
         },
         {
             id: '2',
-            label: t('header.notification.readCount', { count: read.totalCount }),
+            label: t('header.notification.readCount', { count: read?.totalCount || 0 }),
             children: <MainNotificationDiv isReadUnread={'READ'} {...read} markAsRead={markAsRead} />,
         },
     ] as any;
@@ -143,13 +144,13 @@ export const NsNotification: React.FC<INotificationData> = ({ read, unread, chil
     return (
         <>
             {!isOpenNotification ? (
-                <Box sx={{ width: boxWidth, height: '40px' }}>
+                <Box sx={{ width: boxWidth, height: '40px', alignItems: 'center', display: 'flex' }}>
                     <DivIcon {...onlyButton}>
                         <div
                             onClick={() => (onlyButton ? () => {} : setIsOpenNotification(!isOpenNotification))}
                             style={{ textAlign: 'right', cursor: 'pointer' }}
                         >
-                            <Badge style={{ marginRight: '5px' }} badgeContent={unread?.totalCount} color="error">
+                            <Badge badgeContent={unread?.totalCount} color="error">
                                 {children}
                             </Badge>
                         </div>
@@ -158,9 +159,10 @@ export const NsNotification: React.FC<INotificationData> = ({ read, unread, chil
             ) : (
                 <>
                     <Box sx={{ width: boxWidth, height: '40px' }}>
+                        {/* <Box sx={{ width: '100%', height: '100%' }}> */}
                         <div
                             onClick={() => setIsOpenNotification(!isOpenNotification)}
-                            style={{ textAlign: 'right', cursor: 'pointer' }}
+                            style={{ textAlign: 'right', cursor: 'pointer', height: '40px' }}
                         >
                             <Badge style={{ marginRight: '5px' }} badgeContent={unread?.totalCount} color="error">
                                 {children}
diff --git a/src/components/layout/login/NsLogin.tsx b/src/components/layout/login/NsLogin.tsx
index e82510f..37863f5 100644
--- a/src/components/layout/login/NsLogin.tsx
+++ b/src/components/layout/login/NsLogin.tsx
@@ -84,14 +84,15 @@ export const NsLogin: React.FC<NsLoginProps> = ({
             <Grid container>
                 {type === 'classic' ? (
                     //if classic we put the Header
-                    <Grid item xs={12} sm={12}>
-                        <NsHeader
-                            logo={headerLogo}
-                            configuration={{ centralLogo: true }}
-                            router={null}
-                            type={'horizontal'}
-                        />
-                    </Grid>
+                    // <Grid item xs={12} sm={12}>
+                    //     <NsHeader
+                    //         logo={headerLogo}
+                    //         configuration={{ centralLogo: true }}
+                    //         router={null}
+                    //         type={'horizontal'}
+                    //     />
+                    // </Grid>
+                    <></>
                 ) : (
                     <>
                         <Grid item xs={12} sm={4}>
diff --git a/src/components/notifier/NsNotifier.tsx b/src/components/notifier/NsNotifier.tsx
index 5fdbb35..b73a1e8 100644
--- a/src/components/notifier/NsNotifier.tsx
+++ b/src/components/notifier/NsNotifier.tsx
@@ -13,12 +13,11 @@ let displayed: any[] = [];
 export type NotificationKey = string | number | undefined;
 
 export interface NsNotifierProps {
-    message: string;
     children?: any;
     variant?: 'filled' | 'outlined';
     textColor?: any;
     iconColor?: any;
-    type?: 'info' | 'success' | 'warning' | 'error';
+    anchorOrigin?: { horizontal: 'left' | 'right' | 'center'; vertical: 'bottom' | 'top' };
 }
 export interface CustomIconProps {
     type?: 'error' | 'check';
@@ -51,7 +50,7 @@ const CustomIcon: React.FC<CustomIconProps> = ({ type = 'check', iconColor, text
                             zIndex: 1,
                         }}
                     />
-                    <ErrorOutlineRoundedIcon
+                    {/* <ErrorOutlineRoundedIcon
                         id="textIconColor"
                         sx={{
                             width: '25px',
@@ -60,7 +59,7 @@ const CustomIcon: React.FC<CustomIconProps> = ({ type = 'check', iconColor, text
                             padding: '1px',
                             zIndex: 0,
                         }}
-                    />
+                    /> */}
                 </>
             )}
         </Box>
@@ -69,28 +68,19 @@ const CustomIcon: React.FC<CustomIconProps> = ({ type = 'check', iconColor, text
 export const NsNotifier: React.FC<NsNotifierProps> = ({
     children,
     variant = 'filled',
-    type = 'info',
     textColor,
     iconColor,
-    message,
+    anchorOrigin = { horizontal: 'right', vertical: 'top' },
 }) => {
     const [state, dispatch] = useReducer(notificationReducer, {
         notifications: [],
     });
-    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
     const ctx: INotificationContext = {
         state,
         notify: (notification: any) => dispatch(pushNotification(notification)),
         dismiss: (key: NotificationKey) => dispatch(clearNotifications(key)),
         remove: (key: NotificationKey) => dispatch(removeNotification(key)),
     };
-    const storeDisplayed = (id: NotificationKey) => {
-        displayed = [...displayed, id];
-    };
-
-    const removeDisplayed = (id: NotificationKey) => {
-        displayed = [...displayed.filter((key) => id !== key)];
-    };
 
     const NsNotifierCustom = styled(MaterialDesignContent)(({ theme }) => ({
         '&.outlined': {
@@ -140,54 +130,11 @@ export const NsNotifier: React.FC<NsNotifierProps> = ({
         },
     }));
 
-    useEffect(() => {
-        state.notifications.forEach(({ key, messages, options = {}, dismissed = false }) => {
-            if (dismissed) {
-                // dismiss snackbar using notistack
-                closeSnackbar(key);
-                return;
-            }
-
-            // do nothing if snackbar is already displayed
-            if (displayed.find((id) => id === key)) {
-                return;
-            }
-
-            // display snackbar using notistack
-            enqueueSnackbar(message, {
-                key,
-                ...options,
-                action: (snackKey: any) => (
-                    <IconButton onClick={() => closeSnackbar(snackKey)}>
-                        <CloseIcon />
-                    </IconButton>
-                ),
-                // ...options,
-                onClose: (event: any, reason: any, myKey: any) => {
-                    if (options.onClose) {
-                        options.onClose(event, reason, myKey);
-                    }
-                },
-                onExited: (event: any, myKey: any) => {
-                    // remove this snackbar from redux store
-                    dispatch(removeNotification(myKey));
-                    removeDisplayed(myKey);
-                },
-            });
-
-            // keep track of snackbars that we've displayed
-            storeDisplayed(key);
-        });
-    }, [state.notifications, closeSnackbar, enqueueSnackbar]);
-
     return (
         <SnackbarProvider
             maxSnack={20}
             preventDuplicate
-            anchorOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-            }}
+            anchorOrigin={anchorOrigin}
             Components={{
                 success: NsNotifierCustom,
                 warning: NsNotifierCustom,
diff --git a/src/components/patterns/NsSessionExpiredModal.tsx b/src/components/patterns/NsSessionExpiredModal.tsx
new file mode 100644
index 0000000..bab7fb1
--- /dev/null
+++ b/src/components/patterns/NsSessionExpiredModal.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Modal, Button, Box, Typography, useTheme } from '@mui/material';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { useTranslation } from 'react-i18next';
+
+export interface NsSessionExpiredModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onRefreshSession: () => void;
+    children: React.ReactNode;
+}
+
+export const NsSessionExpiredModal: React.FC<NsSessionExpiredModalProps> = ({
+    isOpen,
+    onClose,
+    onRefreshSession,
+    children,
+}) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+
+    return (
+        <Modal
+            open={isOpen}
+            onClose={onClose}
+            style={{
+                display: 'block',
+                width: '600px',
+                margin: '0 auto',
+                border: '0px',
+                position: 'absolute',
+                top: '20%',
+            }}
+        >
+            <Box style={{ padding: '20px', height: '400px', background: '#fff' }}>
+                <Box style={{ textAlign: 'left' }}>
+                    <AccessTimeIcon style={{ fontSize: '100px', color: '#000' }} />
+                </Box>
+                <Typography variant="h1" component="h1">
+                    {t('modal.session.expired.title')}
+                </Typography>
+                {children}
+                <Box style={{ float: 'left', marginTop: '40px' }}>
+                    <Button style={{ marginRight: '20px' }} variant="outlined" color="primary" onClick={onClose}>
+                        {t('modal.session.expired.button.logout')}
+                    </Button>
+                    <Button
+                        style={{
+                            border: `1px solid ${theme.palette.primary.main}`,
+                        }}
+                        variant="contained"
+                        color="primary"
+                        onClick={onRefreshSession}
+                    >
+                        {t('modal.session.expired.button.refreshSession')}
+                    </Button>
+                </Box>
+            </Box>
+        </Modal>
+    );
+};
diff --git a/src/components/patterns/navigation/NsHeader.tsx b/src/components/patterns/navigation/NsHeader.tsx
index 124d723..ebc1bc9 100644
--- a/src/components/patterns/navigation/NsHeader.tsx
+++ b/src/components/patterns/navigation/NsHeader.tsx
@@ -88,6 +88,9 @@ export interface HeaderProps {
     configuration: {
         centralLogo?: boolean;
         dropDownConfiguration?: IDropDownConfiguration | undefined;
+        hover?: boolean;
+        dropDownIcon?: React.ReactElement | boolean;
+        notification?: boolean;
     };
 }
 export const NsHeader = ({
diff --git a/src/components/patterns/navigation/headers/HorizontalHeader.tsx b/src/components/patterns/navigation/headers/HorizontalHeader.tsx
index ab0f774..5aa7f94 100644
--- a/src/components/patterns/navigation/headers/HorizontalHeader.tsx
+++ b/src/components/patterns/navigation/headers/HorizontalHeader.tsx
@@ -3,7 +3,7 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNoneOutlined';
-import { Box, Menu, MenuItem, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React, { useState } from 'react';
 import { DynamicLink, IDropdownItems, NsDropDown, StyledLink } from '../../../components/dropdown/NsDropDown';
@@ -32,75 +32,75 @@ const Logo = styled('svg')({
     display: 'inline-block',
 });
 const LogoContainer = styled('div')(
-  ({ theme, configuration }: any) => css`
-    background-color: ${theme.header.backgroundColor};
-    border-bottom: 9px solid ${theme.header.borderColor};
-    padding: 20px 20px;
-    display: flex;
-    justify-content: ${configuration?.centralLogo ? 'center' : 'space-between'};
-    align-items: center;
-    flex-direction: row;
-    width: 100%;
+    ({ theme, configuration }: any) => css`
+        background-color: ${theme.header.backgroundColor};
+        border-bottom: 9px solid ${theme.header.borderColor};
+        padding: 20px 20px;
+        display: flex;
+        justify-content: ${configuration?.centralLogo ? 'center' : 'space-between'};
+        align-items: center;
+        flex-direction: row;
+        width: 100%;
 
-    .titles {
-        text-align: left;
-        width: ${configuration?.centralLogo ? '494px' : 'auto'};
+        .titles {
+            text-align: left;
+            width: ${configuration?.centralLogo ? '494px' : 'auto'};
 
-        h1 {
-            font-weight: 600;
-            font-size: 1.7em;
-            line-height: 1;
-            margin: 0 0 2px 18px;
-            color: #fff;
-        }
+            h1 {
+                font-weight: 600;
+                font-size: 1.7em;
+                line-height: 1;
+                margin: 0 0 2px 18px;
+                color: #fff;
+            }
 
-        .subtitle {
-            font-size: 0.7em;
-            text-transform: uppercase;
-            color: #fff;
-            margin: 0 0 0 18px;
+            .subtitle {
+                font-size: 0.7em;
+                text-transform: uppercase;
+                color: #fff;
+                margin: 0 0 0 18px;
+            }
         }
-    }
 
-    a {
-        display: flex;
-        align-items: center;
-        min-width: ${configuration?.centralLogo ? '370px' : 'auto'};
-        text-decoration: none;
-        color: ${theme.header.menuTextColor};
+        a {
+            display: flex;
+            align-items: center;
+            min-width: ${configuration?.centralLogo ? '370px' : 'auto'};
+            text-decoration: none;
+            color: ${theme.header.menuTextColor};
 
-        &:focus {
-            background-color: ${theme.header.focusBackgroundColor};
-        }
+            &:focus {
+                background-color: ${theme.header.focusBackgroundColor};
+            }
 
-        &:focus-visible {
-            outline: 0;
-        }
+            &:focus-visible {
+                outline: 0;
+            }
 
-        svg {
-            display: inline-block;
-            vertical-align: top;
-            max-height: 70px;
+            svg {
+                display: inline-block;
+                vertical-align: top;
+                max-height: 70px;
+            }
         }
-    }
 
-    .mobile-menu-icon {
-        display: none !important;
-        cursor: pointer;
-        color: ${theme.header.backgroundColor};
-        font-weight: 599;
+        .mobile-menu-icon {
+            display: none !important;
+            cursor: pointer;
+            color: ${theme.header.backgroundColor};
+            font-weight: 599;
 
-        @media (max-width: 768px) {
-            display: block !important;
+            @media (max-width: 768px) {
+                display: block !important;
+            }
         }
-    }
 
-    @media (min-width: 768px) {
-        .mobile-menu-icon {
-            display: none !important;
+        @media (min-width: 768px) {
+            .mobile-menu-icon {
+                display: none !important;
+            }
         }
-    }
-  `
+    `,
 );
 
 const NavigationContainer = styled('div')(
@@ -108,7 +108,6 @@ const NavigationContainer = styled('div')(
         display: flex;
         justify-content: space-between;
         background-color: ${!configuration?.centralLogo ? theme.header.menuBackgroundColor : null};
-        padding: 0px 8px;
         @media (max-width: 768px) {
             display: none;
             transition: max-height 0.2s ease-out;
@@ -121,20 +120,18 @@ const NavigationContainer = styled('div')(
         }
 
         nav {
+            height: 40px;
             display: flex;
             justify-content: flex-start;
             flex-direction: row;
+            align-items: center;
 
             a {
-                padding: 4px 10px;
+                padding: 0px 10px;
                 font-weight: 600;
                 display: flex;
                 justify-content: space-between;
-                background-color: ${!configuration?.centralLogo ? theme.header.menuBackgroundColor : null};
-                margin-bottom: 30px;
-                padding: 6px 8px;
-                color: ${theme.header.menuTextColor};
-
+                margin: 0px;
                 @media (max-width: 768px) {
                     display: none;
                     transition: max-height 0.2s ease-out;
@@ -177,23 +174,59 @@ const UserMenu: React.FC<UserMenuProps> = ({
     configuration,
 }) => {
     const { t } = useTranslation();
+    const theme = useTheme();
+    const [notificationState, setNotificationState] = useState(notificationData);
 
     return (
-        <nav aria-label={t('header.userMenu')} style={{ alignItems: 'center' }}>
-            {notificationData && (
-                <span aria-label={t('header.notifications')} title={t('header.openNotifications')}>
-                    <NsNotification {...notificationData}>
-                        <NotificationsNoneOutlinedIcon />
-                    </NsNotification>{' '}
+        <nav aria-label={t('header.userMenu')}>
+            {configuration.notification && (
+                <Box
+                    aria-label={t('header.notifications')}
+                    title={t('header.openNotifications')}
+                    sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100%',
+                        width: '100%',
+                        aspectRatio: '1',
+                        ...(configuration.hover && {
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.main,
+                                color: '#fff',
+                            },
+                        }),
+                    }}
+                >
+                    <NsNotification {...notificationState}>
+                        <NotificationsNoneOutlinedIcon
+                            sx={{
+                                alignItems: 'center',
+                                height: '100%',
+                            }}
+                        />
+                    </NsNotification>
                     <Box sx={{ display: { xs: 'inline-block', md: 'none' } }}>{t('header.notifications')}</Box>
-                </span>
+                </Box>
             )}
             {userPanelMenuItems &&
                 (Array.isArray(userPanelMenuItems) ? (
-                    <span
+                    <Box
                         aria-label={t('header.account')}
                         title={t('header.openAccount')}
-                        style={{ marginLeft: '20px' }}
+                        sx={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            height: '100%',
+                            aspectRatio: '1',
+                            ...(configuration.hover && {
+                                '&:hover': {
+                                    backgroundColor: theme.palette.primary.main,
+                                    color: '#fff',
+                                },
+                            }),
+                        }}
                     >
                         <NsDropDown
                             dropdownItems={userPanelMenuItems}
@@ -202,10 +235,15 @@ const UserMenu: React.FC<UserMenuProps> = ({
                             dropDownConfiguration={configuration?.dropDownConfiguration}
                             overlay={false}
                         >
-                            <AccountCircleIcon />
+                            <AccountCircleIcon
+                                sx={{
+                                    alignItems: 'center',
+                                    height: '100%',
+                                }}
+                            />
                         </NsDropDown>
                         <Box sx={{ display: { xs: 'inline-block', md: 'none' } }}>{t('header.account')}</Box>
-                    </span>
+                    </Box>
                 ) : (
                     userPanelMenuItems
                 ))}
@@ -281,22 +319,34 @@ export default function HorizontalHeader({
                     </Box>
                 </Box>
             </LogoContainer>
-            <NavigationContainer
-                className={isMenuOpen ? 'open' : ''}
-                {...configuration}
-                style={{
-                    padding: menuItems && menuItems.length > 0 ? '6px' : undefined,
-                }}
-            >
+            <NavigationContainer className={isMenuOpen ? 'open' : ''} {...configuration}>
                 <nav aria-label="Menu principale">
-                    {menuItems?.map((item) =>
+                    {menuItems?.map((item, i) =>
                         typeof item.path === 'string' ? (
-                            <DynamicLink key={item.name} to={item.path} router={router}>
+                            <DynamicLink
+                                key={item.name}
+                                to={item.path}
+                                router={router}
+                                sx={{
+                                    gap: '4px',
+                                    alignItems: 'center',
+                                    height: '100%',
+
+                                    ...(configuration.hover && {
+                                        '&:hover': {
+                                            backgroundColor: theme.palette.primary.main,
+                                            color: '#fff',
+                                        },
+                                    }),
+                                }}
+                            >
+                                {item.icon && item.icon}
                                 {item.name}
                             </DynamicLink>
                         ) : (
                             Array.isArray(item.path) && (
                                 <NsDropDown
+                                    key={item.name}
                                     dropdownItems={item.path}
                                     router={router}
                                     dropDownConfiguration={{
@@ -308,36 +358,55 @@ export default function HorizontalHeader({
                                             vertical: 'top',
                                             horizontal: 'center',
                                         },
+                                        hover: configuration.hover,
+                                        dropDownIcon: configuration.dropDownIcon,
                                     }}
                                     overlay={false}
+                                    icon={configuration.dropDownIcon}
                                 >
-                                    <StyledLink>{item.name}</StyledLink>
+                                    <StyledLink
+                                        sx={{
+                                            gap: '4px',
+                                            alignItems: 'center',
+                                            height: '100%',
+                                            ...(configuration.hover && {
+                                                '&:hover': {
+                                                    backgroundColor: theme.palette.primary.main,
+                                                    color: '#fff',
+                                                },
+                                            }),
+                                            // '.caret-icon::before': {
+                                            //     content: "'keyboard_arrow_down'",
+                                            //     fontFamily: 'Material Icons',
+                                            //     fontSize: '16px',
+                                            //     display: 'inline-block',
+                                            //     verticalAlign: 'middle',
+                                            //     color: 'inherit',
+                                            // },
+                                        }}
+                                    >
+                                        {item.icon && item.icon}
+                                        {item.name}
+                                    </StyledLink>
                                 </NsDropDown>
                             )
                         ),
                     )}
                 </nav>
 
-                <AuthContainer
-                    style={{
-                        padding:
-                            (Array.isArray(userPanelMenuItems) && userPanelMenuItems.length > 0) || onLogout
-                                ? '6px'
-                                : undefined,
-                    }}
-                >
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                     {Array.isArray(userPanelMenuItems) ? (
                         <UserMenu
                             userPanelMenuItems={userPanelMenuItems}
                             notificationData={notificationData}
                             router={router}
                             onLogout={onLogout}
-                            {...configuration}
+                            configuration={configuration}
                         />
                     ) : (
                         userPanelMenuItems
                     )}
-                </AuthContainer>
+                </Box>
             </NavigationContainer>
         </HeaderContainer>
     );
diff --git a/src/index.ts b/src/index.ts
index 940055a..d5fd0e2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -33,6 +33,7 @@ export { NsBanner } from './components/components/NsBanner';
 export { NsSwitch } from './components/components/NsSwitch';
 export { NsDialog, NsDialogActions, NsDialogContent, NsDialogTitle } from './components/components/dialog/NsDialog';
 export { NsNotificationList } from './components/components/NsNotificationList';
+export { NsSessionExpiredModal } from './components/patterns/NsSessionExpiredModal';
 
 /**
  * Forms and validation
diff --git a/src/stories/components/NsNotifier.stories.tsx b/src/stories/components/NsNotifier.stories.tsx
index 42b86cc..69c2308 100644
--- a/src/stories/components/NsNotifier.stories.tsx
+++ b/src/stories/components/NsNotifier.stories.tsx
@@ -5,56 +5,69 @@ import { useSnackbar } from 'notistack';
 import { NsNotifier } from 'src/components/notifier/NsNotifier';
 
 export default {
-  title: 'Components/Notifier',
-  component: NsNotifier,
-  parameters: {
-    docs: { source: { type: 'code' } },
-  },
-  argTypes: {
-    message: {
-      label: 'Messaggio',
-      type: 'string',
+    title: 'Components/Notifier',
+    component: NsNotifier,
+    parameters: {
+        docs: { source: { type: 'code' } },
     },
-    type: {
-      label: 'Tipologia',
-      control: { type: 'radio' },
-      options: ['info', 'success', 'warning', 'error'],
+    argTypes: {
+        message: {
+            label: 'Messaggio',
+            type: 'string',
+        },
+        type: {
+            label: 'Tipologia',
+            control: { type: 'radio' },
+            options: ['info', 'success', 'warning', 'error'],
+        },
     },
-  },
 } as Meta<typeof NsNotifier>;
 
 const Template: StoryFn<typeof NsNotifier> = (args) => {
-  const Content = () => {
-    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+    const Content = () => {
+        const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+        return (
+            <Container>
+                <Typography component="p">Clicca il pulsante per mostrare la notifica.</Typography>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100px' }} textAlign="center">
+                    <Button
+                        variant="contained"
+                        onClick={() => enqueueSnackbar('success message', { variant: 'success' })}
+                    >
+                        success
+                    </Button>
+                    <Button variant="contained" onClick={() => enqueueSnackbar('info message', { variant: 'info' })}>
+                        info
+                    </Button>
+                    <Button
+                        variant="contained"
+                        onClick={() => enqueueSnackbar('warning message', { variant: 'warning' })}
+                    >
+                        warning
+                    </Button>
+                    <Button variant="contained" onClick={() => enqueueSnackbar('error message', { variant: 'error' })}>
+                        error
+                    </Button>
+                </Box>
+            </Container>
+        );
+    };
+
     return (
-      <Container>
-        <Typography component="p">
-          Clicca il pulsante per mostrare la notifica.
-        </Typography>
-        <Box mt={4} textAlign="center">
-          <Button
-            variant="contained"
-            onClick={() =>
-              enqueueSnackbar(args.message, { variant: args.type })
-            }
-          >
-            Invia notifica!
-          </Button>
-        </Box>
-      </Container>
+        <>
+            <NsNotifier {...args}>
+                <Content />
+            </NsNotifier>
+        </>
     );
-  };
-
-  return (
-    <NsNotifier {...args}>
-      <Content />
-    </NsNotifier>
-  );
 };
 
 export const Notifiche = Template.bind({});
 Notifiche.args = {
-  message: 'Prova!',
-  type: 'warning',
-  variant: 'filled',
+    variant: 'filled',
+};
+export const NotificheOutlined = Template.bind({});
+NotificheOutlined.args = {
+    variant: 'outlined',
+    anchorOrigin: { horizontal: 'left', vertical: 'top' },
 };
diff --git a/src/stories/components/datatable/DataTable.stories.tsx b/src/stories/components/datatable/DataTable.stories.tsx
index 72021ea..b49dd1e 100644
--- a/src/stories/components/datatable/DataTable.stories.tsx
+++ b/src/stories/components/datatable/DataTable.stories.tsx
@@ -269,6 +269,7 @@ const TemplateServer: StoryFn<typeof NsDataGrid> = (args) => {
             columnHelper.accessor('progress', {
                 header: 'Profile Progress',
                 cell: (props: CellContext<Person, number>) => `${props.getValue()}%`,
+                meta: { hide: true }
             }),
         ],
         [],
@@ -296,18 +297,21 @@ const TemplateServer: StoryFn<typeof NsDataGrid> = (args) => {
                       }))
                     : [],
                 filters,
-            ).then(
-                (result) =>
-                    ({
-                        // here everything has the same name, but in a real-world scenario,
-                        // you may have to remap the data
-                        data: result.data,
-                        totalItems: result.totalItems,
-                        totalPages: result.totalPages,
-                        pageSize: result.pageSize,
-                        currentPage: result.currentPage,
-                    }) as PagedData<Person>,
-            ),
+            ).then((result) => {
+                // Check if there's data and select the first row
+                if (result.data.length > 0) {
+                    setSelectedRows({ [result.data[0].id]: result.data[0] });
+                }
+
+                return {
+                    // Return the fetched data in the proper format
+                    data: result.data,
+                    totalItems: result.totalItems,
+                    totalPages: result.totalPages,
+                    pageSize: result.pageSize,
+                    currentPage: result.currentPage,
+                } as PagedData<Person>;
+            }),
         [],
     );
 
@@ -324,6 +328,7 @@ const TemplateServer: StoryFn<typeof NsDataGrid> = (args) => {
         rowSelection: 'single',
         customRowIdMapper: (row) => row.id,
         pagination: { rowsPerPageOptions: [5, 10] },
+        selectedRow: selectedRows,
     };
 
     const customtableEventListener: NsDataGridEventHandler<Person, PersonFilters> = React.useCallback((event) => {
@@ -399,12 +404,13 @@ const TemplateClient: StoryFn<typeof NsDataGrid> = (args) => {
 
     // Generate dataset for the grid
     const data = useMemo(() => makeData(200), []);
-
     const [selectedRows, setSelectedRows] = React.useState<Record<string, Person>>({});
-
     useEffect(() => {
-        console.log('Selected rows:', selectedRows);
-    }, [selectedRows]);
+        // Quando i dati sono pronti, seleziona la prima riga
+        if (data.length > 0) {
+            setSelectedRows({ [data[0].id]: data[0] });
+        }
+    }, [data]);
 
     // Additional customizations and optional features
     const gridOptions: NsDataGridOptions<Person> = {
@@ -412,6 +418,8 @@ const TemplateClient: StoryFn<typeof NsDataGrid> = (args) => {
         sortable: true,
         rowSelection: 'single',
         customRowIdMapper: (row) => row.id,
+        bodyTextAlign: 'right',
+        headerJustifyContent: 'flex-start',
     };
 
     return (
diff --git a/src/stories/patterns/navigation/Header.stories.tsx b/src/stories/patterns/navigation/Header.stories.tsx
index 5cca3b5..2062a3c 100644
--- a/src/stories/patterns/navigation/Header.stories.tsx
+++ b/src/stories/patterns/navigation/Header.stories.tsx
@@ -4,8 +4,8 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { NsHeader } from 'src/components/patterns/navigation/NsHeader';
 import PersonIcon from '@mui/icons-material/Person';
 import SettingsIcon from '@mui/icons-material/Settings';
-import { Box, Button } from '@mui/material';
-
+import { Box, Typography } from '@mui/material';
+import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';
 /**
  * Headers are containers attached to the top of a page that allow the user to navigate through the application.
  *
@@ -67,14 +67,14 @@ export const UserPanelHeaderLogo: Story = {
         type: 'horizontal',
         logo: <Box component="img" src="./images/logo-light.png" alt="logo" sx={{ maxHeight: '45px' }} />,
         menuItems: [
-            { name: 'Link 1', path: '#' },
+            { name: 'Link 1', path: '#', hover: true },
             { name: 'Link 2', path: '#' },
             { name: 'Link 3', path: '#' },
             { name: 'Link 4', path: '#' },
             {
                 name: 'Link 5',
                 path: [
-                    { name: 'SubLink 1', path: '#' },
+                    { name: 'SubLink 1', path: '#', icon: <PersonIcon /> },
                     { name: 'SubLink 2', path: '#' },
                     { name: 'SubLink 3', path: '#' },
                     { name: 'SubLink 4', path: '#' },
@@ -117,10 +117,18 @@ export const UserPanelHeaderLogoTitle: Story = {
             </div>
         ),
         menuItems: [
-            { name: 'Link 1', path: '#' },
+            { name: 'Link 1', path: '#', icon: <PersonIcon /> },
             { name: 'Link 2', path: '#' },
             { name: 'Link 3', path: '#' },
-            { name: 'Link 4', path: '#' },
+            {
+                name: 'Link 4',
+                path: [
+                    { name: 'SubLink 1', path: '#' },
+                    { name: 'SubLink 2', path: '#' },
+                    { name: 'SubLink 3', path: '#' },
+                    { name: 'SubLink 4', path: '#' },
+                ],
+            },
             {
                 name: 'Link 5',
                 path: [
@@ -129,7 +137,9 @@ export const UserPanelHeaderLogoTitle: Story = {
                     { name: 'SubLink 3', path: '#' },
                     { name: 'SubLink 4', path: '#' },
                 ],
+                icon: <PersonIcon />,
             },
+            { name: 'Link 6', path: '#' },
         ],
         userPanelMenuItems: [
             { name: 'Profile', path: '#', icon: <PersonIcon /> },
@@ -137,9 +147,13 @@ export const UserPanelHeaderLogoTitle: Story = {
         ],
         configuration: {
             centralLogo: false,
+            hover: true,
+            notification: true,
+            dropDownIcon: true,
+            // dropDownIcon: <ArrowDropDownOutlinedIcon sx={{ color: 'red' }} />,
             dropDownConfiguration: {
                 anchorOrigin: {
-                    vertical: 'top',
+                    vertical: 'bottom',
                     horizontal: 'right',
                 },
                 transformOrigin: {
@@ -150,6 +164,61 @@ export const UserPanelHeaderLogoTitle: Story = {
         },
         router: null,
         onLogout: () => {},
+        notificationData: {
+            unread: {
+                notifications: [
+                    {
+                        id: 1,
+                        status: 'valid',
+                        text: 'Search "TCP" save successfully',
+                        link: {
+                            router: null,
+                            to: '#',
+                        },
+                    },
+                    { id: 2, status: 'invalid', text: 'ghgjgfsdf.pcap' },
+                    { id: 2, status: 'invalid', text: 'new_123aaaa8.pcap' },
+                    { id: 2, status: 'valid', text: 'ghgjgfsdfyui.pcap' },
+                ],
+                showMore: {
+                    router: null,
+                    to: '#',
+                    children: <Typography sx={{ color: 'red' }}>Show more</Typography>,
+                },
+                totalCount: 4,
+            },
+            read: {
+                notifications: [
+                    {
+                        id: 1,
+                        status: 'valid',
+                        text: 'sdganhbasddd.pcap',
+                        link: {
+                            router: null,
+                            to: '#',
+                        },
+                    },
+                    {
+                        id: 2,
+                        status: 'invalid',
+                        text: 'ghgjgfsdf.pcap',
+                        link: {
+                            router: null,
+                            to: '#',
+                        },
+                    },
+                    { id: 2, status: 'valid', text: 'new_123aaaa8.pcap' },
+                    { id: 2, status: 'valid', text: 'fsdfsfsfsfsfsdssssssyui.pcap' },
+                    { id: 1, status: 'valid', text: 'nerver_123_new.pcap' },
+                    { id: 2, status: 'valid', text: 'Changes discarded.pcap' },
+                    { id: 2, status: 'invalid', text: 'new_123aaaa8.pcap' },
+                ],
+                totalCount: 4,
+            },
+            markAsRead: () => {
+                console.log('markAsRead');
+            },
+        },
     },
 };
 export const UserPanelHeaderTitle: Story = {