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 d84e1b8..a1fe656 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
@@ -44,6 +44,8 @@ export function DocItem({
     // );
     //#endregion
 
+    const [openViewDoc, setOpenViewDoc] = useState(false);
+    
     const renderTitle = (
         <Link
             color="inherit"
diff --git a/src/client/dd-hub-react/src/sections/document/view/create-filter-modal.tsx b/src/client/dd-hub-react/src/sections/document/view/create-filter-modal.tsx
index 0a3a1d8..964a11e 100644
--- a/src/client/dd-hub-react/src/sections/document/view/create-filter-modal.tsx
+++ b/src/client/dd-hub-react/src/sections/document/view/create-filter-modal.tsx
@@ -51,33 +51,31 @@ export default function CreateFilterModal({ open, handleClose }: ModalProps) {
   }
 
   return (
-    <div>
-      <Modal
-        open={open}
-        onClose={closeReset}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={style}>
-          <TextField label="Label" variant="filled" value={name} onChange={e => setName(e.target.value)} />
-          <TextField label="Name" variant="filled" value={label} onChange={e => setLabel(e.target.value)} />
-          <Autocomplete
-            disablePortal
-            options={filterTypes}
-            value={selectedType}
-            onChange={(event, newValue) => setSelectedType(newValue)}
-            renderInput={params => <TextField {...params} label="Type" variant="filled" />}
-          />
-          <Button
-            variant="contained"
-            color="inherit"
-            startIcon={<Iconify icon="mingcute:add-line" />}
-            onClick={() => tryCreateFilter()}
-          >
-            Add filter
-          </Button>
-        </Box>
-      </Modal>
-    </div>
+    <Modal
+      open={open}
+      onClose={closeReset}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={style}>
+        <TextField label="Label" variant="filled" value={name} onChange={e => setName(e.target.value)} />
+        <TextField label="Name" variant="filled" value={label} onChange={e => setLabel(e.target.value)} />
+        <Autocomplete
+          disablePortal
+          options={filterTypes}
+          value={selectedType}
+          onChange={(event, newValue) => setSelectedType(newValue)}
+          renderInput={params => <TextField {...params} label="Type" variant="filled" />}
+        />
+        <Button
+          variant="contained"
+          color="inherit"
+          startIcon={<Iconify icon="mingcute:add-line" />}
+          onClick={() => tryCreateFilter()}
+        >
+          Add filter
+        </Button>
+      </Box>
+    </Modal>
   );
 }
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
new file mode 100644
index 0000000..8dc2dc8
--- /dev/null
+++ b/src/client/dd-hub-react/src/sections/document/view/doc-full-view.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import { TextField } from '@mui/material';
+
+import { Type } from 'src/api/attribute-service';
+
+type DocFullViewProps = {
+    data: Uint8Array;
+    open: boolean;
+    handleClose: () => void;
+}
+
+const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 400,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+};
+
+export default function DocFullView({ data, open, handleClose }: DocFullViewProps) {
+    const [name, setName] = useState<string | undefined>('');
+    const [label, setLabel] = useState<string | undefined>('');
+    const [selectedType, setSelectedType] = useState<Type | null>(null);
+
+    return (
+        <Modal
+            open={open}
+            aria-labelledby="modal-modal-title"
+            aria-describedby="modal-modal-description"
+        >
+            <Box sx={style}>
+                <TextField label="Label" variant="filled" value={name} onChange={e => setName(e.target.value)} />
+                <TextField label="Name" variant="filled" value={label} onChange={e => setLabel(e.target.value)} />
+            </Box>
+        </Modal>
+    );
+}