diff --git a/src/pages/DemandNote/Search/DataGrid.js b/src/pages/DemandNote/Search/DataGrid.js
index 83ed936..cda2c44 100644
--- a/src/pages/DemandNote/Search/DataGrid.js
+++ b/src/pages/DemandNote/Search/DataGrid.js
@@ -19,7 +19,8 @@ import {
     DEMAND_NOTE_SEND,
     DEMAND_NOTE_ATTACH,
     DEMAND_NOTE_MARK_PAID,
-    DEMAND_NOTE_LIST_ALL
+    DEMAND_NOTE_LIST_ALL,
+    DEMAND_NOTE_REVOKE_PAID
 } from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
@@ -30,6 +31,7 @@ import { isGrantedAny } from "auth/utils";
 export default function SearchDemandNote({ searchCriteria, applySearch }) {
 
     const [isConfirmPopUp, setConfirmPopUp] = useState(false);
+    const [isRevokePopUp, setRevokePopUp] = useState(false);
     const [isSendPopUp, setSendPopUp] = useState(false);
     const [isErrorPopUp, setIsErrorPopUp] = useState(false);
     const [selectonWarning, setSelectonWarning] = useState(false);
@@ -109,7 +111,8 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
                 dnIdList: idList
             },
             onSuccess: () => {
-                if (reloadFun) reloadFun();
+                searchCriteria.reload = new Date();
+                set_searchCriteria(searchCriteria);
             }
         });
 
@@ -134,12 +137,38 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
             files: [file],
             onSuccess() {
                 setWait(false);
-                if (reloadFun) reloadFun();
+                searchCriteria.reload = new Date();
+                set_searchCriteria(searchCriteria);
             },
         });
         document.getElementById("uploadFileBtn").value = "";
     }
 
+    const revokePaid = () => {
+        setRevokePopUp(false);
+        let idList = [];
+        const datas = rows?.filter((row) =>
+            selectedRowItems.includes(row.id)
+        );
+        if (datas?.length < 1) {
+            setSelectonWarning(true);
+            return;
+        }
+        for (var i = 0; i < datas?.length; i++) {
+            idList.push(datas[i].id);
+        }
+        HttpUtils.post({
+            url: DEMAND_NOTE_REVOKE_PAID,
+            params: {
+                dnIdList: idList
+            },
+            onSuccess: () => {
+                searchCriteria.reload = new Date();
+                set_searchCriteria(searchCriteria);
+            }
+        });
+    }
+
     const markPaid = () => {
         setConfirmPopUp(false);
         let idList = [];
@@ -159,7 +188,8 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
                 dnIdList: idList
             },
             onSuccess: () => {
-                if (reloadFun) reloadFun();
+                searchCriteria.reload = new Date();
+                set_searchCriteria(searchCriteria);
             }
         });
     }
@@ -334,6 +364,16 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
                                 Mark as Paid
                             </Button>
                         </Grid>
+
+                        <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                            <Button
+                                variant="contained"
+                                onClick={() => setRevokePopUp(true)}
+                            >
+                                Revoke as To be Paid
+                            </Button>
+                        </Grid>
+
                     </ThemeProvider>
                 </Grid>
                 : <></>
@@ -422,6 +462,28 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
                     </DialogActions>
                 </Dialog>
             </div>
+            <div>
+                <Dialog
+                    open={isRevokePopUp}
+                    onClose={() => setRevokePopUp(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">Confirm</Typography></DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h4" style={{ padding: '16px' }}>Are you sure to revoke DN as To Be Paid?</Typography>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => setRevokePopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                        <Button onClick={() => revokePaid()}><Typography variant="h5">Confirm</Typography></Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
             <div>
                 <Dialog
                     open={isSendPopUp}
diff --git a/src/pages/Proof/Payment/Pay_Office.js b/src/pages/Proof/Payment/Pay_Office.js
index 7ef8e5b..b8c8bb3 100644
--- a/src/pages/Proof/Payment/Pay_Office.js
+++ b/src/pages/Proof/Payment/Pay_Office.js
@@ -68,11 +68,27 @@ const Index = ({ record }) => {
                                             },
                                         )
                                     }} />
-                                    <br />
+                                     <br />
                                     <div dangerouslySetInnerHTML={{
                                         __html: intl.formatMessage(
                                             {
                                                 id: 'proofPaymentBody_office3'
+                                            }
+                                        )
+                                    }} />
+                                     <br />
+                                    <div dangerouslySetInnerHTML={{
+                                        __html: intl.formatMessage(
+                                            {
+                                                id: 'proofPaymentBody_office4'
+                                            }
+                                        )
+                                    }} />
+                                    <br />
+                                    <div dangerouslySetInnerHTML={{
+                                        __html: intl.formatMessage(
+                                            {
+                                                id: 'proofPaymentBody_office5'
                                             },
                                             {
                                                 paymentDeadline: DateUtils.dateStr(record?.closingDate),
@@ -83,7 +99,7 @@ const Index = ({ record }) => {
                                     <div dangerouslySetInnerHTML={{
                                         __html: intl.formatMessage(
                                             {
-                                                id: 'proofPaymentBody_office4'
+                                                id: 'proofPaymentBody_office6'
                                             }
                                         )
                                     }} />
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index 20fa5a5..6772862 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -185,6 +185,7 @@ export const DEMAND_NOTE_LIST_ALL = apiPath+'/demandNote/listAll';//GET gld
 export const DEMAND_NOTE_LOAD = apiPath+'/demandNote/load';//GET
 export const DEMAND_NOTE_SEND = apiPath+'/demandNote/send-dn';//POST
 export const DEMAND_NOTE_MARK_PAID = apiPath+'/demandNote/mark-as-paid';//POST
+export const DEMAND_NOTE_REVOKE_PAID = apiPath+'/demandNote/revoke-paid';//POST
 export const DEMAND_NOTE_ATTACH = apiPath+'/demandNote/attach';//POST
 export const DEMAND_NOTE_EXPORT = apiPath+'/demandNote/export';//POST