diff --git a/src/components/FiDataGrid.js b/src/components/FiDataGrid.js
index e62f4d9..8bbb9ed 100644
--- a/src/components/FiDataGrid.js
+++ b/src/components/FiDataGrid.js
@@ -1,17 +1,17 @@
 // material-ui
-import {useState, useEffect} from 'react';
+import { useState, useEffect } from 'react';
 import {
     DataGrid, GridOverlay,
 } from "@mui/x-data-grid";
 import * as HttpUtils from "utils/HttpUtils";
-import {FormattedMessage, useIntl} from "react-intl";
-import {TablePagination, Typography} from '@mui/material';
+import { FormattedMessage, useIntl } from "react-intl";
+import { TablePagination, Typography } from '@mui/material';
 
 // ==============================|| EVENT TABLE ||============================== //
 
 export function FiDataGrid({ rows, columns, sx, autoHeight,
-                               hideFooterSelectedRowCount, rowModesModel, editMode,
-                               pageSizeOptions, filterItems, customPageSize, doLoad,  ...props }) {
+    hideFooterSelectedRowCount, rowModesModel, editMode,
+    pageSizeOptions, filterItems, customPageSize, doLoad, ...props }) {
     const intl = useIntl();
     const [_rows, set_rows] = useState([]);
     const [_doLoad, set_doLoad] = useState({});
@@ -27,6 +27,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
     const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = useState(true);
     const [_sx, set_sx] = useState({
         padding: "4 2 4 2",
+        lineHeight: "normal",
         '& .MuiDataGrid-cell': {
             borderTop: 1,
             borderBottom: 1,
@@ -36,18 +37,26 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
             border: 1,
             borderColor: "#EEE"
         },
+        "& .MuiDataGrid-columnHeaderTitle": {
+            whiteSpace: "normal",
+            lineHeight: "normal"
+        },
+        "& .MuiDataGrid-columnHeader": {
+            // Forced to use important since overriding inline styles
+            height: "unset !important"
+        },
     });
 
     const [rowCount, setRowCount] = useState(0);
-   
-    useEffect(() => { 
+
+    useEffect(() => {
         setPage(0);
-        set_doLoad(doLoad); 
+        set_doLoad(doLoad);
     }, [doLoad]);
 
-    useEffect(()=>{
+    useEffect(() => {
         getDataList();
-    },[_doLoad, page]);
+    }, [_doLoad, page]);
 
 
     useEffect(() => {
@@ -70,16 +79,16 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         if (pageSizeOptions) {
             set_pageSizeOptions(pageSizeOptions)
         }
-        if(autoHeight !== undefined){
+        if (autoHeight !== undefined) {
             set_autoHeight(autoHeight)
         }
-        if(editMode){
+        if (editMode) {
             set_editMode(editMode);
         }
-        if(filterItems){
+        if (filterItems) {
             set_filterItems(filterItems);
         }
-        if(customPageSize){
+        if (customPageSize) {
             setPageSize(customPageSize);
         }
     }, [sx, hideFooterSelectedRowCount, rowModesModel, rows, columns, pageSizeOptions, autoHeight, editMode, filterItems, customPageSize]);
@@ -103,11 +112,11 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         );
     }
 
-    
+
     function getDataList() {
-        if(_doLoad?.url == null) return;
-        if(_doLoad.params == null) _doLoad.params = {};
-        _doLoad.params.start = page*pageSize;
+        if (_doLoad?.url == null) return;
+        if (_doLoad.params == null) _doLoad.params = {};
+        _doLoad.params.start = page * pageSize;
         _doLoad.params.limit = pageSize;
         HttpUtils.get({
             url: _doLoad.url,
@@ -115,7 +124,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
             onSuccess: function (responseData) {
                 set_rows(responseData?.records);
                 setRowCount(responseData?.count);
-                if(_doLoad.callback != null){
+                if (_doLoad.callback != null) {
                     _doLoad.callback(responseData);
                 }
             }
@@ -127,10 +136,11 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         <DataGrid
             {...props}
             rows={_rows}
-            rowCount={rowCount?rowCount:0}
+            rowCount={rowCount ? rowCount : 0}
             columns={_columns}
             paginationMode="server"
             disableColumnMenu
+            shrinkWrap={true}
             rowModesModel={_rowModesModel}
             pageSizeOptions={_pageSizeOptions}
             editMode={_editMode}
@@ -142,12 +152,12 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
                 noRowsOverlay: CustomNoRowsOverlay,
                 Pagination: () => (
                     <TablePagination
-                        count={rowCount?rowCount:0}
+                        count={rowCount ? rowCount : 0}
                         page={page}
                         rowsPerPage={pageSize}
                         rowsPerPageOptions={_pageSizeOptions}
                         labelDisplayedRows={() =>
-                            `${(_rows?.length?page*pageSize+1:0)}-${page*pageSize+(_rows?.length??0)} ${intl.formatMessage({ id: "of" })} ${rowCount}`
+                            `${(_rows?.length ? page * pageSize + 1 : 0)}-${page * pageSize + (_rows?.length ?? 0)} ${intl.formatMessage({ id: "of" })} ${rowCount}`
                         }
                         labelRowsPerPage={intl.formatMessage({ id: "rowsPerPage" }) + ":"}
                         onPageChange={handleChangePage}
diff --git a/src/pages/Proof/Payment/Pay_DN.js b/src/pages/Proof/Payment/Pay_DN.js
index 0a70e3b..a4316c4 100644
--- a/src/pages/Proof/Payment/Pay_DN.js
+++ b/src/pages/Proof/Payment/Pay_DN.js
@@ -26,6 +26,7 @@ const BackgroundHead = {
 const Index = ({ record }) => {
     const navigate = useNavigate()
     const intl = useIntl();
+    const { local } = intl;
 
     return (
         (
@@ -67,7 +68,7 @@ const Index = ({ record }) => {
                                                 id: 'proofPaymentBody_demandNote2'
                                             },
                                             {
-                                                closingDateOff: DateUtils.dateStr(record.closingDateOff),
+                                                closingDateOff: local === "en"? DateUtils.dateStr_Eng(record.closingDateOff): DateUtils.dateStr_Cht(record?.closingDateOff),
                                                 email: record?.mail,
                                             }
                                         )
@@ -79,7 +80,7 @@ const Index = ({ record }) => {
                                                 id: 'proofPaymentBody_demandNote3'
                                             },
                                             {
-                                                paymentDeadline: DateUtils.dateStr(record?.closingDate),
+                                                paymentDeadline: local === "en"? DateUtils.dateStr_Eng(record?.closingDate): DateUtils.dateStr_Cht(record?.closingDate),
                                             }
                                         )
                                     }} />
diff --git a/src/pages/Proof/Payment/Pay_Office.js b/src/pages/Proof/Payment/Pay_Office.js
index 0c5bcd0..7f2d91c 100644
--- a/src/pages/Proof/Payment/Pay_Office.js
+++ b/src/pages/Proof/Payment/Pay_Office.js
@@ -26,6 +26,7 @@ const BackgroundHead = {
 const Index = ({ record }) => {
     const navigate = useNavigate()
     const intl = useIntl();
+    const { locale } = intl;
 
     return (
         (
@@ -91,7 +92,7 @@ const Index = ({ record }) => {
                                                 id: 'proofPaymentBody_office5'
                                             },
                                             {
-                                                paymentDeadline: DateUtils.dateStr(record?.closingDate),
+                                                paymentDeadline: locale ==='en'? DateUtils.dateStr_Eng(record?.closingDate):DateUtils.dateStr_Cht(record?.closingDate)
                                             }
                                         )
                                     }} />
diff --git a/src/pages/Proof/Reply_Public/ApplicationDetails.js b/src/pages/Proof/Reply_Public/ApplicationDetails.js
index 49a3d52..6c260dd 100644
--- a/src/pages/Proof/Reply_Public/ApplicationDetails.js
+++ b/src/pages/Proof/Reply_Public/ApplicationDetails.js
@@ -225,11 +225,14 @@ const ApplicationDetailCard = ({ formData, }) => {
                                         />
                                     </Grid>
                                 </Grid>
-
                             </Grid>
 
                             <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, }}>
                                 <Grid container alignItems={"center"}>
+                                    
+                                {
+                                data.creditor == true ?
+                                    <>
                                     <Grid item xs={12} md={12} lg={12}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5" display="inline">
@@ -262,6 +265,10 @@ const ApplicationDetailCard = ({ formData, }) => {
                                             }
                                         </Typography>
                                     </Grid>
+                                    </>
+                                    :
+                                    <></>
+                            }
 
                                     <Grid item xs={12} sm={3} md={3} lg={3}
                                         sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
diff --git a/src/pages/Proof/Reply_Public/ProofForm.js b/src/pages/Proof/Reply_Public/ProofForm.js
index 3be59d3..435f8fe 100644
--- a/src/pages/Proof/Reply_Public/ProofForm.js
+++ b/src/pages/Proof/Reply_Public/ProofForm.js
@@ -49,6 +49,7 @@ const FormPanel = ({ formData }) => {
 
     const navigate = useNavigate()
     const params = useParams();
+    const dft = locale === 'en' ? "DD MMM YYYY" : "YYYY年MM月DD日";
 
     const tabelStyle = {
         border: "2px solid gray",
@@ -236,7 +237,7 @@ const FormPanel = ({ formData }) => {
                                     <FormattedMessage id="proofReplyDate" /> :&nbsp;
                                     {
                                         locale === 'en' ?
-                                            DateUtils.dateValue(formik.values.replyDate)
+                                            DateUtils.datetimeStr(formik.values.replyDate)
                                             :
                                             DateUtils.datetimeStr_Cht(formik.values.replyDate)
                                     }
@@ -323,6 +324,7 @@ const FormPanel = ({ formData }) => {
                                                             <tr style={tabelStyle}>
                                                                 <th style={tabelStyle} width="50" align="left"></th>
                                                                 <th style={tabelStyle} width="300" align="left"><FormattedMessage id="paymentMeans" /></th>
+                                                                <th style={tabelStyle} width="300" align="left"><FormattedMessage id="commentDeadline" /></th>
                                                                 <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
                                                                 <th style={tabelStyle} width="400" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
                                                             </tr>
@@ -361,9 +363,10 @@ const FormPanel = ({ formData }) => {
                                                                     }}><FormattedMessage id="viewDetail" /></a>
                                                                 </td>
                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
+                                                                <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
                                                                 <td style={tabelStyle}>
                                                                     <FormattedMessage id="payDnRemark" values={{
-                                                                        date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
+                                                                        date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))
                                                                     }} />
                                                                 </td>
                                                             </tr>
@@ -393,10 +396,11 @@ const FormPanel = ({ formData }) => {
                                                                         setIsWarningPopUp(true);
                                                                     }}><FormattedMessage id="viewDetail" /></a>
                                                                 </td>
+                                                                <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 11:30 a.m.</td>
                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>
                                                                 <td style={tabelStyle}>
                                                                     <FormattedMessage id="payNPGORemark" values={{
-                                                                        date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
+                                                                        date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))
                                                                     }} />
                                                                 </td>
                                                             </tr>
@@ -410,6 +414,7 @@ const FormPanel = ({ formData }) => {
                                                                 <tr style={tabelStyle}>
                                                                     <th style={tabelStyle} width="50" align="left"></th>
                                                                     <th style={tabelStyle} width="300" align="left"><FormattedMessage id="paymentMeans" /></th>
+                                                                    <th style={tabelStyle} width="300" align="left"><FormattedMessage id="commentDeadline" /></th>
                                                                     <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
                                                                     <th style={tabelStyle} width="400" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
                                                                 </tr>
@@ -440,20 +445,20 @@ const FormPanel = ({ formData }) => {
                                                                     </td>
                                                                     <td style={tabelStyle}>{
                                                                         locale === 'en' ?
-                                                                            `${DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`
+                                                                            `${DateUtils.dateFormat(formData.reviseDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`
                                                                             :
+                                                                            `${DateUtils.dateFormat(formData.reviseDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`
+                                                                    }</td>
+                                                                    <td style={tabelStyle}>{
+                                                                        locale === 'en' ?
                                                                             `${DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`
+                                                                            :
+                                                                            `${DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`
                                                                     }</td>
                                                                     <td style={tabelStyle}>
                                                                         <FormattedMessage id="payOnlineRemark" values={{
-                                                                            date: (
-                                                                                locale === 'en' ?
-                                                                                    `${DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`
-                                                                                    :
-                                                                                    `${DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "上午")?.replace("pm", "下午")}`
-                                                                            )
+                                                                            date: DateUtils.dateFormat(formData.proofPaymentDeadline, dft)
                                                                         }} />
-                                                                        {/* {DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")} */}
                                                                     </td>
                                                                 </tr>
                                                                 <tr>
@@ -493,11 +498,11 @@ const FormPanel = ({ formData }) => {
                                                                             setIsWarningPopUp(true);
                                                                         }}><FormattedMessage id="viewDetail" /></a>
                                                                     </td>
-
-                                                                    <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
+                                                                    <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"5:00 p.m.":"下午5時"}</td>
+                                                                    <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"5:00 p.m.":"下午5時"}</td>
                                                                     <td style={tabelStyle}>
                                                                         <FormattedMessage id="payDnRemark" values={{
-                                                                            date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
+                                                                            date: DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "dateStrFormat" }))
                                                                         }} />
                                                                     </td>
                                                                 </tr>
@@ -532,10 +537,11 @@ const FormPanel = ({ formData }) => {
                                                                             setIsWarningPopUp(true);
                                                                         }}><FormattedMessage id="viewDetail" /></a>
                                                                     </td>
-                                                                    <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>
+                                                                    <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"11:30 a.m.":"上午11時30分"}</td>
+                                                                    <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"12:00 p.m.":"下午12時"}</td>
                                                                     <td style={tabelStyle}>
                                                                         <FormattedMessage id="payNPGORemark" values={{
-                                                                            date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
+                                                                            date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))
                                                                         }} />
                                                                     </td>
                                                                 </tr>
