diff --git a/package.json b/package.json
index c7e450d..ecb11de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netservice/astrea-react-ds",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "dist/umd/index.min.js",
   "module": "dist/esm/index.js",
   "license": "Apache-2.0",
@@ -49,7 +49,8 @@
   },
   "dependencies": {
     "@fontsource/titillium-web": "^4.5.9",
-    "@storybook/test": "^8.1.6"
+    "@storybook/test": "^8.1.6",
+    "date-fns": "2.29.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5fa94ef..b033854 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@storybook/test':
     specifier: ^8.1.6
     version: 8.1.6(@types/jest@29.5.12)(jest@29.7.0)
+  date-fns:
+    specifier: 2.29.3
+    version: 2.29.3
 
 devDependencies:
   '@babel/cli':
@@ -48,7 +51,7 @@ devDependencies:
     version: 5.15.15(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1)
   '@mui/x-date-pickers':
     specifier: ^6.12.1
-    version: 6.20.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.15.19)(@mui/system@5.15.15)(@types/react@18.3.3)(moment@2.30.1)(react-dom@18.3.1)(react@18.3.1)
+    version: 6.20.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.15.19)(@mui/system@5.15.15)(@types/react@18.3.3)(date-fns@2.29.3)(moment@2.30.1)(react-dom@18.3.1)(react@18.3.1)
   '@rollup/plugin-alias':
     specifier: ^5.1.0
     version: 5.1.0(rollup@3.29.4)
@@ -2579,7 +2582,7 @@ packages:
       react-is: 18.3.1
     dev: true
 
-  /@mui/x-date-pickers@6.20.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.15.19)(@mui/system@5.15.15)(@types/react@18.3.3)(moment@2.30.1)(react-dom@18.3.1)(react@18.3.1):
+  /@mui/x-date-pickers@6.20.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.15.19)(@mui/system@5.15.15)(@types/react@18.3.3)(date-fns@2.29.3)(moment@2.30.1)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-DKUzDpHTrP5f6BPclWAs46zrOgDZ+4ewizCO0qbVXMC6rYrZh+ElNeF396GqdZBfrt3ATEyAEa1CW2mceK4wng==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -2625,6 +2628,7 @@ packages:
       '@mui/utils': 5.15.14(@types/react@18.3.3)(react@18.3.1)
       '@types/react-transition-group': 4.4.10
       clsx: 2.1.1
+      date-fns: 2.29.3
       moment: 2.30.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -5893,6 +5897,10 @@ packages:
       is-data-view: 1.0.1
     dev: true
 
+  /date-fns@2.29.3:
+    resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==}
+    engines: {node: '>=0.11'}
+
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
diff --git a/src/components/components/NsInputFile.tsx b/src/components/components/NsInputFile.tsx
index 2b12b86..eb4f2db 100644
--- a/src/components/components/NsInputFile.tsx
+++ b/src/components/components/NsInputFile.tsx
@@ -8,7 +8,7 @@ export interface NsInputFileProps {
   onChange?: (e: any) => void;
 }
 
