diff --git a/src/pages/DemandNote/Create/SearchForm.js b/src/pages/DemandNote/Create/SearchForm.js
index d8b40c3..c22bcc9 100644
--- a/src/pages/DemandNote/Create/SearchForm.js
+++ b/src/pages/DemandNote/Create/SearchForm.js
@@ -26,6 +26,9 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
     const [isFailPopUp, setIsFailPopUp] = React.useState(false);
     const [failText, setFailText] = React.useState("");
 
+    const [confirmPopUp, setConfirmPopUp] = React.useState(false);
+    const [dueDate, setDueDate] = React.useState(DateUtils.dateStr(new Date()));
+
     const [isSuccessPopUp, setIsSuccessPopUp] = React.useState(false);
     const [resultCount, setResultCount] = React.useState(0);
     const [dnIdList, setDnIdList] = React.useState([]);
@@ -68,18 +71,26 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
             setIsFailPopUp(true);
             return;
         } else {
-            HttpUtils.post({
-                url: UrlUtils.DEMAND_NOTE_CREATE + "/" + issueSelected.id,
-                onSuccess: function (responseData) {
-                    setResultCount(responseData.count);
-                    setDnIdList(responseData.idList);
-                    setIsSuccessPopUp(true);
-                }
-            });
+            setDueDate(DateUtils.dateStr(new Date()));
+            setConfirmPopUp(true);
         }
-
     };
 
