diff --git a/src/components/FiDataGrid.js b/src/components/FiDataGrid.js
index 04c766e..1675d3e 100644
--- a/src/components/FiDataGrid.js
+++ b/src/components/FiDataGrid.js
@@ -40,7 +40,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
     const [rowCount, setRowCount] = React.useState(0);
     const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true);
    
-    React.useEffect(() => { set_doLoad(doLoad); }, [doLoad]);
+    React.useMemo(() => { set_doLoad(doLoad); }, [doLoad]);
 
     React.useEffect(()=>{
         getDataList();
diff --git a/src/pages/Announcement/Search/DataGrid.js b/src/pages/Announcement/Search/DataGrid.js
index bf85fa1..2e37493 100644
--- a/src/pages/Announcement/Search/DataGrid.js
+++ b/src/pages/Announcement/Search/DataGrid.js
@@ -11,9 +11,10 @@ import {GET_ANNOUNCE_LIST} from "utils/ApiPathConst";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ searchCriteria }) {
-    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
+
     const navigate = useNavigate()
 
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
     React.useEffect(() => {
         set_searchCriteria(searchCriteria);
     }, [searchCriteria]);
diff --git a/src/pages/Announcement/Search_Public/DataGrid.js b/src/pages/Announcement/Search_Public/DataGrid.js
index b5990e4..8423ac5 100644
--- a/src/pages/Announcement/Search_Public/DataGrid.js
+++ b/src/pages/Announcement/Search_Public/DataGrid.js
@@ -3,16 +3,18 @@ import * as React from 'react';
 import * as DateUtils from "utils/DateUtils";
 import { FiDataGrid } from "components/FiDataGrid";
 import { FormattedMessage, useIntl } from "react-intl";
+import {GET_ANNOUNCE_LIST} from "utils/ApiPathConst";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchPublicNoticeTable({ recordList }) {
-    const [rows, setRows] = React.useState(recordList);
+export default function SearchPublicNoticeTable({ searchCriteria }) {
+
     const intl = useIntl();
     const { locale } = intl;
 
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
     React.useEffect(() => {
-        setRows(recordList);   
-    }, [recordList]);
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
 
     const columns = [
         {
@@ -52,10 +54,13 @@ export default function SearchPublicNoticeTable({ recordList }) {
     return (
         <div style={{ width: '100%' }}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
                 customPageSize={10}
                 getRowHeight={() => 'auto'}
+                doLoad={{
+                    url: GET_ANNOUNCE_LIST,
+                    params: _searchCriteria
+                }}
             />
         </div>
     );
diff --git a/src/pages/Announcement/Search_Public/index.js b/src/pages/Announcement/Search_Public/index.js
index f5d5818..9752649 100644
--- a/src/pages/Announcement/Search_Public/index.js
+++ b/src/pages/Announcement/Search_Public/index.js
@@ -5,9 +5,7 @@ import {
     Stack
 } from '@mui/material';
 import MainCard from "components/MainCard";
-import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
-import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
 
 import Loadable from 'components/Loadable';
@@ -30,34 +28,17 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Individual = () => {
-    const [record, setRecord] = React.useState([]);
+
     const [searchCriteria, setSearchCriteria] = React.useState({
         dateTo: DateUtils.dateValue(new Date()),
         dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 90)),
     });
     const [onReady, setOnReady] = React.useState(false);
 
-    React.useEffect(() => {
-        getDataList();
-    }, []);
-
     React.useEffect(() => {
         setOnReady(true);
-    }, [record]);
-
-    React.useEffect(() => {
-        getDataList();
     }, [searchCriteria]);
 
-    function getDataList() {
-        HttpUtils.get({
-            url: UrlUtils.GET_ANNOUNCE_LIST,
-            params: searchCriteria,
-            onSuccess: function (responseData) {
-                setRecord(responseData);
-            }
-        });
-    }
 
     function applySearch(input) {
         setSearchCriteria(input);
@@ -94,7 +75,7 @@ const UserSearchPage_Individual = () => {
                         sx={{ backgroundColor: '#fff' }}
                     >
                         <EventTable
-                            recordList={record}
+                            searchCriteria={searchCriteria}
                         />
                     </MainCard>
                 </Grid>
diff --git a/src/pages/DemandNote/Create/DataGrid.js b/src/pages/DemandNote/Create/DataGrid.js
index f974bef..aaefaf2 100644
--- a/src/pages/DemandNote/Create/DataGrid.js
+++ b/src/pages/DemandNote/Create/DataGrid.js
@@ -9,8 +9,6 @@ import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ searchCriteria, setPaymentCount, setPublishCount  }) {
-    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
-
     const _sx = {
         padding: "4 2 4 2",
         boxShadow: 1,
@@ -26,7 +24,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, setPaymentCoun
             borderColor: "#EEE"
         }
     }
-
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
     React.useEffect(() => {
         set_searchCriteria(searchCriteria);
     }, [searchCriteria]);
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
index e160873..2bb35a5 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
@@ -14,13 +14,9 @@ import * as React from "react";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../../extra-pages/LoadingComponent')));
-// const ProofTab = Loadable(lazy(() => import('./ProofTab')));
-// const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));
-// const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab')));
-
-import ProofTab from './ProofTab';
-import PaymentTab  from './PaymentTab';
-import StatusHistoryTab from './StatusHistoryTab';
+const ProofTab = Loadable(lazy(() => import('./ProofTab')));
+const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));
+const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab')));
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
diff --git a/src/pages/PublicNotice/ListPanel/BaseGrid.js b/src/pages/PublicNotice/ListPanel/BaseGrid.js
index dc2ae5a..6218fe3 100644
--- a/src/pages/PublicNotice/ListPanel/BaseGrid.js
+++ b/src/pages/PublicNotice/ListPanel/BaseGrid.js
@@ -16,7 +16,7 @@ import {getStatusIntl} from "utils/statusUtils/PublicNoteStatusUtils";
 import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function BaseGrid({rows}) {
+export default function BaseGrid({setCount, url}) {
     const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
@@ -99,11 +99,17 @@ export default function BaseGrid({rows}) {
     return (
         <div style={{minHeight: 400, height:"100%", width: '100%', padding: 4}}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
                 customPageSize={10}
                 onRowDoubleClick={handleRowDoubleClick}
                 getRowHeight={() => 'auto'}
+                doLoad={React.useMemo(() => ({
+                    url: url,
+                    params:{},
+                    callback:(responseData)=>{
+                        setCount(responseData.count??0);
+                    }
+                }))}
             />
         </div>
     );
diff --git a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
index 8c45f49..e2f3c92 100644
--- a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
+++ b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
@@ -11,7 +11,11 @@ import {
 } from '@mui/material';
 import { FiDataGrid } from "components/FiDataGrid";
 import * as HttpUtils from "utils/HttpUtils"
-import * as UrlUtils from "utils/ApiPathConst"
+import {
+    PAYMENT_CHECK,
+    POST_CHECK_APP_EXPRITY_DATE,
+    GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment_careOfCombo
+} from "utils/ApiPathConst"
 import * as DateUtils from "utils/DateUtils"
 import * as FormatUtils from "utils/FormatUtils"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
@@ -24,20 +28,20 @@ import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
 import { FormattedMessage, useIntl } from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SubmittedTab({ rows }) {
+export default function SubmittedTab({ setCount, url }) {
     const [rowList, setRowList] = React.useState([]);
     const [selectedRowItems, setSelectedRowItems] = React.useState([]);
     const [isPopUp, setIsPopUp] = React.useState(false);
     const [checkCareOf, setCheckCareOf] = React.useState(false);
-    const [getCareOfList, setCareOfList] = React.useState([]);
-    const [careOfComboList, setCareOfComboList] = React.useState([{}]);
+    const [careOfComboList, setCareOfComboList] = React.useState([]);
     const [selectedCareOf, setSelectedCareOf] = React.useState(null);
     const [expiryDateErrText, setExpiryDateErrText] = React.useState("");
     const [expiryDateErr, setExpiryDateErr] = React.useState(false);
-    
+
     const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
     const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);
-    
+    const [_searchCriteria, set_searchCriteria] = React.useState({});
+
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
     const intl = useIntl();
@@ -46,41 +50,27 @@ export default function SubmittedTab({ rows }) {
     const navigate = useNavigate()
 
     React.useEffect(() => {
-        // const careOfList = rows.map(obj => obj.careOf);
-        // console.log(rows)
-        // console.log(careOfList)
-        setRowList(rows)
-        const formattedData = Array.from(new Set(rows.filter(obj => obj.careOf !== null).map(obj => obj.careOf))).map((careOf, index) => ({
-            key: index,
-            id: rows.find(obj => obj.careOf === careOf).id,
-            label: careOf
-        }));
-        //   console.log(formattedData)
-        setCareOfList(formattedData)
+        getCareOfList();
     }, []);
 
-    React.useEffect(() => {
-        // console.log(getCareOfList)
-        setCareOfComboList(getCareOfList)
-    }, [getCareOfList]);
-
     React.useEffect(() => {
         if (selectedCareOf != null) {
-            const afteSelectedList = [];
-            console.log(rows)
-            console.log(selectedCareOf)
-            rows.forEach((element) => {
-                if (element.careOf === selectedCareOf.label) {
-                    afteSelectedList.push(element)
-                }
-            });
-            // afteSelectedList.push(rows.find(obj => obj.careOf ===(selectedCareOf.label)));
-            console.log(afteSelectedList)
-            setRowList(afteSelectedList)
+            set_searchCriteria({ "careOf": selectedCareOf.label });
         } else {
-            setRowList(rows)
+            set_searchCriteria({});
         }
     }, [selectedCareOf]);
+    
+
+    const getCareOfList = () => {
+        HttpUtils.get({
+            url: GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment_careOfCombo,
+            params: {},
+            onSuccess: function (responData) {
+                setCareOfComboList(responData);
+            }
+        });
+    }
 
     const handleDetailClick = (params) => () => {
         navigate('/publicNotice/' + params.id);
@@ -88,20 +78,21 @@ export default function SubmittedTab({ rows }) {
 
     const handlePaymentBtn = () => {
         let appIdList = [];
-        const datas = rows?.filter((row) =>
+        const _datas = rowList;
+        const datas = _datas?.filter((row) =>
             selectedRowItems.includes(row.id)
         );
         // console.log(datas)
         for (var i = 0; i < datas?.length; i++) {
             appIdList.push(datas[i].id);
         }
-        if(appIdList.length<1){
+        if (appIdList.length < 1) {
             setExpiryDateErrText(intl.formatMessage({ id: 'MSG.plzSelectApp' }));
             setExpiryDateErr(true);
             return;
         }
         HttpUtils.post({
-            url: UrlUtils.POST_CHECK_APP_EXPRITY_DATE,
+            url: POST_CHECK_APP_EXPRITY_DATE,
             params: {
                 ids: appIdList
             },
@@ -123,7 +114,7 @@ export default function SubmittedTab({ rows }) {
 
     const handlePaymentCheck = (appIdList) => {
         HttpUtils.post({
-            url: UrlUtils.PAYMENT_CHECK,
+            url: PAYMENT_CHECK,
             params: {
                 appIds: appIdList
             },
@@ -131,24 +122,24 @@ export default function SubmittedTab({ rows }) {
                 const latestData = {};
 
                 responseData.forEach(item => {
-                const { appId, timeDiff } = item;
-                if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
-                    latestData[appId] = item;
-                }
+                    const { appId, timeDiff } = item;
+                    if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
+                        latestData[appId] = item;
+                    }
                 });
                 const latestDataObjects = Object.values(latestData);
-                
+
                 const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
                 const filteredAppIds = filteredData.map(item => item.appId);
-                
+
                 const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
                 const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];
-                
+
                 const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
-                if (readyToPayment){
+                if (readyToPayment) {
                     setIsPopUp(true);
-                        return;
-                }else{
+                    return;
+                } else {
                     const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
                     const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
                     const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
@@ -232,7 +223,8 @@ export default function SubmittedTab({ rows }) {
     const getWindowContent = () => {
         var content = [];
         let totalAmount = 0;
-        const datas = rows?.filter((row) =>
+        const _datas = rowList;
+        const datas = _datas?.filter((row) =>
             selectedRowItems.includes(row.id)
         );
         for (var i = 0; i < datas?.length; i++) {
@@ -264,7 +256,8 @@ export default function SubmittedTab({ rows }) {
         setIsPopUp(false);
         let totalAmount = 0;
         let appIdList = [];
-        const datas = rows?.filter((row) =>
+        const _datas = rowList;
+        const datas = _datas?.filter((row) =>
             selectedRowItems.includes(row.id)
         );
         // console.log(datas)
@@ -287,7 +280,8 @@ export default function SubmittedTab({ rows }) {
     function afterWarningPayment() {
         let totalAmount = 0;
         let appIdList = [];
-        const datas = rows?.filter((row) =>
+        const _datas = rowList;
+        const datas = _datas?.filter((row) =>
             selectedRowItems.includes(row.id)
         );
         // console.log(datas)
@@ -324,14 +318,21 @@ export default function SubmittedTab({ rows }) {
                 <FiDataGrid
                     checkboxSelection
                     disableRowSelectionOnClick
-                    rows={rowList}
                     columns={columns}
-                    customPageSize={20}
+                    customPageSize={2}
                     onRowSelectionModelChange={(newSelection) => {
                         setSelectedRowItems(newSelection);
                     }}
                     onRowDoubleClick={handleRowDoubleClick}
                     getRowHeight={() => 'auto'}
+                    doLoad={React.useMemo(() => ({
+                        url: url,
+                        params: _searchCriteria,
+                        callback: function (responseData) {
+                            setCount(responseData?.count ?? 0);
+                            setRowList(responseData?.records);
+                        }
+                    }))}
                 />
 
                 <ThemeProvider theme={PNSPS_BUTTON_THEME}>
@@ -396,7 +397,7 @@ export default function SubmittedTab({ rows }) {
                     }}
                 >
                     <DialogTitle></DialogTitle>
-                    <Typography variant="h2" style={{ padding: '16px' }}>                                
+                    <Typography variant="h2" style={{ padding: '16px' }}>
                         <FormattedMessage id="warning" />
                     </Typography>
                     <DialogContent style={{ display: 'flex', }}>
diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js
index e01e2cc..f2768c5 100644
--- a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js
+++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js
@@ -3,9 +3,7 @@ import {
     Grid
 } from '@mui/material';
 import MainCard from "components/MainCard";
-import {GET_PUBLIC_NOTICE_LIST} from "utils/ApiPathConst";
 import * as React from "react";
-import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
 
 import Loadable from 'components/Loadable';
@@ -16,30 +14,11 @@ const EventTable = Loadable(React.lazy(() => import('./SearchPublicNoticeTable')
 
 const UserSearchPage_Individual = () => {
 
-    const [record,setRecord] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
         dateTo: DateUtils.dateValue(new Date()),
         dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
 
-    React.useEffect(() => {
-        getUserList();
-    }, []);
-
-    React.useEffect(() => {
-        getUserList();
-    }, [searchCriteria]);
-
-    function getUserList(){
-        HttpUtils.get({
-            url: GET_PUBLIC_NOTICE_LIST,
-            params: searchCriteria,
-            onSuccess: function(responseData){
-                setRecord(responseData);
-            }
-        });
-    }
-
     function applySearch(input) {
         setSearchCriteria(input);
     }
@@ -63,7 +42,7 @@ const UserSearchPage_Individual = () => {
                     <div style={{height: '100%', width: '100%' }}>
                         <EventTable
                             autoHeight
-                            recordList={record}
+                            searchCriteria={searchCriteria}
                         />
                     </div>
                 </MainCard>
diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
index ec86011..8c589b7 100644
--- a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
+++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
@@ -11,24 +11,28 @@ import { FiDataGrid } from "components/FiDataGrid";
 import {
     isORGLoggedIn,
 } from "utils/Utils";
+import {GET_PUBLIC_NOTICE_LIST} from "utils/ApiPathConst";
 import { useTheme } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchPublicNoticeTable({ recordList }) {
-    const [rows, setRows] = React.useState([]);
+export default function SearchPublicNoticeTable({ searchCriteria }) {
+
     const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
     const intl = useIntl();
 
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
+    React.useEffect(() => {
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
+
+
     const handleDetailClick = (params) => () => {
         navigate('/publicNotice/' + params.id);
     };
 
-    React.useEffect(() => {
-        setRows(recordList);
-    }, [recordList]);
 
     const columns = [
         {
@@ -127,11 +131,14 @@ export default function SearchPublicNoticeTable({ recordList }) {
     return (
         <div style={{ minHeight: 400, height: "100%", width: '100%' }}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
                 customPageSize={20}
                 onRowDoubleClick={handleRowDoubleClick}
                 getRowHeight={() => 'auto'}
+                doLoad={{
+                    url: GET_PUBLIC_NOTICE_LIST,
+                    params: _searchCriteria
+                }}
             />
         </div>
     );
diff --git a/src/pages/PublicNotice/ListPanel/index.js b/src/pages/PublicNotice/ListPanel/index.js
index 7976dd5..0c38de9 100644
--- a/src/pages/PublicNotice/ListPanel/index.js
+++ b/src/pages/PublicNotice/ListPanel/index.js
@@ -12,8 +12,13 @@ import { TabPanel, TabContext, TabList } from '@mui/lab';
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import * as React from "react";
-import * as HttpUtils from "../../../utils/HttpUtils";
-import * as UrlUtils from "../../../utils/ApiPathConst";
+import * as HttpUtils from "utils/HttpUtils";
+import {
+    GET_PUBLIC_NOTICE_LIST_ListByStatus,
+    GET_PUBLIC_NOTICE_LIST_ListByStatus_submitted,
+    GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment,
+    GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPublish
+} from "utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -23,17 +28,17 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab')));
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
-import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
-import {ThemeProvider} from "@emotion/react";
-import {FormattedMessage, useIntl} from "react-intl";
+import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
+import { ThemeProvider } from "@emotion/react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const PublicNotice = () => {
-    const [submittedList, setSubmittedList] = useState([]);
-    const [pendingPaymentList, setPendingPaymentList] = useState([]);
-    const [pendingPublishList, setPendingPublishList] = useState([]);
+    const [submittedCount, setSubmittedCount] = useState(0);
+    const [pendingPaymentCount, setPendingPaymentCount] = useState(0);
+    const [pendingPublishCount, setPendingPublishCount] = useState(0);
     const [isLoading, setLoding] = useState(true);
     const [selectedTab, setSelectedTab] = useState("1");
     const navigate = useNavigate();
@@ -72,25 +77,21 @@ const PublicNotice = () => {
         loadData();
     }, []);
 
-    const reloadPage = () => {
-        window.location.reload(false);
-    }
-
     const loadData = () => {
         setLoding(true);
         HttpUtils.get({
-            url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST_ListByStatus}`,
+            url: GET_PUBLIC_NOTICE_LIST_ListByStatus,
             onSuccess: function (response) {
-                setSubmittedList(response["submitted"]);
-                setPendingPaymentList(response["pendingPayment"]);
-                setPendingPublishList(response["pendingPublish"]);
+                setSubmittedCount(response.submitted ?? 0);
+                setPendingPaymentCount(response.pendingPayment ?? 0);
+                setPendingPublishCount(response.pendingPublish ?? 0);
             }
         });
     };
 
     useEffect(() => {
         setLoding(false);
-    }, [submittedList]);
+    }, [submittedCount]);
 
     const handleChange = (event, newValue) => {
         setSelectedTab(newValue);
@@ -108,24 +109,24 @@ const PublicNotice = () => {
                 </Grid>
             </Grid>
             :
-            <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">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
-                                <FormattedMessage id="myPublicNotice"/>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                                <FormattedMessage id="myPublicNotice" />
                             </Typography>
                         </Stack>
                     </div>
                 </Grid>
-                <Grid item xs={12} sm={12} md={12} lg={12} mt={1} sx={{ mt: 3,mr:{xs:3, sm:3, md:0 }}} >
+                <Grid item xs={12} sm={12} md={12} lg={12} mt={1} sx={{ mt: 3, mr: { xs: 3, sm: 3, md: 0 } }} >
                     <Stack direction="row" justifyContent="flex-end" alignItems="center">
                         <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
-                        <Box sx={{ mr: { md: "47px" } }}>
-                            <Button aria-label={intl.formatMessage({id: 'applyPublicNotice'})} variant="contained" onClick={() => { onBtnClick() }}>
-                                <FormattedMessage id="applyPublicNotice"/>
-                            </Button>
-                        </Box>
+                            <Box sx={{ mr: { md: "47px" } }}>
+                                <Button aria-label={intl.formatMessage({ id: 'applyPublicNotice' })} variant="contained" onClick={() => { onBtnClick() }}>
+                                    <FormattedMessage id="applyPublicNotice" />
+                                </Button>
+                            </Box>
                         </ThemeProvider>
                     </Stack>
                 </Grid>
@@ -133,76 +134,70 @@ const PublicNotice = () => {
 
                 {
                     JSON.parse(localStorage.getItem('userData')).creditor ? (
-                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height:'100%', maxWidth: '100%',width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr:{xs:1,md:3}, ml:{xs:1,md:3}, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height: '100%', maxWidth: '100%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: { xs: 1, md: 3 }, ml: { xs: 1, md: 3 }, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
-                                <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY:'auto' }}>
+                                <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY: 'auto' }}>
                                     <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
-                                        <Tab aria-label={intl.formatMessage({id: 'processing'})} label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" />
-                                        <Tab aria-label={intl.formatMessage({id: 'pendingPublish'})} label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" />
-                                        <Tab aria-label={intl.formatMessage({id: 'pendingPayment'})} label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList?.length + ")"} value="4" />
-                                        <Tab aria-label={intl.formatMessage({id: 'searchApplyRecord'})} label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
+                                        <Tab aria-label={intl.formatMessage({ id: 'processing' })} label={intl.formatMessage({ id: 'processing' }) + " (" + submittedCount + ")"} value="1" />
+                                        <Tab aria-label={intl.formatMessage({ id: 'pendingPublish' })} label={intl.formatMessage({ id: 'pendingPublish' }) + " (" + pendingPublishCount + ")"} value="3" />
+                                        <Tab aria-label={intl.formatMessage({ id: 'pendingPayment' })} label={intl.formatMessage({ id: 'pendingPayment' }) + " (" + pendingPaymentCount + ")"} value="4" />
+                                        <Tab aria-label={intl.formatMessage({ id: 'searchApplyRecord' })} label={intl.formatMessage({ id: 'searchApplyRecord' })} value="5" />
                                     </TabList>
                                 </Box>
                                 <TabPanel value="1">
                                     <BaseGrid
-                                        rows={submittedList}
-                                        reloadFunction={reloadPage}
+                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_submitted}
+                                        setCount={setSubmittedCount}
                                     />
                                 </TabPanel>
                                 <TabPanel value="3">
                                     <BaseGrid
-                                        rows={pendingPublishList}
-                                        reloadFunction={reloadPage}
+                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPublish}
+                                        setCount={setPendingPublishCount}
                                     />
                                 </TabPanel>
                                 <TabPanel value="4">
                                     <BaseGrid
-                                        rows={pendingPaymentList}
-                                        reloadFunction={reloadPage}
+                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment}
+                                        setCount={setPendingPaymentCount}
                                     />
                                 </TabPanel>
                                 <TabPanel value="5">
-                                    <SearchTab
-                                        rows={pendingPublishList}
-                                        reloadFunction={reloadPage}
-                                    />
+                                    <SearchTab />
                                 </TabPanel>
                             </TabContext>
                         </Grid>
                     ) : (
-                        <Grid item xs={12} sx={{ minHeight: '80vh',height:"100%", maxHeight:'300vh', maxWidth: '95%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr:{xs:1,md:3}, ml:{xs:1,md:3}, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sx={{ minHeight: '80vh', height: "100%", maxHeight: '300vh', maxWidth: '95%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: { xs: 1, md: 3 }, ml: { xs: 1, md: 3 }, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                                     <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example">
-                                        <Tab aria-label={intl.formatMessage({id: 'processing'})} label={intl.formatMessage({id: 'processing'}) + " (" + submittedList.length + ")"} value="1" />
-                                        <Tab aria-label={intl.formatMessage({id: 'pendingPayment'})} label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList.length + ")"} value="3" />
-                                        <Tab aria-label={intl.formatMessage({id: 'pendingPublish'})} label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList.length + ")"} value="4" />
-                                        <Tab aria-label={intl.formatMessage({id: 'searchApplyRecord'})} label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
+                                        <Tab aria-label={intl.formatMessage({ id: 'processing' })} label={intl.formatMessage({ id: 'processing' }) + " (" + submittedCount + ")"} value="1" />
+                                        <Tab aria-label={intl.formatMessage({ id: 'pendingPayment' })} label={intl.formatMessage({ id: 'pendingPayment' }) + " (" + pendingPaymentCount + ")"} value="3" />
+                                        <Tab aria-label={intl.formatMessage({ id: 'pendingPublish' })} label={intl.formatMessage({ id: 'pendingPublish' }) + " (" + pendingPublishCount + ")"} value="4" />
+                                        <Tab aria-label={intl.formatMessage({ id: 'searchApplyRecord' })} label={intl.formatMessage({ id: 'searchApplyRecord' })} value="5" />
                                     </TabList>
                                 </Box>
                                 <TabPanel value="1">
                                     <BaseGrid
-                                        rows={submittedList}
-                                        reloadFunction={reloadPage}
+                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_submitted}
+                                        setCount={setSubmittedCount}
                                     />
                                 </TabPanel>
                                 <TabPanel value="3">
                                     <PendingPaymentTab
-                                        rows={pendingPaymentList}
-                                        reloadFunction={reloadPage}
+                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment}
+                                        setCount={setPendingPaymentCount}
                                     />
                                 </TabPanel>
                                 <TabPanel value="4">
                                     <BaseGrid
-                                        rows={pendingPublishList}
-                                        reloadFunction={reloadPage}
+                                        url={GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPublish}
+                                        setCount={setPendingPublishCount}
                                     />
                                 </TabPanel>
                                 <TabPanel value="5">
-                                    <SearchTab
-                                        rows={pendingPublishList}
-                                        reloadFunction={reloadPage}
-                                    />
+                                    <SearchTab />
                                 </TabPanel>
                             </TabContext>
                         </Grid>
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index 1820a05..5aeb291 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -101,6 +101,10 @@ export const GET_SET_UN_PRIMARY_USER = apiPath+'/user/un-primary';
 
 export const GET_PUBLIC_NOTICE_LIST = apiPath+'/application/list';
 export const GET_PUBLIC_NOTICE_LIST_ListByStatus = apiPath+'/application/status-list';
+export const GET_PUBLIC_NOTICE_LIST_ListByStatus_submitted = apiPath+'/application/status-list/submitted';
+export const GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment = apiPath+'/application/status-list/pendingPayment';
+export const GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment_careOfCombo = apiPath+'/application/status-list/pendingPayment/careOfCombo';
+export const GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPublish = apiPath+'/application/status-list/pendingPublish';
 export const GET_PUBLIC_NOTICE_getApplyUser = apiPath+'/application/get-apply-user';
 export const POST_PUBLIC_NOTICE_APPLY = apiPath+'/application/apply';
 export const POST_CHECK_APP_EXPRITY_DATE = apiPath+'/application/checkExprityDate';