diff --git a/src/components/FiDataGrid.js b/src/components/FiDataGrid.js
index 49b944c..c60dc0c 100644
--- a/src/components/FiDataGrid.js
+++ b/src/components/FiDataGrid.js
@@ -100,7 +100,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
 
     
     function getDataList() {
-        if(_doLoad.url == null) return;
+        if(_doLoad?.url == null) return;
         if(_doLoad.params == null) _doLoad.params = {};
         _doLoad.params.start = page*pageSize;
         _doLoad.params.limit = pageSize;
@@ -111,7 +111,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
                 set_rows(responseData?.records);
                 setRowCount(responseData?.count);
                 if(_doLoad.callback != null){
-                    _doLoad.callback(responseData?.records);
+                    _doLoad.callback(responseData);
                 }
             }
         });
diff --git a/src/pages/DemandNote/Create/DataGrid.js b/src/pages/DemandNote/Create/DataGrid.js
index 6a1d18d..f974bef 100644
--- a/src/pages/DemandNote/Create/DataGrid.js
+++ b/src/pages/DemandNote/Create/DataGrid.js
@@ -1,5 +1,6 @@
 // material-ui
 import * as React from 'react';
+import * as UrlUtils from "utils/ApiPathConst";
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
 import * as PublicNoteStatusUtils from "utils/statusUtils/PublicNoteStatusUtils"
@@ -7,8 +8,8 @@ import { FiDataGrid } from "components/FiDataGrid";
 import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchPublicNoticeTable({ recordList }) {
-    const [rows, setRows] = React.useState(recordList);
+export default function SearchPublicNoticeTable({ searchCriteria, setPaymentCount, setPublishCount  }) {
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
 
     const _sx = {
         padding: "4 2 4 2",
@@ -27,8 +28,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }
 
     React.useEffect(() => {
-        setRows(recordList);
-    }, [recordList]);
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
 
     const handleEditClick = (params) => () => {
         window.open('/application/' + params.row.id);
@@ -54,15 +55,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 return PublicNoteStatusUtils.getStatusByTextEng(params.row.status, params.row.creditor);
             }
         },
-        // {
-        //     field: 'date',
-        //     headerName: 'Submit Date',
-        //     flex: 1,
-        //     minWidth: 200,
-        //     renderCell: (params) => {
-        //         return DateUtils.datetimeStr(params.row.created);
-        //     }
-        // },
         {
             id: 'contactPerson',
             field: 'contactPerson',
@@ -70,10 +62,10 @@ export default function SearchPublicNoticeTable({ recordList }) {
             flex: 3,
             minWidth: 300,
             renderCell: (params) => {
-                let company = params.row.enCompanyName != null?params.row.enCompanyName: params.row.chCompanyName;
+                let company = params.row.enCompanyName != null ? params.row.enCompanyName : params.row.chCompanyName;
                 company = company != null ? company : "";
                 return <div>
-                    {params?.value}<br/>{company}<br/>Client Remark: {params.row.careOf}
+                    {params?.value}<br />{company}<br />Client Remark: {params.row.careOf}
                 </div>;
             }
         },
@@ -88,7 +80,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                     + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3)
                     + ", No. " + FormatUtils.zeroPad(params.row.issueNo, 2)
                     + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)")}