+    const doDnCreate=()=>{
+        setConfirmPopUp(false);
+        HttpUtils.post({
+            url: UrlUtils.DEMAND_NOTE_CREATE + "/" + issueSelected.id,
+            params:{
+                dueDate: dueDate
+            },
+            onSuccess: function (responseData) {
+                setResultCount(responseData.count);
+                setDnIdList(responseData.idList);
+                setIsSuccessPopUp(true);
+            }
+        });
+    }
+
     const fileDownload = () => {
         HttpUtils.fileDownload({
             method:'post',
@@ -206,6 +217,47 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                     </DialogActions>
                 </Dialog>
             </div>
+            <div>
+                <Dialog
+                    open={confirmPopUp}
+                    onClose={() => setConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
+                    <DialogTitle><Typography variant="h3">Create Confirm</Typography></DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Grid container alignItems={"center"}>
+                            <Grid item md={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                <Typography variant="h4" style={{ padding: '16px' }}>Due Date: </Typography>
+                          
+                            </Grid>
+                            <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                type="date"
+                                defaultValue={dueDate}
+                                InputProps={{ inputProps: { min: DateUtils.dateStr(new Date()) } }}
+                                onChange={(newValue) => {
+                                    setDueDate(DateUtils.dateStr(newValue))
+                                }}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+                        </Grid>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => setConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                        <Button onClick={() => doDnCreate()}><Typography variant="h5">Confirm</Typography></Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
             <div>
                 <Dialog
                     open={isSuccessPopUp}
diff --git a/src/pages/DemandNote/Search/DataGrid.js b/src/pages/DemandNote/Search/DataGrid.js
index 71d6600..4b42eff 100644
--- a/src/pages/DemandNote/Search/DataGrid.js
+++ b/src/pages/DemandNote/Search/DataGrid.js
@@ -227,15 +227,16 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
             },
         },
         {
-            id: 'issueDate',
-            field: 'issueDate',
-            headerName: 'Due Date / Sent Date',
+            id: 'dueDate',
+            field: 'dueDate',
+            headerName: 'Issue / Due / Sent Date',
             width: 300,
             renderCell: (params) => {
-                return (<>
-                    {DateUtils.dateStr(params?.value)}
-                    {params.row.sentDate ? <><br /> {DateUtils.datetimeStr(params.row.sentDate)}  -  {params.row.sentBy} </>: <> / To be sent</>}
-                </>);
+                return (<table>
+                    <tr><td>Issue:</td><td>{DateUtils.dateStr(params?.row.issueDate)}</td></tr>
+                    <tr><td>Due:</td><td>{params?.value? DateUtils.dateStr(params?.value):"--"}</td></tr>
+                    <tr><td>Sent:</td><td>{params.row.sentDate ? <> {DateUtils.datetimeStr(params.row.sentDate)}  -  {params.row.sentBy} </>: <> To be sent</>}</td></tr>
+                </table>);
             }
         },
         {
diff --git a/src/pages/DemandNote/Search/SearchForm.js b/src/pages/DemandNote/Search/SearchForm.js
index 17b7c6e..89912ce 100644
--- a/src/pages/DemandNote/Search/SearchForm.js
+++ b/src/pages/DemandNote/Search/SearchForm.js
@@ -31,6 +31,9 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
 
+    const [minDueDate, setMinDueDate] = React.useState(searchCriteria.dueDateFrom);
+    const [maxDueDate, setMaxDueDate] = React.useState(searchCriteria.dueDateTo);
+
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
         data.status = selectedLabelsString
@@ -47,6 +50,8 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
             dnNo: data.dnNo,
             dateFrom: data.dateFrom,
             dateTo: data.dateTo,
+            dueDateFrom: data.dueDateFrom,
+            dueDateTo: data.dueDateTo,
             status: (data.status === '' || data.status.includes("all")) ? "" : data.status,
         };
         applySearch(temp);
@@ -181,40 +186,92 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                             />
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                            <TextField
-                                fullWidth
-                                {...register("dateFrom")}
-                                id="dateFrom"
-                                type="date"
-                                label={"Issue Date(From)"}
-                                defaultValue={searchCriteria.dateFrom}
-                                InputProps={{ inputProps: { max: maxDate } }}
-                                onChange={(newValue) => {
-                                    setMinDate(DateUtils.dateStr(newValue));
-                                }}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
-                            />
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                            <Grid container>
+                                <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
+                                    <TextField
+                                        fullWidth
+                                        {...register("dateFrom")}
+                                        id="dateFrom"
+                                        type="date"
+                                        label={"Issue Date(From)"}
+                                        defaultValue={searchCriteria.dateFrom}
+                                        InputProps={{ inputProps: { max: maxDate } }}
+                                        onChange={(newValue) => {
+                                            setMinDate(DateUtils.dateStr(newValue));
+                                        }}
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                </Grid>
+
+                                <Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{mt:0.8, display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}>
+                                    To
+                                </Grid>
+
+                                <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
+                                    <TextField
+                                        fullWidth
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                        {...register("dateTo")}
+                                        InputProps={{ inputProps: { min: minDate } }}
+                                        onChange={(newValue) => {
+                                            setMaxDate(DateUtils.dateStr(newValue));
+                                        }}
+                                        id="dateTo"
+                                        type="date"
+                                        //label={"Submit Date(To)"}
+                                        defaultValue={searchCriteria.dateTo}
+                                    />
+                                </Grid>
+                            </Grid>
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                            <TextField
-                                fullWidth
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
-                                {...register("dateTo")}
-                                InputProps={{ inputProps: { min: minDate } }}
-                                onChange={(newValue) => {
-                                    setMaxDate(DateUtils.dateStr(newValue));
-                                }}
-                                id="dateTo"
-                                type="date"
-                                label={"Issue Date(To)"}
-                                defaultValue={searchCriteria.dateTo}
-                            />
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                            <Grid container>
+                                <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
+                                    <TextField
+                                        fullWidth
+                                        {...register("dueDateFrom")}
+                                        id="dueDateFrom"
+                                        type="date"
+                                        label={"Due Date(From)"}
+                                        defaultValue={searchCriteria.dueDateFrom}
+                                        InputProps={{ inputProps: { max: maxDueDate } }}
+                                        onChange={(newValue) => {
+                                            setMinDueDate(DateUtils.dateStr(newValue));
+                                        }}
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                </Grid>
+
+                                <Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{mt:0.8, display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}>
+                                    To
+                                </Grid>
+
+                                <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
+                                    <TextField
+                                        fullWidth
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                        {...register("dueDateTo")}
+                                        InputProps={{ inputProps: { min: minDueDate } }}
+                                        onChange={(newValue) => {
+                                            setMaxDueDate(DateUtils.dateStr(newValue));
+                                        }}
+                                        id="dueDateTo"
+                                        type="date"
+                                        //label={"Submit Date(To)"}
+                                        defaultValue={searchCriteria.dueDateTo}
+                                    />
+                                </Grid>
+                            </Grid>
                         </Grid>
 
 
diff --git a/src/pages/DemandNote/Search/index.js b/src/pages/DemandNote/Search/index.js
index a0355bd..dcd9ec9 100644
--- a/src/pages/DemandNote/Search/index.js
+++ b/src/pages/DemandNote/Search/index.js
@@ -38,6 +38,8 @@ const UserSearchPage_Individual = () => {
     const [searchCriteria, setSearchCriteria] = React.useState({
         dateTo: DateUtils.dateStr(new Date()),
         dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
+        dueDateTo: DateUtils.dateStr(new Date()),
+        dueDateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
     });
     const [onReady, setOnReady] = React.useState(false);