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 1e807db..087d79f 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
@@ -7,6 +7,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import { Iconify } from 'src/components/iconify/iconify';
 
 import { createFiltersAsync, FilterCreateDto, filterTypes, Type } from '../../../api/filter-service';
+import { useState } from 'react';
 
 const style = {
   position: 'absolute',
@@ -25,6 +26,9 @@ type ModalProps = {
 }
 
 export default function CreateFilterModal({ open, handleClose }: ModalProps) {
+  const [name, setName] = useState<string>('');
+  const [label, setLabel] = useState<string>('');
+
   return (
     <div>
       <Modal
@@ -34,8 +38,8 @@ export default function CreateFilterModal({ open, handleClose }: ModalProps) {
         aria-describedby="modal-modal-description"
       >
         <Box sx={style}>
-          <TextField label="Label" variant="filled" />
-          <TextField label="Name" variant="filled" />
+          <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}