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
new file mode 100644
index 0000000..df5eca6
--- /dev/null
+++ b/src/client/dd-hub-react/src/sections/document/view/create-filter-modal.tsx
@@ -0,0 +1,42 @@
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import Typography from '@mui/material/Typography';
+
+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,
+};
+
+type ModalProps = {
+  open: boolean;
+  handleClose: () => void;
+}
+
+export default function CreateFilterModal({ open, handleClose }: ModalProps) {
+  return (
+    <div>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Text in a modal
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+          </Typography>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx b/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx
index dbd1a9c..946488b 100644
--- a/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx
+++ b/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx
@@ -14,6 +14,7 @@ import { Iconify } from 'src/components/iconify';
 import { DocItem } from '../doc-item';
 import { BoolFilter } from '../bool-filter';
 import { TextFilter } from '../text-filter';
+import CreateFilterModal from './create-filter-modal';
 import { DecimalFilter, IntFilter } from '../num-filter';
 import { DateFilter, DateTimeFilter, TimeFilter } from '../date-filter';
 
@@ -39,6 +40,8 @@ export function DocSearchView({ posts }: Props) {
     });
   }, []);
 
+  const [openModal, setOpenModal] = useState(false);
+
   //#region example components
   // <Box
   //   sx={{
@@ -78,11 +81,14 @@ export function DocSearchView({ posts }: Props) {
           variant="contained"
           color="inherit"
           startIcon={<Iconify icon="mingcute:add-line" />}
+          onClick={() => setOpenModal(true)}
         >
           New filter
         </Button>
       </Box>
 
+      <CreateFilterModal open={openModal} handleClose={() => setOpenModal(false)} />
+
       <Grid container spacing={3}>
         {filters.map((filter, index) => {
 
@@ -118,8 +124,8 @@ export function DocSearchView({ posts }: Props) {
               key={filter.id}
               size={{
                 xs: 12,
-                sm:  6,
-                md:  3,
+                sm: 6,
+                md: 3,
               }}
             >
               <Box