-                    <br/>{(params?.value)}</>;
+                    <br />{(params?.value)}</>;
             }
         },
         {
@@ -108,11 +100,18 @@ export default function SearchPublicNoticeTable({ recordList }) {
 
             <FiDataGrid
                 sx={_sx}
-                rowHeight={80}
-                rows={rows}
+                getRowHeight={() => 'auto'}
                 columns={columns}
                 customPageSize={10}
                 onRowDoubleClick={handleEditClick}
+                doLoad={{
+                    url: UrlUtils.DEMAND_NOTE_PREVIEW + "/" + _searchCriteria.issueId,
+                    params: {},
+                    callback: (responseData) => {
+                        setPaymentCount(responseData.paymentCount);
+                        setPublishCount(responseData.publishCount);
+                    }
+                }}
             />
         </div>
     );
diff --git a/src/pages/DemandNote/Create/index.js b/src/pages/DemandNote/Create/index.js
index 7cc4c4b..c33d88d 100644
--- a/src/pages/DemandNote/Create/index.js
+++ b/src/pages/DemandNote/Create/index.js
@@ -20,7 +20,7 @@ const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
     height: '100%',
-    backgroundSize:'contain',
+    backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundColor: '#0C489E',
     backgroundPosition: 'right'
@@ -30,7 +30,6 @@ const BackgroundHead = {
 
 const Index = () => {
 
-    const [record,setRecord] = React.useState([]);
     const [issueCombo, setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
@@ -38,29 +37,14 @@ const Index = () => {
     const [paymentCount, setPaymentCount] = React.useState(0);
     const [publishCount, setPublishCount] = React.useState(0);
 
-    React.useEffect(()=>{
+    React.useEffect(() => {
         getIssueCombo();
-    },[]);
+    }, []);
 
     React.useEffect(() => {
         setOnReady(true);
-    }, [record]);
-
-    React.useEffect(() => {
-        loadGrid();
     }, [searchCriteria]);
 
-    function loadGrid(){
-        HttpUtils.get({
-            url: UrlUtils.DEMAND_NOTE_PREVIEW+"/"+searchCriteria.issueId,
-            onSuccess: function(responseData){
-                setRecord(responseData.records);
-                setPaymentCount(responseData.paymentCount);
-                setPublishCount(responseData.publishCount);
-            }
-        });
-    }
-
     function getIssueCombo() {
         HttpUtils.get({
             url: UrlUtils.GET_ISSUE_COMBO,
@@ -78,9 +62,9 @@ const Index = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container sx={{minHeight: '87vh', backgroundColor: 'backgroundColor.default'}} direction="column">
+            <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -91,22 +75,24 @@ const Index = () => {
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
-                    <SearchForm 
-                    applySearch={applySearch}
-                    issueComboData={issueCombo}
-                    _paymentCount={paymentCount}
-                    _publishCount={publishCount}
+                <Grid item xs={12} md={12} lg={12} sx={{ mb: -1 }}>
+                    <SearchForm
+                        applySearch={applySearch}
+                        issueComboData={issueCombo}
+                        _paymentCount={paymentCount}
+                        _publishCount={publishCount}
                     />
                 </Grid>
                 {/*row 2*/}
                 <Grid item xs={12} md={12} lg={12}>
                     <MainCard elevation={0}
-                            border={false}
-                            content={false}
+                        border={false}
+                        content={false}
                     >
                         <EventTable
-                            recordList={record}
+                            searchCriteria={searchCriteria}
+                            setPaymentCount={setPaymentCount}
+                            setPublishCount={setPublishCount}
                         />
                     </MainCard>
                 </Grid>
diff --git a/src/pages/DemandNote/Search/DataGrid.js b/src/pages/DemandNote/Search/DataGrid.js
index 898632b..0cc7d3b 100644
--- a/src/pages/DemandNote/Search/DataGrid.js
+++ b/src/pages/DemandNote/Search/DataGrid.js
@@ -21,7 +21,7 @@ import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchDemandNote({ recordList, reloadFun, applySearch }) {
+export default function SearchDemandNote({ searchCriteria, applySearch }) {
 
     const [isConfirmPopUp, setConfirmPopUp] = React.useState(false);
     const [isSendPopUp, setSendPopUp] = React.useState(false);
@@ -29,13 +29,14 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
     const [selectonWarning, setSelectonWarning] = React.useState(false);
     const [wait, setWait] = React.useState(false);
 
-    const [rows, setRows] = React.useState(recordList);
+    const [rows, setRows] = React.useState([]);
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
     const [selectedRowItems, setSelectedRowItems] = React.useState([]);
     const navigate = useNavigate()
 
     React.useEffect(() => {
-        setRows(recordList);
-    }, [recordList]);
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
 
     const handleDnClick = (params) => () => {
         navigate('/paymentPage/demandNote/details/' + params.id);
@@ -334,11 +335,17 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                     onRowSelectionModelChange={(newSelection) => {
                         setSelectedRowItems(newSelection);
                     }}
-                    rows={rows}
                     columns={columns}
                     customPageSize={100}
                     getRowHeight={() => 'auto'}
                     onRowDoubleClick={handleRowDoubleClick}
+                    doLoad={{
+                        url: UrlUtils.DEMAND_NOTE_LIST,
+                        params: _searchCriteria,
+                        callback: (responseData)=>{
+                            setRows(responseData?.records);
+                        }
+                    }}
                 />
             </Box>
             <div>
diff --git a/src/pages/DemandNote/Search/index.js b/src/pages/DemandNote/Search/index.js
index 51dd08f..bbe1a11 100644
--- a/src/pages/DemandNote/Search/index.js
+++ b/src/pages/DemandNote/Search/index.js
@@ -32,7 +32,6 @@ const BackgroundHead = {
 
 const UserSearchPage_Individual = () => {
 
-    const [record, setRecord] = React.useState([]);
     const [orgCombo, setOrgCombo] = React.useState([]);
     const [issueCombo, setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
@@ -44,28 +43,14 @@ const UserSearchPage_Individual = () => {
     const [onReady, setOnReady] = React.useState(false);
 
     React.useEffect(() => {
-        getUserList();
         getOrgCombo();
         getIssueCombo();
     }, []);
 
     React.useEffect(() => {
         setOnReady(true);
-    }, [record]);
-
-    React.useEffect(() => {
-        getUserList();
     }, [searchCriteria]);
 
-    function getUserList() {
-        HttpUtils.get({
-            url: UrlUtils.DEMAND_NOTE_LIST,
-            params: searchCriteria,
-            onSuccess: function (responseData) {
-                setRecord(responseData);
-            }
-        });
-    }
 
     function getOrgCombo() {
         HttpUtils.get({
@@ -128,9 +113,8 @@ const UserSearchPage_Individual = () => {
                         sx={{ backgroundColor: '#fff' }}
                     >
                         <EventTable
-                            recordList={record}
-                            reloadFun={getUserList}
                             applySearch={applySearch}
+                            searchCriteria={searchCriteria}
                         />
                     </MainCard>
                 </Grid>
diff --git a/src/pages/PublicNotice/Search_GLD/DataGrid.js b/src/pages/PublicNotice/Search_GLD/DataGrid.js
index c8a3e0c..24b7fc0 100644
--- a/src/pages/PublicNotice/Search_GLD/DataGrid.js
+++ b/src/pages/PublicNotice/Search_GLD/DataGrid.js
@@ -182,8 +182,8 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
                 doLoad={{
                     url:UrlUtils.GET_PUBLIC_NOTICE_LIST,
                     params:_searchCriteria,
-                    callback: function(dataList){
-                        setRows(dataList);
+                    callback: function(responseData){
+                        setRows(responseData?.records);
                     }
                 }}
             />