-export function NsInputFile({ onChange, value }: NsInputFileProps) {
+export function NsInputFile({ onChange, value, ...rest }: NsInputFileProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [selectedFile, setSelectedFile] = useState<any>(value);
   const { t } = useTranslation();
@@ -50,6 +50,7 @@ export function NsInputFile({ onChange, value }: NsInputFileProps) {
         id={inputId}
         style={{ display: 'none' }}
         ref={inputRef}
+        {...rest}
       />
       <label htmlFor={inputId}>
         <Button
diff --git a/src/components/components/form/fields/NsTimePicker.tsx b/src/components/components/form/fields/NsTimePicker.tsx
new file mode 100644
index 0000000..9efcb64
--- /dev/null
+++ b/src/components/components/form/fields/NsTimePicker.tsx
@@ -0,0 +1,94 @@
+import { TextFieldProps } from '@mui/material';
+import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { composeValidators, NsInput } from '../validators';
+import { NsLabelInput } from '../../NsLabelInput';
+import uniqueId from '../../../../util/uniqueId';
+import { useFormField } from 'relay-forms';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import moment, { Moment } from 'moment';
+import { PickersInputComponentLocaleText } from '@mui/x-date-pickers/locales';
+import { useTranslation } from 'react-i18next';
+import { TimePicker } from '@mui/x-date-pickers';
+
+const FMT = 'HH:mm';
+
+export type NsTimePickerProps = NsInput<Omit<TextFieldProps, 'value'>, string> & {
+    localeText?: PickersInputComponentLocaleText<moment.Moment>;
+    format?: string;
+    ampm?: boolean;
+};
+
+export const NsTimePicker: React.FC<NsTimePickerProps> = ({
+    name,
+    label,
+    defaultValue,
+    validate,
+    errorMessage,
+    disabled,
+    dependsOn,
+    onChange,
+    ampm = false,
+    format = FMT,
+    localeText,
+    ...rest
+}) => {
+    const key = useMemo(() => name || uniqueId('v_picker-'), [name]);
+    const deps = useMemo(() => dependsOn, []);
+    const { i18n } = useTranslation();
+
+    const validateCallback = useCallback(
+        (v: string, deps: any) => composeValidators(validate, errorMessage)(v, deps),
+        [validate, errorMessage],
+    );
+
+    const [{ value, error }, setValue] = useFormField<string>({
+        key,
+        initialValue: defaultValue as string,
+        validate: validateCallback,
+        dependsOn: deps,
+    });
+
+    const setPickerValueCallback = useCallback(
+        (date: Moment | null) => {
+            const formattedDate = date ? date.format(FMT) : '';
+            setValue(formattedDate);
+
+            if (onChange) {
+                const fakeEvent = {
+                    target: { value: formattedDate, name: name },
+                    currentTarget: { value: formattedDate, name: name },
+                    preventDefault: () => {},
+                    stopPropagation: () => {},
+                } as unknown as React.ChangeEvent<HTMLInputElement>;
+                onChange(fakeEvent);
+            }
+        },
+        [setValue, onChange],
+    );
+
+    React.useEffect(() => {
+        if (disabled) {
+            setValue(defaultValue as string);
+        }
+    }, [disabled]);
+
+    return (
+        <NsLabelInput nameHtml={key} label={label as string}>
+            <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={i18n.language}>
+                <TimePicker
+                    format={format}
+                    ampm={ampm}
+                    value={moment(value, FMT)}
+                    onChange={setPickerValueCallback}
+                    disabled={disabled}
+                    slotProps={{
+                        textField: { error: !!error, fullWidth: true, ...rest },
+                    }}
+                    localeText={localeText}
+                />
+            </LocalizationProvider>
+        </NsLabelInput>
+    );
+};
diff --git a/src/components/components/panel/NsPanel.tsx b/src/components/components/panel/NsPanel.tsx
index b0a0651..ebe62b0 100644
--- a/src/components/components/panel/NsPanel.tsx
+++ b/src/components/components/panel/NsPanel.tsx
@@ -1,89 +1,103 @@
 import React, { useState } from 'react';
-import { Card, CardContent, Typography } from '@mui/material';
+import { Card, CardContent, Typography, SxProps, Theme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/system';
 import { useTranslation } from 'react-i18next';
 import CloseIcon from '@mui/icons-material/Close';
 import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
+import { PanelProps } from 'src/util/types';
 
-export interface PanelProps {
-    type?: 'primary' | 'secondary';
-    title: string;
-    children: React.ReactNode;
-    menu?: boolean;
-    isOpen?: boolean;
-    handleOpen: () => any;
-}
-const StyledCard = styled(Card)<any>(({ theme, type }) => ({
+const StyledCard = styled(Card)<any>(({ theme }) => ({
     border: '1px solid',
     borderColor: '#b1b4b6',
+    margin: '0px !important',
     boxSizing: 'border-box',
     boxShadow: 'none',
     borderRadius: '0px',
     height: '100%',
+    display: 'flex',
+    flexDirection: 'row',
 }));
-
 export const NsPanel = ({
     menu = false,
     type = 'primary',
     title,
+    subtitle,
     children,
-    handleOpen: onClose,
+    handleOpen,
+    button,
     isOpen = true,
+    ...rest
 }: PanelProps) => {
     const { t } = useTranslation();
     const [isHovered, setIsHovered] = useState(false);
 
     return (
-        <StyledCard type={type}>
-            <Box display="flex" flexDirection="row" sx={{ height: '100%' }}>
-                {menu && (
-                    <Box
-                        sx={{
-                            padding: '10px',
-                            flexGrow: 1,
-                            flexDirection: 'column',
-                            background: isHovered ? '#9c9fa1' : '#b1b4b6',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            cursor: 'pointer',
-                            maxWidth: '40px',
-                        }}
-                        onMouseEnter={() => setIsHovered(true)}
-                        onMouseLeave={() => setIsHovered(false)}
-                        onClick={onClose}
-                    >
+        <StyledCard type={type} {...rest}>
+            {menu && (
+                <Box
+                    sx={{
+                        // padding: '10px',
+                        flexGrow: 1,
+                        flexDirection: 'column',
+                        background: isHovered ? '#9c9fa1' : '#b1b4b6',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        cursor: 'pointer',
+                        maxWidth: '40px',
+                        minWidth: '40px',
+                    }}
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                    onClick={handleOpen}
+                >
+                    <Typography fontWeight={isHovered ? 'bold' : 'normal'}>
                         {isOpen ? (
                             <>
-                                <CloseIcon fontWeight={isHovered ? 'bold' : 'normal'} />
-                                <Typography fontWeight={isHovered ? 'bold' : 'normal'}>{t('panel.close')}</Typography>
+                                {typeof button !== 'boolean' ? (
+                                    <CloseIcon fontWeight={isHovered ? 'bold' : 'normal'} />
+                                ) : (
+                                    button
+                                )}
                             </>
                         ) : (
                             <>
-                                <ArrowLeftIcon fontWeight={isHovered ? 'bold' : 'normal'} />
-                                <Typography fontWeight={isHovered ? 'bold' : 'normal'}>{t('panel.open')}</Typography>
+                                {typeof button !== 'boolean' ? (
+                                    <ArrowLeftIcon fontWeight={isHovered ? 'bold' : 'normal'} />
+                                ) : (
+                                    button
+                                )}
                             </>
                         )}
-                    </Box>
-                )}
-                {isOpen && (
-                    <Card
-                        sx={{
-                            borderRadius: '0px',
-                            backgroundColor: type === 'secondary' ? '#2e5a6019' : undefined,
-                        }}
-                    >
-                        <CardContent>
+                    </Typography>
+                </Box>
+            )}
+            {isOpen && (
+                <Card
+                    sx={{
+                        borderRadius: '0px',
+                        margin: 0,
+                        backgroundColor: type === 'secondary' ? '#2e5a6019' : undefined,
+                    }}
+                >
+                    <CardContent>
+                        {title && (
                             <Typography variant={'h3'} fontWeight={900} gutterBottom>
                                 {title}
                             </Typography>
-
+                        )}
+                        {subtitle && (
+                            <Typography variant={'h4'} fontWeight={400}>
+                                {subtitle}
+                            </Typography>
+                        )}
+                        <Box component="div" mt={title || subtitle ? 3 : 0}>
                             {children}
-                        </CardContent>
-                    </Card>
-                )}
-            </Box>
+                        </Box>
+                    </CardContent>
+                </Card>
+            )}
         </StyledCard>
     );
 };
diff --git a/src/index.ts b/src/index.ts
index a94c4de..63a0c3e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,7 +12,7 @@ export { NsLabelInput } from './components/components/NsLabelInput';
 export { Button as NsButton } from '@mui/material';
 export { NsTabs } from './components/components/tabs/NsTabs';
 export { NsPanel } from './components/components/panel/NsPanel';
-export { NsAccordion } from './components/components/NsAccordion';
+export { NsAccordion, NsAccordionDetails } from './components/components/NsAccordion';
 export { NsProgress } from './components/components/NsProgress';
 export { NsPageHeader } from './components/components/pageHeader/NsPageHeader';
 export { NsModal } from './components/components/modals/NsModal';
@@ -44,6 +44,7 @@ export { NsSelectAutocomplete } from './components/components/form/fields/NsSele
 export { NsTextInput } from './components/components/form/fields/NsTextInput';
 export { NsTextArea } from './components/components/form/fields/NsTextArea';
 export { NsFileUpload } from './components/components/form/fields/NsFileUpload';
+export { NsTimePicker } from './components/components/form/fields/NsTimePicker';
 export * from './components/components/form/validators';
 
 /**
diff --git a/src/stories/components/datatable/DataTable.stories.tsx b/src/stories/components/datatable/DataTable.stories.tsx
index 8a83a0c..72021ea 100644
--- a/src/stories/components/datatable/DataTable.stories.tsx
+++ b/src/stories/components/datatable/DataTable.stories.tsx
@@ -23,6 +23,160 @@ import Typography from '@mui/material/Typography';
 const meta: Meta<typeof NsDataGrid> = {
     title: 'Components/DataGrid',
     component: NsDataGrid,
+    parameters: {
+        docs: {
+            source: {
+                type: 'code',
+            },
+        },
+    },
+    argTypes: {
+        columns: {
+            description: 'An array of column definitions for the grid.',
+            control: 'object',
+            table: {
+                type: {
+                    summary: 'ColumnDef<RowType>[]',
+                },
+                defaultValue: {
+                    summary: '[]',
+                },
+            },
+        },
+        defaultColumn: {
+            description: 'An optional definition to set common defaults for all columns.',
+            control: 'object',
+            table: {
+                type: {
+                    summary: 'Partial<ColumnDef<RowType>>',
+                },
+                defaultValue: {
+                    summary: '{}',
+                },
+            },
+        },
+        eventListener: {
+            description: 'Callback to handle table events.',
+            control: 'function',
+            table: {
+                type: {
+                    summary: 'NsDataGridEventHandler<RowType, FilterType>',
+                },
+                defaultValue: {
+                    summary: '() => {}',
+                },
+            },
+        },
+        PagerComponent: {
+            description: 'Optional component to render a custom pager.',
+            control: 'elementType',
+            table: {
+                type: {
+                    summary: 'React.ComponentType<NsTablePagerProps<RowType>>',
+                },
+                defaultValue: {
+                    summary: 'NsTablePager',
+                },
+            },
+        },
+        FilterContainer: {
+            description: 'Optional component to render the filter container.',
+            control: 'elementType',
+            table: {
+                type: {
+                    summary: 'React.ComponentType<FilterContainerProps<FilterType>>',
+                },
+                defaultValue: {
+                    summary: 'null',
+                },
+            },
+        },
+        options: {
+            description: 'Optional configuration options for the grid.',
+            control: 'object',
+            table: {
+                type: {
+                    summary: 'NsDataGridOptions<RowType>',
+                },
+                defaultValue: {
+                    summary: '{}',
+                },
+            },
+        },
+        render: {
+            description: 'Optional render function to customize the layout of the grid.',
+            control: 'function',
+            table: {
+                type: {
+                    summary: 'NsDataGridRenderFn',
+                },
+                defaultValue: {
+                    summary: 'DefaultRenderer',
+                },
+            },
+        },
+        debug: {
+            description: 'Enable debug mode for the grid.',
+            control: 'boolean',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: {
+                    summary: 'false',
+                },
+            },
+        },
+        children: {
+            description: 'React children to be rendered inside the grid container.',
+            control: 'node',
+            table: {
+                type: {
+                    summary: 'React.ReactNode',
+                },
+                defaultValue: {
+                    summary: 'null',
+                },
+            },
+        },
+        fetcher: {
+            description: 'A function that fetches data for the grid (for server-side rendering).',
+            control: 'function',
+            table: {
+                type: {
+                    summary: 'DataFetcher<RowType, FilterType>',
+                },
+                defaultValue: {
+                    summary: 'undefined',
+                },
+            },
+        },
+        type: {
+            description: 'Determines if the grid uses client-side or server-side data fetching.',
+            control: 'select',
+            options: ['client', 'server'],
+            table: {
+                type: {
+                    summary: '"client" | "server"',
+                },
+                defaultValue: {
+                    summary: '"client"',
+                },
+            },
+        },
+        data: {
+            description: 'The data to be displayed in the grid (for client-side rendering).',
+            control: 'object',
+            table: {
+                type: {
+                    summary: 'RowType[]',
+                },
+                defaultValue: {
+                    summary: '[]',
+                },
+            },
+        },
+    },
 };
 
 export default meta;
@@ -34,7 +188,66 @@ type PersonFilters = Partial<{
     status: string;
 }>;
 
-const TemplateServer: StoryFn<typeof NsDataGrid> = ({ render }) => {
+const CustomHeader = () => {
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                gap: 2,
+                paddingBottom: '30px',
+            }}
+        >
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '100% !important' }}>
+                <Typography variant="h4">Titolo</Typography>
+                <NsButton variant="contained" color="primary">
+                    Button
+                </NsButton>
+            </Box>
+            <Typography variant="body1">This is a small paragraph under the title.</Typography>
+        </Box>
+    );
+};
+const MagicFilterContainer = ({ activeFilters, onFilterChange }: FilterContainerProps<PersonFilters>) => {
+    const filterDefs: FilterFieldDefinition<PersonFilters>[] = React.useMemo(
+        () => [
+            {
+                key: 'firstName',
+                label: 'First Name',
+                type: 'text',
+            },
+            {
+                key: 'lastName',
+                label: 'Last Name',
+                type: 'text',
+            },
+            {
+                key: 'age',
+                label: 'Age',
+                type: 'number',
+            },
+            {
+                key: 'status',
+                label: 'Status',
+                type: 'select',
+                options: [
+                    { label: 'Complicated', value: 'complicated' },
+                    { label: 'Single', value: 'single' },
+                    { label: 'Relationship', value: 'relationship' },
+                ],
+            },
+        ],
+        [],
+    );
+    return (
+        <Paper>
+            <NsDynamicFilterForm activeFilters={activeFilters} onFilterChange={onFilterChange} fieldDefs={filterDefs} />
+        </Paper>
+    );
+};
+
+const TemplateServer: StoryFn<typeof NsDataGrid> = (args) => {
     // Here we use @tanstack/react-table's createColumnHelper to create a column helper
     // It is also possible to create the column definitions manually, but this is a more type-safe way.
     const columnHelper = createColumnHelper<Person>();
@@ -78,9 +291,9 @@ const TemplateServer: StoryFn<typeof NsDataGrid> = ({ render }) => {
                 pagination.pageIndex,
                 sorting
                     ? Object.entries(sorting).map(([field, direction]) => ({
-                        field: field as keyof Person,
-                        direction: direction as 'asc' | 'desc',
-                    }))
+                          field: field as keyof Person,
+                          direction: direction as 'asc' | 'desc',
+                      }))
                     : [],
                 filters,
             ).then(
@@ -115,63 +328,41 @@ const TemplateServer: StoryFn<typeof NsDataGrid> = ({ render }) => {
 
     const customtableEventListener: NsDataGridEventHandler<Person, PersonFilters> = React.useCallback((event) => {
         switch (event.type) {
-        case NsDataGridEventType.FILTER_CHANGE:
-            console.log('Filter change:', event.payload);
-            break;
-        case NsDataGridEventType.SORT_CHANGE:
-            console.log('Sort change:', event.payload);
-            break;
-        case NsDataGridEventType.SELECTION_CHANGE:
-            console.log('Selection change:', event.payload);
-            break;
-        default:
-            console.error('Unknown event type:', event.type);
-            break;
+            case NsDataGridEventType.FILTER_CHANGE:
+                console.log('Filter change:', event.payload);
+                break;
+            case NsDataGridEventType.SORT_CHANGE:
+                console.log('Sort change:', event.payload);
+                break;
+            case NsDataGridEventType.SELECTION_CHANGE:
+                console.log('Selection change:', event.payload);
+                break;
+            default:
+                console.error('Unknown event type:', event.type);
+                break;
         }
     }, []);
 
-    const CustomHeader = () => {
-        return (
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'flex-start',
-                    gap: 2,
-                    paddingBottom: '30px',
-                }}
-            >
-                <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '100% !important' }}>
-                    <Typography variant="h4">Titolo</Typography>
-                    <NsButton variant="contained" color="primary">
-                        Button
-                    </NsButton>
-                </Box>
-                <Typography variant="body1">This is a small paragraph under the title.</Typography>
-            </Box>
-        );
-    };
-
     return (
         <NsDataGrid
             type="server"
-            debug // Enable debug logging
             columns={columns}
             defaultColumn={defaultColumn}
             // NsTablePager is the default pager component and can be omitted, but you can provide your own
             PagerComponent={NsTablePager}
-            FilterContainer={MagicFilterContainer}
+            onRowSelectionChange={setSelectedRows}
+            FilterContainer={args.FilterContainer}
             fetcher={fetcher}
             eventListener={customtableEventListener}
             options={gridOptions}
-            render={render}
+            render={args.render}
         >
-            {CustomHeader()}
+            {args.children}
         </NsDataGrid>
     );
 };
 
-const TemplateClient: StoryFn<typeof NsDataGrid> = () => {
+const TemplateClient: StoryFn<typeof NsDataGrid> = (args) => {
     // Here we use @tanstack/react-table's createColumnHelper to create a column helper
     // It is also possible to create the column definitions manually, but this is a more type-safe way.
     const columnHelper = createColumnHelper<Person>();
@@ -222,86 +413,29 @@ const TemplateClient: StoryFn<typeof NsDataGrid> = () => {
         rowSelection: 'single',
         customRowIdMapper: (row) => row.id,
     };
-    const CustomHeader = () => {
-        return (
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'flex-start',
-                    gap: 2,
-                    paddingBottom: '30px',
-                }}
-            >
-                <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '100% !important' }}>
-                    <Typography variant="h4">Titolo</Typography>
-                    <NsButton variant="contained" color="primary">
-                        Bottone
-                    </NsButton>
-                </Box>
-                <Typography variant="body1">Questo è un piccolo paragrafo sotto il titolo.</Typography>
-            </Box>
-        );
-    };
+
     return (
         <NsDataGrid
             type="client"
-            debug // Enable debug logging
             columns={columns}
             defaultColumn={defaultColumn}
             onRowSelectionChange={setSelectedRows}
-            // NsTablePager is the default pager component and can be omitted, but you can provide your own
             PagerComponent={NsTablePager}
-            FilterContainer={MagicFilterContainer}
             data={data}
             options={gridOptions}
         >
-            {CustomHeader()}
+            {args.children}
         </NsDataGrid>
     );
 };
 
-function MagicFilterContainer({ activeFilters, onFilterChange }: FilterContainerProps<PersonFilters>) {
-    const filterDefs: FilterFieldDefinition<PersonFilters>[] = React.useMemo(
-        () => [
-            {
-                key: 'firstName',
-                label: 'First Name',
-                type: 'text',
-            },
-            {
-                key: 'lastName',
-                label: 'Last Name',
-                type: 'text',
-            },
-            {
-                key: 'age',
-                label: 'Age',
-                type: 'number',
-            },
-            {
-                key: 'status',
-                label: 'Status',
-                type: 'select',
-                options: [
-                    { label: 'Complicated', value: 'complicated' },
-                    { label: 'Single', value: 'single' },
-                    { label: 'Relationship', value: 'relationship' },
-                ],
-            },
-        ],
-        [],
-    );
-    return (
-        <Paper>
-            <NsDynamicFilterForm activeFilters={activeFilters} onFilterChange={onFilterChange} fieldDefs={filterDefs} />
-        </Paper>
-    );
-}
-
 export const ServerDataGrid = TemplateServer.bind({});
+ServerDataGrid.args = {};
+
 export const ServerDataGridCustomLayout = TemplateServer.bind({});
 ServerDataGridCustomLayout.args = {
+    children: <CustomHeader />,
+    FilterContainer: MagicFilterContainer,
     render: (
         FilterContainer: React.ReactElement,
         Table: React.ReactElement,
@@ -323,4 +457,8 @@ ServerDataGridCustomLayout.args = {
         </Box>
     ),
 };
+
 export const ClientDataGrid = TemplateClient.bind({});
+ClientDataGrid.args = {
+    children: <CustomHeader />,
+};
diff --git a/src/stories/components/datatable/NsDataTable.mdx b/src/stories/components/datatable/NsDataTable.mdx
new file mode 100644
index 0000000..b026fdc
--- /dev/null
+++ b/src/stories/components/datatable/NsDataTable.mdx
@@ -0,0 +1,141 @@
+import { Meta, Title, Subtitle, Description , Primary, Source, Controls, Story, Stories, Canvas, Preview ,ArgsTable } from '@storybook/blocks';
+import * as NsDataTable from './DataTable.stories';
+
+<Meta of={NsDataTable} />
+
+<h1>Table</h1>
+
+<p>
+  Use the table component to make information easier to compare and scan for users.
+</p>
+<p>
+  The `NsDataGrid` component provides a powerful, flexible grid system that can handle both 
+  client-side and server-side data rendering. 
+  This component is based on the `@tanstack/react-table` library, 
+  offering advanced features such as pagination, sorting, filtering, and row selection.
+</p>
+<p>
+  The `NsDataGrid` component offers flexibility for both client-side and server-side data rendering. 
+  Whether you need server-side pagination for large datasets or client-side rendering for smaller data, 
+  the component provides the necessary tools to customize and manage your grid efficiently.
+</p>
+
+<h3>Server data grid</h3>
+<p>
+  The `NsDataGrid` component in server-side mode fetches data from an external source and supports 
+  server-side pagination, sorting, and filtering. It requires a `fetcher` function to load data.
+</p>
+<Primary />
+<Controls/>
+
+<h3>Client data grid</h3>
+<p>
+  The client-side mode directly renders data passed via the `data` prop. 
+  All pagination, sorting, and filtering is handled locally.
+  </p>
+
+
+<h3>Customization</h3>
+<h4>Layout customization</h4>
+
+<p>
+  You can customize the grid layout by providing a `render` function. 
+  The `render` function allows you to specify how the filter section, table, 
+  and pager are laid out on the page.  
+</p>
+```jsx
+<NsDataGrid
+  type="server"
+  columns={columns}
+  fetcher={fetcher}
+  render={(FilterContainer, Table, Pager) => (
+    <div>
+      {FilterContainer}
+      <div>{Table}</div>
+      <div>{Pager}</div>
+    </div>
+  )}
+/>;
+``` 
+<Story of={NsDataTable.ServerDataGridCustomLayout}/>
+{/* <Controls of={NsDataTable.ServerDataGridCustomLayout}/> */}
+
+
+<h4>Event Listeners</h4>
+
+<p>
+  To handle events such as row selection, filtering, or sorting changes, 
+  you can provide an `eventListener` callback. 
+  This allows you to perform actions based on user interaction with the grid.
+</p>
+```jsx
+const handleEvent = (event) => {
+  if (event.type === 'SELECTION_CHANGE') {
+    console.log('Selected rows:', event.payload);
+  }
+};
+
+<NsDataGrid
+  type="client"
+  columns={columns}
+  data={data}
+  eventListener={handleEvent}
+/>;
+/>;
+``` 
+
+
+{/* <h3>Action dialog</h3>
+
+<p>
+  Example of a paragraph that contains information and details to take an action or reject it.
+</p>
+<p>
+To prevent the dialog from closing when clicking outside of it, 
+you need to pass a function that checks the received value. 
+Example:
+</p>
+```jsx
+const [isOpen, setIsOpen] = React.useState(false);
+const handleClose = (value: any) => {
+    if (value !== undefined) {
+        setIsOpen(false);
+    }
+};
+``` */}
+
+{/* <p>
+In this example, the 'handleClose' function ensures that the dialog will only close if a valid value is provided. 
+This avoids unintended closures, such as when clicking outside the dialog.
+</p>
+
+
+<h3>Basic dialog</h3>
+<p>
+  This type of dialog provides additional information but does not contain any additional action.
+</p> */}
+{/* <Story of={NsDataTable.BasicModal}/>
+<Controls of={NsDataTable.BasicModal}/> */}
+{/* <Source of={NsDialog.BasicModal}/> */}
+{/* <h3>Nested  dialog</h3>
+<p>
+  Dialogs can be nested, for example a select within a dialog, but stacking of more than two dialogs, 
+  or any two dialogs with a backdrop is <b>discouraged</b>.
+</p> */}
+
+
+{/* <h3>Fullscreen dialog</h3>
+<Story  of={NsDataTable.FullscreenModal} />
+<Controls of={NsDataTable.FullscreenModal}/>
+<h3>No action dialog</h3>
+<p>
+  Dialogs can be opened without the need for a button by directly setting the state that controls their 
+  visibility to true. 
+  This means that you can manage the dialog's open state programmatically by updating the state directly, 
+  bypassing the need for user actions such as clicking a button. By controlling the open state in this manner, 
+  you can programmatically display the dialog based on specific conditions or events within your application, 
+  providing greater flexibility and control over its visibility.
+</p> */}
+<br/>
+<br/>
+<br/>
\ No newline at end of file
diff --git a/src/stories/components/form/fields/NsDateCalendar.stories.tsx b/src/stories/components/form/fields/NsDateCalendar.stories.tsx
index ed01d1e..e07ddeb 100644
--- a/src/stories/components/form/fields/NsDateCalendar.stories.tsx
+++ b/src/stories/components/form/fields/NsDateCalendar.stories.tsx
@@ -2,63 +2,57 @@ import { Grid } from '@mui/material';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Box } from '@mui/material';
 import { NsForm } from 'src/components/components/form/NsForm';
 import { NsDateCalendar } from 'src/components/components/form/fields/NsDateCalendar';
-import {
-  ValidatorFactoryType,
-  required,
-} from 'src/components/components/form/validators';
+import { ValidatorFactoryType, required } from 'src/components/components/form/validators';
 import { FormValueStateReturn } from 'relay-forms';
 import moment from 'moment';
 
 export default {
-  title: 'Components/Form/Date Calendar',
-  component: NsDateCalendar,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: { label: { type: 'string' } },
+    title: 'Components/Form/Date Calendar',
+    component: NsDateCalendar,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: { label: { type: 'string' } },
 } as Meta<typeof NsDateCalendar>;
 
 function isRangeValid<ValueType>(message: React.ReactNode) {
-  return (
-    endDate: ValueType,
-    deps?: { [key: string]: FormValueStateReturn<any> },
-  ) => {
-    if (deps && deps['dateFieldFrom']) {
-      const { value } = deps['dateFieldFrom'];
-      if (value && value.length > 0) {
-        const start = moment(value, 'DD/MM/YYYY');
-        const end = moment(endDate as string, 'DD/MM/YYYY');
-        if (!start.isSameOrBefore(end)) {
-          return message as string;
+    return (endDate: ValueType, deps?: { [key: string]: FormValueStateReturn<any> }) => {
+        if (deps && deps['dateFieldFrom']) {
+            const { value } = deps['dateFieldFrom'];
+            if (value && value.length > 0) {
+                const start = moment(value, 'DD/MM/YYYY');
+                const end = moment(endDate as string, 'DD/MM/YYYY');
+                if (!start.isSameOrBefore(end)) {
+                    return message as string;
+                }
+            }
         }
-      }
-    }
-    return undefined;
-  };
+        return undefined;
+    };
 }
 
 const Template: StoryFn<typeof NsDateCalendar> = (args) => {
-  const [data, setData] = React.useState<any>({});
-  const { t } = useTranslation();
-
-  return (
-    <NsForm
-      sx={{ width: '50%' }}
-      onSubmit={(data: any) => setData(data)}
-      onReset={() => setData({})}
-    >
-      <Grid container spacing={2}>
-        <Grid item xs={12}>
-          <NsDateCalendar
-            name="birthdaydate"
-            label="Birthday date"
-            validate={required}
-            errorMessage={t('form.errors.required', { field: 'Birthday date' })}
-          />
-        </Grid>
-      </Grid>
-    </NsForm>
-  );
+    const [data, setData] = React.useState<any>();
+    const { t } = useTranslation();
+    const label = 'birthdaydate';
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+            <NsForm sx={{ width: '50%' }} onSubmit={(data: any) => setData(data)} onReset={() => setData({})}>
+                <Grid container spacing={2}>
+                    <Grid item xs={12}>
+                        <NsDateCalendar
+                            name={label}
+                            label="Birthday date"
+                            validate={required}
+                            errorMessage={t('form.errors.required', { field: 'Birthday date' })}
+                        />
+                    </Grid>
+                </Grid>
+            </NsForm>
+            {data && data[label]}
+        </Box>
+    );
 };
 
 export const DateCalendars = Template.bind({});
diff --git a/src/stories/components/form/fields/NsFileUpload.mdx b/src/stories/components/form/fields/NsFileUpload.mdx
new file mode 100644
index 0000000..f52ae5f
--- /dev/null
+++ b/src/stories/components/form/fields/NsFileUpload.mdx
@@ -0,0 +1,74 @@
+import {
+  Meta,
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from '@storybook/blocks';
+import * as NsFileUploadStories from './NsFileUpload.stories';
+
+<Meta of={NsFileUploadStories} />
+
+<h1>File Upload</h1>
+
+<h3>What is</h3>
+<p>
+  The File Upload component allows users to upload files as part of a form. It supports different types of files by configuring the accepted file formats.
+</p>
+
+<h3>How it works</h3>
+<p>
+  The File Upload component is based on MUI and allows users to select a file from their system. You can control the type of files accepted by passing the <code>inputProps</code> prop with an <code>accept</code> attribute, e.g., <code>{`accept: ".pdf,.eml"`}</code> to restrict uploads to PDFs and EML files.
+</p>
+
+<Primary />
+
+<h3>Props</h3>
+<Controls of={NsFileUploadStories.FileUploadComponent} />
+
+<h3>Example with Type and Accepted Files</h3>
+<p>
+  In the following example, the file input is restricted to only accept PDFs and EML files using the <code>accept</code> attribute in <code>inputProps</code>.
+</p>
+
+<Primary name="FileUploadWithAccept" />
+
+<h3>Best Practices</h3>
+<ul>
+  <li>
+    Use <code>type="file"</code> to ensure the input element behaves as a file input.
+  </li>
+  <li>
+    Define <code>inputProps</code> with the <code>accept</code> attribute to restrict the file types that can be uploaded.
+  </li>
+  <li>
+    Handle file validation using the <code>validate</code> prop, passing appropriate validation functions to check the file before processing it.
+  </li>
+</ul>
+
+<h3>Accessibility</h3>
+<ul>
+  <li>Ensure that the file input is keyboard-accessible and focusable for improved accessibility.</li>
+  <li>Provide proper error messages when validation fails to help users correct issues with their file uploads.</li>
+</ul>
+
+<h3>Do</h3>
+<ul>
+  <li>
+    Use the <code>accept</code> attribute in <code>inputProps</code> to restrict the file types that can be uploaded.
+  </li>
+  <li>Validate the file size and type before processing it.</li>
+  <li>Provide meaningful error messages when a file fails validation.</li>
+</ul>
+
+<h3>Don'ts</h3>
+<ul>
+  <li>
+    Avoid allowing unrestricted file types unless absolutely necessary, as this can pose security risks.
+  </li>
+  <li>Don't forget to handle validation to ensure files meet the expected criteria.</li>
+</ul>
+
+<Stories />
diff --git a/src/stories/components/form/fields/NsFileUpload.stories.tsx b/src/stories/components/form/fields/NsFileUpload.stories.tsx
index e8b96d0..84e724f 100644
--- a/src/stories/components/form/fields/NsFileUpload.stories.tsx
+++ b/src/stories/components/form/fields/NsFileUpload.stories.tsx
@@ -9,7 +9,44 @@ import { NsFileUpload } from 'src/components/components/form/fields/NsFileUpload
 export default {
   title: 'Components/Form/File Upload',
   component: NsFileUpload,
-  argTypes: {},
+  argTypes: {
+    name: {
+      control: 'text',
+      description: 'Name of the file input field',
+      defaultValue: 'fileUpload',
+    },
+    inputProps: {
+      control: 'object',
+      description: 'Props for the input element, such as accept for file types.',
+      defaultValue: { accept: '.pdf,.eml' },
+    },
+    defaultValue: {
+      control: 'object',
+      description: 'Default file value',
+    },
+    displayForm: {
+      control: 'boolean',
+      description: 'Whether to display the form surrounding the file upload input',
+      defaultValue: true,
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Custom error message for validation failures',
+      defaultValue: 'Please upload a valid file.',
+    },
+    validate: {
+      control: 'function',
+      description: 'Validation function for the uploaded file',
+    },
+    onChange: {
+      action: 'file changed',
+      description: 'Called when the file input changes',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the file input',
+    },
+  },
 } as Meta<typeof NsFileUpload>;
 
 const Template: StoryFn<typeof NsFileUpload> = (args) => {
@@ -28,6 +65,7 @@ const Template: StoryFn<typeof NsFileUpload> = (args) => {
   return (
     <NsForm onSubmit={onSubmit} onReset={() => setData(undefined)}>
       <NsFileUpload
+        {...args}
         displayForm
         errorMessage={t('form.errors.required', { field: 'File' })}
         name="fileUpload"
@@ -40,3 +78,13 @@ const Template: StoryFn<typeof NsFileUpload> = (args) => {
 };
 
 export const FileUploadComponent = Template.bind({});
+
+export const FileUploadWithAccept = Template.bind({});
+FileUploadWithAccept.args = {
+  name: 'fileUpload',
+  inputProps: {
+    accept: '.pdf,.eml',
+  },
+  onChange: (file: File) => console.log('Accepted file:', file),
+  errorMessage: 'Please upload a valid file.',
+};
\ No newline at end of file
diff --git a/src/stories/components/form/fields/NsTimePicker.mdx b/src/stories/components/form/fields/NsTimePicker.mdx
new file mode 100644
index 0000000..58ef3f1
--- /dev/null
+++ b/src/stories/components/form/fields/NsTimePicker.mdx
@@ -0,0 +1,16 @@
+import {
+  Meta,
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from '@storybook/blocks';
+import * as NsTimePicker from './NsTimePicker.stories';
+
+<Meta of={NsTimePicker} />
+
+<h1>Time Picker</h1>
+<Primary />
+<Controls/>
diff --git a/src/stories/components/form/fields/NsTimePicker.stories.tsx b/src/stories/components/form/fields/NsTimePicker.stories.tsx
new file mode 100644
index 0000000..4f239b3
--- /dev/null
+++ b/src/stories/components/form/fields/NsTimePicker.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { NsTimePicker } from 'src/components/components/form/fields/NsTimePicker';
+import { Box } from '@mui/material';
+import { NsForm } from 'src/components/components/form/NsForm';
+import { required } from 'src/components/components/form/validators';
+import { useTranslation } from 'react-i18next';
+
+export default {
+    title: 'Components/Form/Time Picker',
+    component: NsTimePicker,
+    argTypes: {},
+} as Meta;
+
+const Template: StoryFn<typeof NsTimePicker> = (args) => {
+    const { t } = useTranslation();
+    const [time, setTime] = React.useState<any>({});
+    const label = 'meeting';
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+            <NsForm sx={{ width: '50%' }} onSubmit={(time: any) => setTime(time)} onReset={() => setTime({})}>
+                <NsTimePicker
+                    name={label}
+                    label="meeting"
+                    validate={required}
+                    errorMessage={t('form.errors.required', { field: 'Birthday date' })}
+                />
+            </NsForm>
+            {time && time[label]}
+        </Box>
+    );
+};
+
+export const Default = Template.bind({});
diff --git a/src/stories/components/panel/NsPanel.mdx b/src/stories/components/panel/NsPanel.mdx
new file mode 100644
index 0000000..44f7173
--- /dev/null
+++ b/src/stories/components/panel/NsPanel.mdx
@@ -0,0 +1,29 @@
+import { Meta, Title, Subtitle, Description , Primary, Source, Controls, Story, Stories, Canvas, Preview ,ArgsTable } from '@storybook/blocks';
+import * as NsPanel from './NsPanel.stories';
+
+<Meta of={NsPanel} />
+
+<h1>Panel</h1>
+
+<p>
+  The background of an application resembles the flat, opaque texture of a sheet of paper, 
+  and an application's behavior mimics paper's ability to be re-sized, shuffled, 
+  and bound together in multiple sheets.
+</p>
+<Primary />
+<Controls/>
+<p>
+The panels serve to visually separate the components of the page and allow the user to visually 
+recognize the individual macro areas. Unlike cards, they can be considered as containers 
+for other components.
+</p>
+<p>
+It is possible to give a weight to the single panels through the use of color as in the following example:
+</p>
+<Story of={NsPanel.BasicPanel}/>
+<Story of={NsPanel.BasicPanelSecondary}/>
+
+
+<h3>Menu panel </h3>
+<Story of={NsPanel.MenuPanel}/>
+
diff --git a/src/stories/components/panel/NsPanel.stories.tsx b/src/stories/components/panel/NsPanel.stories.tsx
new file mode 100644
index 0000000..74a9101
--- /dev/null
+++ b/src/stories/components/panel/NsPanel.stories.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Box, minHeight } from '@mui/system';
+import { NsPanel } from 'src/components/components/panel/NsPanel';
+
+const meta: Meta<typeof NsPanel> = {
+    title: 'Components/Panel',
+    component: NsPanel,
+    parameters: {
+        docs: {
+            source: {
+                type: 'code',
+            },
+        },
+    },
+};
+export default meta;
+
+const Template: StoryFn<typeof NsPanel> = (args) => {
+    const [isOpen, setIsOpen] = React.useState(args.open);
+
+    return (
+        <Box
+            sx={{
+                justifyContent: 'center',
+                padding: '10px',
+                margin: '10px',
+                border: 'solid 1px black',
+            }}
+        >
+            <NsPanel
+                menu={args.menu}
+                type={args.type}
+                title={args.title}
+                subtitle={args.subtitle}
+                handleOpen={() => setIsOpen(!isOpen)}
+                isOpen={isOpen}
+                sx={{ ...args.sx }}
+            >
+                {args.children}
+            </NsPanel>
+        </Box>
+    );
+};
+
+export const BasicPanel = Template.bind({});
+BasicPanel.args = {
+    menu: false,
+    type: 'primary',
+    title: 'Basic NsPanel',
+    subtitle:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo tellus, laoreet vel massa et, ornare luctus tellus. Aenean ultricies massa augue. Suspendisse a vestibulum tortor. In hac habitasse platea dictumst.',
+    children: <Box> This is a Box passed as children </Box>,
+    sx: {},
+};
+export const BasicPanelSecondary = Template.bind({});
+BasicPanelSecondary.args = {
+    menu: false,
+    type: 'secondary',
+    title: 'Basic NsPanel',
+    subtitle:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo tellus, laoreet vel massa et, ornare luctus tellus. Aenean ultricies massa augue. Suspendisse a vestibulum tortor. In hac habitasse platea dictumst.',
+    children: <Box> This is a Box passed as children </Box>,
+    sx: {},
+};
+export const MenuPanel = Template.bind({});
+MenuPanel.args = {
+    menu: true,
+    type: 'primary',
+    title: 'Menu NsPanel',
+    subtitle:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo tellus, laoreet vel massa et, ornare luctus tellus. Aenean ultricies massa augue. Suspendisse a vestibulum tortor. In hac habitasse platea dictumst.',
+    children: <Box> This is a Box passed as children </Box>,
+    sx: {
+        maxWidth: '50%',
+    },
+};
diff --git a/src/stories/components/panel/Panel.stories.tsx b/src/stories/components/panel/Panel.stories.tsx
deleted file mode 100644
index eab9b69..0000000
--- a/src/stories/components/panel/Panel.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { NsPanel } from 'src/components/components/panel/NsPanel';
-
-const meta: Meta<typeof NsPanel> = {
-    title: 'Components/Panel',
-    component: NsPanel,
-};
-
-export const INsPanel: Story = {
-    args: {
-        type: 'primary',
-        title: 'Basic NsPanel',
-        subtitle:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo tellus, laoreet vel massa et, ornare luctus tellus. Aenean ultricies massa augue. Suspendisse a vestibulum tortor. In hac habitasse platea dictumst.',
-    },
-};
-export const MenuPanel: Story = {
-    args: {
-        type: 'primary',
-        title: 'Basic NsPanel',
-        subtitle:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo tellus, laoreet vel massa et, ornare luctus tellus. Aenean ultricies massa augue. Suspendisse a vestibulum tortor. In hac habitasse platea dictumst.',
-        menu: true,
-        onClose: () => console.log('Cliccato!'),
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof NsPanel>;
diff --git a/src/util/types.ts b/src/util/types.ts
index 858e903..c6e2938 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import { INotificationData } from '../components/components/notification/NsNotification';
-import { DialogActionsProps, DialogContentProps, DialogProps, DialogTitleProps } from '@mui/material';
+import { DialogActionsProps, DialogContentProps, DialogProps, DialogTitleProps, SxProps, Theme } from '@mui/material';
 
 export type User = {
     name: string;
@@ -278,3 +278,73 @@ export interface NsDialogProps extends DialogProps {
      */
     setOpen: (open: boolean) => void;
 }
+export interface PanelProps {
+    /**
+     * Defines the type of the panel.
+     *
+     * - `'primary'`: Default panel styling.
+     * - `'secondary'`: Alternative styling for the panel.
+     *
+     * Default is `'primary'`.
+     */
+    type?: 'primary' | 'secondary';
+
+    /**
+     * The title displayed at the top of the panel.
+     * This is required.
+     */
+    title: string;
+
+    /**
+     * A subtitle displayed below the title, providing additional context or description.
+     */
+    subtitle: string;
+
+    /**
+     * The content to be displayed inside the panel.
+     * Accepts any valid React node (components, elements, etc.).
+     */
+    children: React.ReactNode;
+
+    /**
+     * If true, a side menu will be displayed with controls to open or close the panel.
+     *
+     * Default is `false`, meaning no menu will be shown.
+     */
+    menu?: boolean;
+
+    /**
+     * Controls whether the panel is open or closed.
+     *
+     * - `true`: The panel is open and visible.
+     * - `false`: The panel is closed.
+     *
+     * Default is `true`.
+     */
+    isOpen?: boolean;
+
+    /**
+     * A function that is triggered when the panel is opened or closed.
+     *
+     * This callback is useful for managing the panel's open/close state.
+     */
+    handleOpen: () => any;
+
+    /**
+     * Allows you to customize the styles of the panel using the MUI `sx` prop.
+     * You can pass any valid `SxProps<Theme>` object to apply custom styling to the `StyledCard`.
+     */
+    sx?: SxProps<Theme>;
+
+    /**
+     * If true, a close button will be displayed in the panel title.
+     * You can also pass a custom string or React node to replace the default button.
+     *
+     * - `true`: Displays the default close button.
+     * - `string`: Displays a custom text as the close button.
+     * - `ReactNode`: Allows the rendering of a custom React component.
+     *
+     * Default is `false`, meaning no close button will be shown.
+     */
+    button?: boolean | string | React.ReactNode;
+}