diff --git a/src/pages/Proof/Search_Public/DataGrid.js b/src/pages/Proof/Search_Public/DataGrid.js
index a8571d9..a799756 100644
--- a/src/pages/Proof/Search_Public/DataGrid.js
+++ b/src/pages/Proof/Search_Public/DataGrid.js
@@ -11,9 +11,9 @@ import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 import {
     isORGLoggedIn,
-  } from "utils/Utils";
-import {useTheme} from "@emotion/react";
-import {useIntl} from "react-intl";
+} from "utils/Utils";
+import { useTheme } from "@emotion/react";
+import { useIntl } from "react-intl";
 import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -44,7 +44,15 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
         '& .MuiDataGrid-footerContainer': {
             border: 1,
             borderColor: "#EEE"
-        }
+        },
+        "& .MuiDataGrid-columnHeaderTitle": {
+            whiteSpace: "normal",
+            lineHeight: "normal"
+        },
+        "& .MuiDataGrid-columnHeader": {
+            // Forced to use important since overriding inline styles
+            height: "unset !important"
+        },
     }
 
 
@@ -66,7 +74,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
         }
     }*/
 
-    const getIssueLabel=(data) =>{
+    const getIssueLabel = (data) => {
         let issueYear = data.row.issueYear
         let volume = data.row.issueVolume;
         let issueNo = data.row.issueNo;
@@ -90,22 +98,22 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
             + ", " + DateUtils.dateFormat(issueDate, "D MMM YYYY (ddd)");
     }
 
-    
+
     const columns = [
         {
             field: 'actions',
-            headerName: intl.formatMessage({id: 'proofId'}),
+            headerName: intl.formatMessage({ id: 'proofId' }),
             width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return clickableLink('/proof/reply/' + params.row.id,params.row.refNo);
+                return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
             },
         },
         {
             id: 'appId',
             field: 'appId',
-            headerName: isORGLoggedIn()?intl.formatMessage({id: 'gazetteCount3'}):intl.formatMessage({id: 'gazetteCount2'}),
+            headerName: isORGLoggedIn() ? intl.formatMessage({ id: 'gazetteCount3' }) : intl.formatMessage({ id: 'gazetteCount2' }),
             width: isMdOrLg ? 'auto' : 330,
             flex: isMdOrLg ? 2 : undefined,
             renderCell: (params) => {
@@ -114,13 +122,13 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
                 let isssue = getIssueLabel(params);
 
                 // return <div style={{ margin: 4 }}>{appNo}<br />{isssue}<br />{params.row.appRemarks}</div>
-                return <div style={{ margin: 4 }}>{isssue}<br />{isORGLoggedIn()?<>{params.row.appCareOf}<br /></>:null}{params.row.appRemarks}</div>
+                return <div style={{ margin: 4 }}>{isssue}<br />{isORGLoggedIn() ? <>{params.row.appCareOf}<br /></> : null}{params.row.appRemarks}</div>
             },
         },
         {
             id: 'created',
             field: 'reviseDeadline',
-            headerName: intl.formatMessage({id: 'proofDate'}),
+            headerName: intl.formatMessage({ id: 'proofDate' }),
             width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
             valueGetter: (params) => {
@@ -130,7 +138,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
         {
             id: 'proofPaymentDeadline',
             field: 'proofPaymentDeadline',
-            headerName: intl.formatMessage({id: 'replyBefore'}),
+            headerName: intl.formatMessage({ id: 'replyBefore' }),
             width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
             valueGetter: (params) => {
@@ -142,7 +150,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
         {
             id: 'replyDate',
             field: 'replyDate',
-            headerName: intl.formatMessage({id: 'replyDate'}),
+            headerName: intl.formatMessage({ id: 'replyDate' }),
             width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
             valueGetter: (params) => {
@@ -151,17 +159,17 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
         },
         {
             id: 'actions',
-            headerName: intl.formatMessage({id: 'status'}),
+            headerName: intl.formatMessage({ id: 'status' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
-                return locale === 'en' ? ProofStatus.getStatus_Eng(params) : locale === 'zh-HK' ?ProofStatus.getStatus_Cht(params):ProofStatus.getStatus_Cn(params);
+                return locale === 'en' ? ProofStatus.getStatus_Eng(params) : locale === 'zh-HK' ? ProofStatus.getStatus_Cht(params) : ProofStatus.getStatus_Cn(params);
             },
         },
         {
             id: 'fee',
             field: 'fee',
-            headerName: intl.formatMessage({id: 'fee'}),
+            headerName: intl.formatMessage({ id: 'fee' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -175,7 +183,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
     }
 
     return (
-        <div style={{ width: '100%', overflowX: 'auto'}}>
+        <div style={{ width: '100%', overflowX: 'auto' }}>
 
             <FiDataGrid
                 sx={_sx}
diff --git a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
index ef76b56..ba14f13 100644
--- a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
+++ b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
@@ -193,11 +193,15 @@ export default function SubmittedTab({ setCount, url }) {
             renderCell: (params) => (
                 isORGLoggedIn() ?
                     <div>
+                        <FormattedMessage id="gazetteCount" />: {params.row.issueVolume + "/" + params.row.issueYear
+                            + " No. " + params.row.issueNo}<br />
                         <FormattedMessage id="careOf" />: {params.row.careOf}<br />
                         <FormattedMessage id="myRemarks" />: {params.row.remarks}
                     </div> :
                     <div>
-                        {params.row.remarks}
+                        <FormattedMessage id="gazetteCount" />: {params.row.issueVolume + "/" + params.row.issueYear
+                            + " No. " + params.row.issueNo}<br />
+                        <FormattedMessage id="myRemarks" />:{params.row.remarks}
                     </div>
             )
         },
diff --git a/src/translations/en.json b/src/translations/en.json
index 11875b6..18a1bb4 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -4,10 +4,10 @@
   "zh-CN": "简体中文",
   "language":"Language",
   "iamsmartLink": "https://www.iamsmart.gov.hk/en/",
-  "dateStrFormat": "YYYY-MM-DD",
+  "dateStrFormat": "DD MMM YYYY",
   "datetimeStrFormat": "YYYY-MM-DD HH:mm:ss",
-  "paymentMethodDatetimeStrFormat": "YYYY-MM-DD h:mm a",
-  "datetimeFormate": "YYYY-MM-DD h:mm a",
+  "paymentMethodDatetimeStrFormat": "DD MMM YYYY h:mm a",
+  "datetimeFormate": "DD MMM YYYY h:mm a",
   
   "PNSPS": "PNSPS",
   "PNSPS_fullname": "Public Notice Submission and Payment System",
@@ -120,15 +120,15 @@
   "proofPaymentHeader_demandNote": "Public Notice: Proofreading Completed and Payment Means Selected",
   "proofPaymentBody_demandNote": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}<br/><br/>You have selected to make payment by General Demand Note.",
   "proofPaymentBody_demandNote2": "The General Demand Note will be sent to the following email address within one working day, but not later than {closingDateOff} 9:00 p.m. : <br/>{email}",
-  "proofPaymentBody_demandNote3": "Please make payment and return the payment proof (e.g. ATM receipt, internet banking record)and the application number to gld_acct@gld.gov.hk by {paymentDeadline}.",
+  "proofPaymentBody_demandNote3": "Please make payment and return the payment proof (e.g. ATM receipt, internet banking record)and the application number to gld_acct@gld.gov.hk by {paymentDeadline} 12:30 p.m..",
   "proofPaymentBody_demandNote4": "We will process the publication after receiving payment confirmation.",
 
   "proofPaymentHeader_office": "Public Notice: Proofreading Completed and Payment Means Selected",
   "proofPaymentBody_office": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}",
   "proofPaymentBody_office2": "You have selected to make payment at North Point Government Offices Collection Office:<center><br/>Collection Office at Accounts Section<br/>10/F North Point Government Offices<br/>333 Java Road North Point</center>",
-  "proofPaymentBody_office3": "The office hours of the Collection Office is from Monday to Friday: 8:30 a.m. to 1 p.m., 2 p.m. to 5 p.m.",
+  "proofPaymentBody_office3": "The office hours of the Collection Office is from Monday to Friday: 8:30 a.m. to 1 p.m., 2 p.m. to 5 p.m. , except public holidays.",
   "proofPaymentBody_office4": "Cheques, drafts or cashier’s orders should be made payable to “The Government of the Hong Kong Special Administrative Region” or “The Government of the HKSAR” and crossed. They must not be made payable to any individual officer. Payment is valid only after the cheque, draft or cashier’s order is cleared.",
-  "proofPaymentBody_office5": "Please print out this page or present your application details on screen at our Collection Office, and complete the payment by {paymentDeadline}.",
+  "proofPaymentBody_office5": "Please print out this page or present your application details on screen at our Collection Office, and complete the payment by {paymentDeadline} 12:30 p.m..",
   "proofPaymentBody_office6": "We will process the publication after receiving payment confirmation.",
 
   "proofPaymentHeader_online": "Public Notice: Proofreading Completed and Payment Means Selected",
@@ -423,7 +423,7 @@
   "download": "Download",
   "paymentHistory": "Payment History",
   "proofId": "Proof Code",
-  "proofDate": "Deadline for online manuscript revision",
+  "proofDate": "Deadline for online manuscript revision (Pay online via PNSPS)",
   "proofDateFrom": "Proof Sent Date (From)",
   "proofDateTo": "Proof Sent Date (To)",
   "replyDate": "Reply Date",
@@ -431,7 +431,7 @@
   "payFeeFor": "Pay for",
   "payFor": "Pay",
   "payFee": "Payment Amount",
-  "replyBefore": "Deadline for Online Confirm Proof",
+  "replyBefore": "Deadline for Online Confirm Proof (Pay online via PNSPS)",
   "applicationPublishDate": "Publish Date",
   "pleaseCheckReminder": "Please download the following printed manuscript file and proofread it carefully",
   "payAnd": "Pay and ",
@@ -470,9 +470,9 @@
   "fpsQrcodeTitle4":"Remaining time:",
   "fpsQrcodeTitle5":"s",
 
-  "payDnRemark": "Payment proof (e.g. ATM receipt, internet banking record) to be sent to gld_acct@gld.gov.hk by {date}",
-  "payNPGORemark" :"Payment to be completed at NPGO Collection Office by {date}",
-  "payOnlineRemark" :"Payment to be completed via this system by {date} 2:30 p.m.",
+  "payDnRemark": "Payment proof (e.g. ATM receipt, internet banking record) to be sent to gld_acct@gld.gov.hk by {date} 12:30 p.m..",
+  "payNPGORemark" :"Payment to be completed at NPGO Collection Office by {date} 12:30 p.m..",
+  "payOnlineRemark" :"Payment to be completed via this system by {date} 2:30 p.m..",
 
   "before": "Before",
   "page": "Page",
diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json
index e7be805..e3102ac 100644
--- a/src/translations/zh-CN.json
+++ b/src/translations/zh-CN.json
@@ -7,7 +7,7 @@
   "dateStrFormat": "YYYY年MM月DD日",
   "datetimeStrFormat": "YYYY年MM月DD日 HH:mm:ss",
   "paymentMethodDatetimeStrFormat": "YYYY年MM月DD日 ah时mm分",
-  "datetimeFormate": "YYYY年MM月DD日 h:mm a",
+  "datetimeFormate": "YYYY年MM月DD日 ah时mm分",
 
   "PNSPS": "公共启事提交及缴费系统",
   "PNSPS_fullname": "公共启事提交及缴费系统",
@@ -78,9 +78,9 @@
   "fpsQrcodeTitle4":"剩余时间:",
   "fpsQrcodeTitle5":"秒",
   
-  "payDnRemark": "在{date}之前將付款證明（如自動櫃員機收據、網上銀行付款記錄）電郵至gld_acct@gld.gov.hk。",
-  "payNPGORemark" :"在{date}之前在北角政府合署收款处完成付款",
-  "payOnlineRemark" :"在{date} 下午2時30分 之前在此系统完成网上付款。",
+  "payDnRemark": "在{date} 下午12時30分 前將付款證明（如自動櫃員機收據、網上銀行付款記錄）電郵至gld_acct@gld.gov.hk。",
+  "payNPGORemark" :"在{date} 下午12時30分 前在北角政府合署收款处完成付款",
+  "payOnlineRemark" :"在{date} 下午2時30分 前透過此系统完成网上付款。",
   
   "MSG.registerIAmSmart": "你可点击「智方便」按钮，系统会自动输入个人资料，或自行输入个人资料，以即时启动 公共启事提交及缴费系统 帐户。<br/>如欲使用「智方便」提供个人资料，请先下载「智方便」流动应用程式并登记成为「智方便」用户。",
   "MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。 <br/>如：香港身份证; 护照; 中国内地身份证; 专业执业证书等",
@@ -156,7 +156,7 @@
   "proofPaymentHeader_demandNote": "公共启事: 已完成校对并已选择付款方式",
   "proofPaymentBody_demandNote": "我们已收到以下申请编号的稿件校对确认及可付印指示。<br/>{appNo}<br/><br/>你已选择以一般缴款单付款。",
   "proofPaymentBody_demandNote2": "一般缴款单将在一个工作天内，但不迟于{closingDateOff} 晚上9时前发送至以下电邮地址： <br/>{email}",
-  "proofPaymentBody_demandNote3": "请在{paymentDeadline}前缴付款项并将相关付款证明（例如银行入数纸或网上银行付款记录）连同申请编号电邮至gld_acct@gld.gov.hk。",
+  "proofPaymentBody_demandNote3": "请在{paymentDeadline}下午12时30分前缴付款项并将相关付款证明（例如银行入数纸或网上银行付款记录）连同申请编号电邮至gld_acct@gld.gov.hk。",
   "proofPaymentBody_demandNote4": "我们将在收到付款后处理刊登事宜。",
 
   "proofPaymentHeader_office": "公共启事: 已完成校对并已选择付款方式",
@@ -456,7 +456,7 @@
   "download": "下载",
   "paymentHistory": "付款记录",
   "proofId": "校对编号",
-  "proofDate": "网上修订稿件最后限期",
+  "proofDate": "网上修订稿件最后限期 (透过此系统网上付款)",
   "proofDateFrom": "出稿日期 (从)",
   "proofDateTo": "出稿日期 (到)",
   "replyDate": "回复日期",
@@ -464,7 +464,7 @@
   "payFeeFor": "应缴金额 ($)",
   "payFor": "付款",
   "payFee": "付款金额 ($)",
-  "replyBefore": "网上确定付印最后限期",
+  "replyBefore": "网上确定付印最后限期 (透过此系统网上付款)",
   "applicationPublishDate": "刊出日期",
   "pleaseCheckReminder": "请下载下列印刷稿档案，并仔细校对",
   "payAnd": "缴费及",
diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json
index cf85c89..636f673 100644
--- a/src/translations/zh-HK.json
+++ b/src/translations/zh-HK.json
@@ -7,7 +7,7 @@
   "dateStrFormat": "YYYY年MM月DD日",
   "datetimeStrFormat": "YYYY年MM月DD日 HH:mm:ss",
   "paymentMethodDatetimeStrFormat": "YYYY年MM月DD日 ah時mm分",
-  "datetimeFormate": "YYYY年MM月DD日 h:mm a",
+  "datetimeFormate": "YYYY年MM月DD日 ah時mm分",
 
   "PNSPS": "公共啟事提交及繳費系統",
   "PNSPS_fullname": "公共啟事提交及繳費系統",
@@ -78,9 +78,9 @@
   "fpsQrcodeTitle4":"剩餘時間:",
   "fpsQrcodeTitle5":"秒",
 
-  "payDnRemark": "在{date} 下午12時30分 之前將付款證明（如自動櫃員機收據、網上銀行付款記錄）電郵至 gld_acct@gld.gov.hk。 ",
-  "payNPGORemark" :"在{date} 下午12時30分 之前在北角政府合署收款處完成付款",
-  "payOnlineRemark" :"在{date} 下午2時30分 之前在此系統完成網上付款。",
+  "payDnRemark": "在{date} 下午12時30分 前將付款證明（如自動櫃員機收據、網上銀行付款記錄）電郵至 gld_acct@gld.gov.hk。 ",
+  "payNPGORemark" :"在{date} 下午12時30分 前在北角政府合署收款處完成付款",
+  "payOnlineRemark" :"在{date} 下午2時30分 前透過此系統完成網上付款。",
 
   "MSG.registerIAmSmart": "你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動 公共啟事提交及繳費系統 帳戶。<br/>如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。",
   "MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。<br/>如：香港身份證; 護照; 中國內地身份證; 專業執業証書等",
@@ -156,7 +156,7 @@
   "proofPaymentHeader_demandNote": "公共啟事: 已完成校對並已選擇付款方式",
   "proofPaymentBody_demandNote": "我們已收到以下申請編號的稿件校對確認及可付印指示。<br/>{appNo}<br/>你已選擇以一般繳款單付款。",
   "proofPaymentBody_demandNote2": "一般繳款單將在一個工作天內，但不遲於{closingDateOff} 晚上9時前發送至以下電郵地址： <br/>{email}",
-  "proofPaymentBody_demandNote3": "請在{paymentDeadline}前繳付款項並將相關付款證明（例如銀行入數紙或網上銀行付款記錄）連同申請編號電郵至gld_acct@gld.gov.hk。 ",
+  "proofPaymentBody_demandNote3": "請在{paymentDeadline}下午12时30分前繳付款項並將相關付款證明（例如銀行入數紙或網上銀行付款記錄）連同申請編號電郵至gld_acct@gld.gov.hk。 ",
   "proofPaymentBody_demandNote4": "我們將在收到付款後處理刊登事宜。",
 
   "proofPaymentHeader_office": "公共啟事: 已完成校對並已選擇付款方式",
@@ -457,7 +457,7 @@
   "download": "下載",
   "paymentHistory": "付款記錄",
   "proofId": "校對編號",
-  "proofDate": "網上俢訂稿件最後限期",
+  "proofDate": "網上俢訂稿件最後限期 (透過此系統網上付款)",
   "proofDateFrom": "出稿日期 (從)",
   "proofDateTo": "出稿日期 (到)",
   "replyDate": "回覆日期",
@@ -465,7 +465,7 @@
   "payFeeFor": "應繳金額 ($)",
   "payFor": "付款",
   "payFee": "付款金額 ($)",
-  "replyBefore": "網上確定付印最後限期",
+  "replyBefore": "網上確定付印最後限期 (透過此系統網上付款)",
   "applicationPublishDate": "刊出日期",
   "pleaseCheckReminder": "請下載下列印刷稿檔案，並仔細校對",
   "payAnd": "繳費及",
diff --git a/src/utils/DateUtils.js b/src/utils/DateUtils.js
index 5605718..d095ee4 100644
--- a/src/utils/DateUtils.js
+++ b/src/utils/DateUtils.js
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 
-var days_ZH = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
-var days_CN = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
+var days_ZH = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
+var days_CN = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
 
 export const datetimeStr = (date) =>{
     
@@ -29,6 +29,10 @@ export const dateStr_Cht = (date) =>{
     return dateFormat(date,"YYYY年MM月DD日")
 };
 
+export const dateStr_Eng = (date) =>{
+    return dateFormat(date,"DD MMM YYYY")
+};
+
 export const datetimeFieldFormat = (date) =>{
     return dateFormat(date,"YYYY-MM-DDTHH:mm");
 };