diff --git a/src/client/dd-hub-react/src/sections/document/doc-item.tsx b/src/client/dd-hub-react/src/sections/document/doc-item.tsx
index a949e12..1bbfb8b 100644
--- a/src/client/dd-hub-react/src/sections/document/doc-item.tsx
+++ b/src/client/dd-hub-react/src/sections/document/doc-item.tsx
@@ -13,6 +13,8 @@ import { Doc } from 'src/api/document-service';
 
 import { Iconify } from 'src/components/iconify';
 import { SvgColor } from 'src/components/svg-color';
+
+import DocFullView from './view/doc-full-view';
 // ----------------------------------------------------------------------
 
 export function DocItem({
@@ -161,48 +163,51 @@ export function DocItem({
     }
 
     return (
-        <Card sx={sx} {...other}>
-            <Box
-                sx={(theme) => ({
-                    position: 'relative',
-                    pt: 'calc(100% * 3 / 4)',
-                    ...((large || long) && {
-                        pt: 'calc(100% * 4 / 3)',
-                        '&:after': {
-                            top: 0,
-                            content: "''",
-                            width: '100%',
-                            height: '100%',
-                            position: 'absolute',
-                            bgcolor: varAlpha(theme.palette.grey['900Channel'], 0.72),
-                        },
-                    }),
-                    ...(large && {
-                        pt: {
-                            xs: 'calc(100% * 4 / 3)',
-                            sm: 'calc(100% * 3 / 4.66)',
-                        },
-                    }),
-                })}
-            >
-                {renderShape}
-                {renderCover}
-            </Box>
+        <>
+            <DocFullView data={doc.data} open={openViewDoc} handleClose={() => setOpenViewDoc(false)} />
+            <Card sx={sx} {...other} onClick={() => setOpenViewDoc(true)}>
+                <Box
+                    sx={(theme) => ({
+                        position: 'relative',
+                        pt: 'calc(100% * 3 / 4)',
+                        ...((large || long) && {
+                            pt: 'calc(100% * 4 / 3)',
+                            '&:after': {
+                                top: 0,
+                                content: "''",
+                                width: '100%',
+                                height: '100%',
+                                position: 'absolute',
+                                bgcolor: varAlpha(theme.palette.grey['900Channel'], 0.72),
+                            },
+                        }),
+                        ...(large && {
+                            pt: {
+                                xs: 'calc(100% * 4 / 3)',
+                                sm: 'calc(100% * 3 / 4.66)',
+                            },
+                        }),
+                    })}
+                >
+                    {renderShape}
+                    {renderCover}
+                </Box>
 
-            <Box
-                sx={(theme) => ({
-                    p: theme.spacing(6, 3, 3, 3),
-                    ...((large || long) && {
-                        width: 1,
-                        bottom: 0,
-                        position: 'absolute',
-                    }),
-                })}
-            >
-                {renderDate}
-                {renderTitle}
-                {renderInfo}
-            </Box>
-        </Card>
+                <Box
+                    sx={(theme) => ({
+                        p: theme.spacing(6, 3, 3, 3),
+                        ...((large || long) && {
+                            width: 1,
+                            bottom: 0,
+                            position: 'absolute',
+                        }),
+                    })}
+                >
+                    {renderDate}
+                    {renderTitle}
+                    {renderInfo}
+                </Box>
+            </Card>
+        </>
     );
 }
diff --git a/src/client/dd-hub-react/src/sections/document/view/doc-full-view.tsx b/src/client/dd-hub-react/src/sections/document/view/doc-full-view.tsx
index 8dc2dc8..8a5d254 100644
--- a/src/client/dd-hub-react/src/sections/document/view/doc-full-view.tsx
+++ b/src/client/dd-hub-react/src/sections/document/view/doc-full-view.tsx
@@ -34,6 +34,7 @@ export default function DocFullView({ data, open, handleClose }: DocFullViewProp
             open={open}
             aria-labelledby="modal-modal-title"
             aria-describedby="modal-modal-description"
+            onClose={handleClose}
         >
             <Box sx={style}>
                 <TextField label="Label" variant="filled" value={name} onChange={e => setName(e.target.value)} />