diff --git a/src/auth/index.js b/src/auth/index.js
index 2d7c611..51aa5f6 100644
--- a/src/auth/index.js
+++ b/src/auth/index.js
@@ -203,3 +203,36 @@ export const SetupAxiosInterceptors = () => {
         
     )
 }
+
+export const handleRefreshTokenFunction = () => {
+    // const token = localStorage.getItem('accessToken');
+    let isRefresh = false;
+    
+    if (!isRefresh) {
+        const refreshToken = localStorage.getItem('refreshToken');
+        isRefresh = true;
+        axios.post(`${apiPath}${REFRESH_TOKEN}`, {
+            refreshToken: refreshToken
+        }).then((response) => {
+            if (response.status === 200) {
+                const newAccessToken = response.data.accessToken;
+                const newRefreshToken = response.data.refreshToken;
+                localStorage.setItem('accessToken', newAccessToken);
+                localStorage.setItem('refreshToken', newRefreshToken);
+                // token = newAccessToken;
+                isRefresh = false;
+            } else {
+                // token = null;
+                isRefresh = false;
+            }
+        })
+        .catch((refreshError) => {
+            console.log('Failed to refresh token');
+            console.log(refreshError)
+            // token = null
+            isRefresh = false;
+        });
+    }
+
+    return isRefresh;
+}
diff --git a/src/components/AutoLogoutProvider.js b/src/components/AutoLogoutProvider.js
index 4be8518..166055f 100644
--- a/src/components/AutoLogoutProvider.js
+++ b/src/components/AutoLogoutProvider.js
@@ -14,6 +14,7 @@ const AutoLogoutProvider = ({ children }) => {
     const [lastRequestTime, setLastRequestTime] = useState(Date.now());
     const navigate = useNavigate();
     const [logoutInterval, setLogoutInterval] = useState(1);
+    // const [remainingInterval] = useState(5);
     const [state, setState] = useState('Active');
     const dispatch = useDispatch()
 
@@ -28,7 +29,7 @@ const AutoLogoutProvider = ({ children }) => {
     }
 
     const {
-        getRemainingTime,
+        // getRemainingTime,
         //getTabId,
         isLastActiveTab,
     } = useIdleTimer({
@@ -80,11 +81,13 @@ const AutoLogoutProvider = ({ children }) => {
         // console.log(logoutInterval)
         const interval = setInterval(async () => {
             const currentTime = Date.now();
-            getRemainingTime();
+            // getRemainingTime();
             if(state !== "Active" && lastActiveTab){
                 const timeElapsed = currentTime - lastRequestTime;
                 // console.log(parseInt(timeElapsed/1000));
                 // console.log(logoutInterval* 60);
+                // console.log(remainingInterval * 60);
+                // console.log(logoutInterval * 60 * 1000 - timeElapsed)
                 if (timeElapsed >= logoutInterval * 60 * 1000) {
                     if(isUserLoggedIn()){
                         alert("登入驗證已過期，請重新登入。")
@@ -94,9 +97,13 @@ const AutoLogoutProvider = ({ children }) => {
                     }
                 }
             }
-            else if(state === "Active"){
-                //TODO: if is active and remaining time < 5 min then refresh token
-            }
+            // else if(state === "Active"){
+            //     const timeElapsed = currentTime - lastRequestTime;
+            //     if ( (logoutInterval * 60 * 1000 - timeElapsed) <= remainingInterval * 60 * 1000){
+
+            //     }
+            //     //TODO: if is active and remaining time < 5 min then refresh token
+            // }
         }, 1000); // Check every second
 
         return () => {
diff --git a/src/pages/Announcement/Search/SearchForm.js b/src/pages/Announcement/Search/SearchForm.js
index dd4b06d..63d5999 100644
--- a/src/pages/Announcement/Search/SearchForm.js
+++ b/src/pages/Announcement/Search/SearchForm.js
@@ -11,28 +11,109 @@ import * as DateUtils from "utils/DateUtils";
 import {ThemeProvider} from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import { makeStyles } from '@mui/styles';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-
+const useStyles = makeStyles(() => ({
+    root: {
+      position: "relative"
+    },
+    display: {
+      position: "absolute",
+      top: 2,
+      left: 12,
+      bottom: 2,
+      background: "white",
+      pointerEvents: "none",
+      right: 50,
+      display: "flex",
+      alignItems: "center"
+    },
+  }));
 
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
     const navigate = useNavigate()
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+    
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+    const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
+
+    React.useEffect(() => {
+        // console.log(minDate)
+        setFromDateValue(minDate);
+    }, [minDate]);
+    
+    React.useEffect(() => {
+        setToDateValue(maxDate);
+    }, [maxDate]);
+    
+    function FormDateInputComponent({inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+            <div className={classes.display}>
+                {DateUtils.dateStr(fromDateValue)=="Invalid Date"?
+                    fromDateValue
+                :
+                    DateUtils.dateStr(fromDateValue)}
+            </div>
+            <input
+                // className={classes.input}
+                ref={inputRef}
+                {...props}
+                // onChange={handleChange}
+                value={fromDateValue}
+                max= {maxDate}
+            />
+            </>
+        );
+    }
+
+    function ToDateInputComponent({inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+            <div className={classes.display}>
+                {DateUtils.dateStr(toDateValue)=="Invalid Date"?
+                    toDateValue
+                :
+                    DateUtils.dateStr(toDateValue)}
+            </div>
+            <input
+                // className={classes.input}
+                ref={inputRef}
+                {...props}
+                // onChange={handleChange}
+                value={toDateValue}
+                min = {minDate}
+            />
+            </>
+        );
+    }
 
     const marginBottom = 2.5;
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
+        let sentDateFrom = "";
+        let sentDateTo = "";
+        if( fromDateValue!="dd / mm / yyyy"&&toDateValue!="dd / mm / yyyy"){
+            sentDateFrom = DateUtils.dateValue(fromDateValue)
+            sentDateTo = DateUtils.dateValue(toDateValue)
+        }
+
         const temp = {
             key: data.key,
-            dateFrom: data.dateFrom,
-            dateTo: data.dateTo,
+            dateFrom: sentDateFrom,
+            dateTo: sentDateTo,
         };
         applySearch(temp);
     };
 
 
     function resetForm() {
+        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
+        setMaxDate(DateUtils.dateValue(new Date()))
         reset();
     }
 
@@ -54,7 +135,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                     </Grid>
                     {/*row 2*/}
                     <Grid container display="flex" alignItems={"center"}>
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
+                        <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                             <TextField
                                 fullWidth
                                 {...register("key")}
@@ -67,7 +148,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                             />
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:marginBottom}}>
+                        <Grid item xs={12} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:marginBottom}}>
                             <Grid container spacing={1}>
                                 <Grid item xs={6}>
                                     <TextField
@@ -77,14 +158,18 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                                         type="date"
                                         label={"Submit Date (From)"}
                                         defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{ inputProps: { max: maxDate } }}
+                                        InputProps={{
+                                            inputComponent: FormDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateValue(newValue));
+                                            if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                                         }}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
 
@@ -95,15 +180,19 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                                             shrink: true
                                         }}
                                         {...register("dateTo")}
-                                        InputProps={{ inputProps: { min: minDate } }}
+                                        InputProps={{
+                                            inputComponent: ToDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMaxDate(DateUtils.dateValue(newValue));
+                                            if(newValue.target.value!=""){
+                                                setMaxDate(newValue.target.value);
+                                            }
                                         }}
                                         id="dateTo"
                                         type="date"
                                         label={"Submit Date (To)"}
                                         defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                             </Grid>
diff --git a/src/pages/Announcement/Search_Public/SearchForm.js b/src/pages/Announcement/Search_Public/SearchForm.js
index 2ad4fc5..451c745 100644
--- a/src/pages/Announcement/Search_Public/SearchForm.js
+++ b/src/pages/Announcement/Search_Public/SearchForm.js
@@ -9,33 +9,113 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
 import { ThemeProvider } from "@emotion/react";
-import { useNavigate } from "react-router-dom";
+// import { useNavigate } from "react-router-dom";
 import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
 import { FormattedMessage, useIntl } from "react-intl";
+import { makeStyles } from '@mui/styles';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-
+const useStyles = makeStyles(() => ({
+    root: {
+      position: "relative"
+    },
+    display: {
+      position: "absolute",
+      top: 2,
+      left: 12,
+      bottom: 2,
+      background: "white",
+      pointerEvents: "none",
+      right: 50,
+      display: "flex",
+      alignItems: "center"
+    },
+  }));
 
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
-    const navigate = useNavigate()
+    // const navigate = useNavigate()
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+    
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+    const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
 
     const intl = useIntl();
 
+    React.useEffect(() => {
+        // console.log(minDate)
+        setFromDateValue(minDate);
+    }, [minDate]);
+    
+    React.useEffect(() => {
+        setToDateValue(maxDate);
+    }, [maxDate]);
+    
+    function FormDateInputComponent({inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+            <div className={classes.display}>
+                {DateUtils.dateStr(fromDateValue)=="Invalid Date"?
+                    fromDateValue
+                :
+                    DateUtils.dateStr(fromDateValue)}
+            </div>
+            <input
+                // className={classes.input}
+                ref={inputRef}
+                {...props}
+                // onChange={handleChange}
+                value={fromDateValue}
+                max= {maxDate}
+            />
+            </>
+        );
+    }
+
+    function ToDateInputComponent({inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+            <div className={classes.display}>
+                {DateUtils.dateStr(toDateValue)=="Invalid Date"?
+                    toDateValue
+                :
+                    DateUtils.dateStr(toDateValue)}
+            </div>
+            <input
+                // className={classes.input}
+                ref={inputRef}
+                {...props}
+                // onChange={handleChange}
+                value={toDateValue}
+                min = {minDate}
+            />
+            </>
+        );
+    }
+
     const marginBottom = 2.5;
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
+        let sentDateFrom = "";
+        let sentDateTo = "";
+        if( fromDateValue!="dd / mm / yyyy"&&toDateValue!="dd / mm / yyyy"){
+            sentDateFrom = DateUtils.dateValue(fromDateValue)!="Invalid Date"?DateUtils.dateValue(fromDateValue):""
+            sentDateTo = DateUtils.dateValue(toDateValue)!="Invalid Date"?DateUtils.dateValue(toDateValue):""
+        }
         const temp = {
             key: data.key,
-            dateFrom: data.dateFrom,
-            dateTo: data.dateTo,
+            dateFrom: sentDateFrom,
+            dateTo: sentDateTo,
         };
         applySearch(temp);
     };
 
 
     function resetForm() {
+        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
+        setMaxDate(DateUtils.dateValue(new Date()))
         reset();
     }
 
@@ -80,13 +160,18 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         type="date"
                                         label={intl.formatMessage({ id: 'dateFrom' }) + ":"}
                                         defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{ inputProps: { max: maxDate } }}
+                                        InputProps={{
+                                            inputComponent: FormDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateValue(newValue));
+                                            if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                                         }}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
 
@@ -101,14 +186,19 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                             shrink: true
                                         }}
                                         {...register("dateTo")}
-                                        InputProps={{ inputProps: { min: minDate } }}
+                                        InputProps={{
+                                            inputComponent: ToDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMaxDate(DateUtils.dateValue(newValue));
+                                            if(newValue.target.value!=""){
+                                                setMaxDate(newValue.target.value);
+                                            }
                                         }}
                                         id="dateTo"
                                         type="date"
                                         //label={"Submit Date(To)"}
                                         defaultValue={searchCriteria.dateTo}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                             </Grid>
@@ -119,7 +209,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     {/*last row*/}
                     <Grid container maxWidth justifyContent="flex-end">
                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                            <Grid item sx={{ ml: 3 }}>
+                            {/* <Grid item sx={{ ml: 3 }}>
                                 <Button
                                     variant="contained"
                                     color="green"
@@ -129,7 +219,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                 >
                                     <FormattedMessage id="create"></FormattedMessage>
                                 </Button>
-                            </Grid>
+                            </Grid> */}
                             <Grid item sx={{ ml: 3 }}>
                                 <Button
                                     variant="contained"
diff --git a/src/pages/AuditLog/AuditLogSearchForm.js b/src/pages/AuditLog/AuditLogSearchForm.js
index 23c1a8e..592a0cb 100644
--- a/src/pages/AuditLog/AuditLogSearchForm.js
+++ b/src/pages/AuditLog/AuditLogSearchForm.js
@@ -189,12 +189,14 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
                                         inputComponent: FormDateInputComponent,
                                     }}
                                     onChange={(newValue) => {
-                                        setMinDate(newValue.target.value);
+                                        if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                                     }}
                                     InputLabelProps={{
                                         shrink: true
                                     }}
-                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                 />
                             </Grid>
 
@@ -213,13 +215,15 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
                                         inputComponent: ToDateInputComponent,
                                     }}
                                     onChange={(newValue) => {
-                                        setMaxDate(newValue.target.value);
+                                        if(newValue.target.value!=""){
+                                            setMaxDate(newValue.target.value);
+                                        }
                                     }}
                                     id="modifiedTo"
                                     type="date"
                                     label="Modified To"
                                     defaultValue={searchCriteria.modifiedTo}
-                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                 />
                             </Grid>
                         </Grid>
diff --git a/src/pages/DemandNote/Search/DataGrid.js b/src/pages/DemandNote/Search/DataGrid.js
index 1084b03..c55384b 100644
--- a/src/pages/DemandNote/Search/DataGrid.js
+++ b/src/pages/DemandNote/Search/DataGrid.js
@@ -340,7 +340,7 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
                     getRowHeight={() => 'auto'}
                     onRowDoubleClick={handleRowDoubleClick}
                     doLoad={React.useMemo(() => ({
-                        url: UrlUtils.DEMAND_NOTE_LIST,
+                        url: UrlUtils.DEMAND_NOTE_LIST_ALL,
                         params: _searchCriteria,
                         callback: function (responseData) {
                             setRows(responseData?.records);
diff --git a/src/pages/DemandNote/Search/SearchForm.js b/src/pages/DemandNote/Search/SearchForm.js
index 98231da..117bd58 100644
--- a/src/pages/DemandNote/Search/SearchForm.js
+++ b/src/pages/DemandNote/Search/SearchForm.js
@@ -361,12 +361,14 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                             inputComponent: FormDateInputComponent,
                                         }}
                                         onChange={(newValue) => {
-                                            setMinDate(newValue.target.value);
+                                            if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                                         }}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
 
@@ -381,13 +383,15 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                             inputComponent: ToDateInputComponent,
                                         }}
                                         onChange={(newValue) => {
-                                            setMaxDate(newValue.target.value);
+                                            if(newValue.target.value!=""){
+                                                setMaxDate(newValue.target.value);
+                                            }
                                         }}
                                         id="dateTo"
                                         type="date"
                                         label={"Issue Date (To)"}
                                         defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                             </Grid>
@@ -412,7 +416,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         InputLabelProps={{
                                             shrink: true
                                         }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
 
@@ -434,7 +438,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         type="date"
                                         label={"Due Date (To)"}
                                         defaultValue={searchCriteria.dueDateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                             </Grid>
diff --git a/src/pages/DemandNote/Search_Public/SearchForm.js b/src/pages/DemandNote/Search_Public/SearchForm.js
index ba3530e..8e4f816 100644
--- a/src/pages/DemandNote/Search_Public/SearchForm.js
+++ b/src/pages/DemandNote/Search_Public/SearchForm.js
@@ -256,7 +256,9 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                     inputComponent: FormDateInputComponent,
                                 }}
                                 onChange={(newValue) => {
-                                    setMinDate(newValue.target.value);
+                                    if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                                 }}
                                 InputLabelProps={{
                                     shrink: true
@@ -275,7 +277,9 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                     inputComponent: ToDateInputComponent,
                                 }}
                                 onChange={(newValue) => {
-                                    setMaxDate(newValue.target.value);
+                                    if(newValue.target.value!=""){
+                                        setMaxDate(newValue.target.value);
+                                    }
                                 }}
                                 id="dateTo"
                                 type="date"
diff --git a/src/pages/DemandNote/Search_Public/index.js b/src/pages/DemandNote/Search_Public/index.js
index 64b17d5..9e20089 100644
--- a/src/pages/DemandNote/Search_Public/index.js
+++ b/src/pages/DemandNote/Search_Public/index.js
@@ -30,7 +30,7 @@ const BackgroundHead = {
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const UserSearchPage_Individual = () => {
+const SearchPage_DemandNote_Pub = () => {
 
     const [orgCombo, setOrgCombo] = React.useState([]);
     const [issueCombo, setIssueCombo] = React.useState([]);
@@ -117,4 +117,4 @@ const UserSearchPage_Individual = () => {
             </Grid>
     );
 }
-export default UserSearchPage_Individual;
+export default SearchPage_DemandNote_Pub;
diff --git a/src/pages/GFMIS/SearchForm.js b/src/pages/GFMIS/SearchForm.js
index 15c0b9c..dd72e03 100644
--- a/src/pages/GFMIS/SearchForm.js
+++ b/src/pages/GFMIS/SearchForm.js
@@ -134,12 +134,14 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
                                 inputComponent: FormDateInputComponent,
                             }}
                             onChange={(newValue) => {
-                                setMinDate(newValue.target.value);
+                                if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                             }}
                             InputLabelProps={{
                                 shrink: true
                             }}
-                            sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                            sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                         />
                     </Grid>
 
diff --git a/src/pages/Organization/DetailPage/OrganizationCard.js b/src/pages/Organization/DetailPage/OrganizationCard.js
index 71e9e4f..71e0bb7 100644
--- a/src/pages/Organization/DetailPage/OrganizationCard.js
+++ b/src/pages/Organization/DetailPage/OrganizationCard.js
@@ -440,7 +440,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                             shrink: true
                                         }}
                                         disabled={(!editMode && !createMode)}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                             </Grid>
diff --git a/src/pages/Payment/Details_GLD/PaymentDetails.js b/src/pages/Payment/Details_GLD/PaymentDetails.js
index d74c937..22e45b0 100644
--- a/src/pages/Payment/Details_GLD/PaymentDetails.js
+++ b/src/pages/Payment/Details_GLD/PaymentDetails.js
@@ -70,7 +70,7 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                             <Grid container >
                                 <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
-                                    Transaction No.:
+                                    Payment No.:
                                     </FormLabel>
                                 </Grid>
                                 <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
@@ -84,7 +84,7 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                             <Grid container >
                                 <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
-                                    Transaction Date:
+                                        Payment Date:
                                     </FormLabel>
                                 </Grid>
                                 <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
@@ -98,7 +98,7 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                             <Grid container >
                                 <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
-                                    Transaction Time:
+                                        Payment Time:
                                     </FormLabel>
                                 </Grid>
                                 <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
diff --git a/src/pages/Payment/Details_GLD/index.js b/src/pages/Payment/Details_GLD/index.js
index 114cc82..68a1764 100644
--- a/src/pages/Payment/Details_GLD/index.js
+++ b/src/pages/Payment/Details_GLD/index.js
@@ -58,7 +58,7 @@ const Index = () => {
         // window.print();
         setOnDownload(true)
         HttpUtils.fileDownload({
-            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.id,
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.id+"/"+"en",
             onResponse:()=>{
                 setOnDownload(false)
             },
diff --git a/src/pages/Payment/Details_Public/PaymentDetails.js b/src/pages/Payment/Details_Public/PaymentDetails.js
index 16d6a85..66dc04b 100644
--- a/src/pages/Payment/Details_Public/PaymentDetails.js
+++ b/src/pages/Payment/Details_Public/PaymentDetails.js
@@ -80,7 +80,7 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     <Grid container spacing={5} >
                                         <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                                <FormattedMessage id="transactionNo" />:
+                                                <FormattedMessage id="paymentNo" />:
                                             </FormLabel>
                                         </Grid>
                                         <Grid item xs={6} md={6} sx={{ textAlign: "left" }}>
@@ -94,7 +94,7 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     <Grid container spacing={5}>
                                         <Grid item xs={6} md={6} sx={{textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                                <FormattedMessage id="transactionDate" />:
+                                                <FormattedMessage id="paymentDate" />:
                                             </FormLabel>
                                         </Grid>
                                         <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
@@ -108,7 +108,7 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     <Grid container spacing={5}>
                                         <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                                <FormattedMessage id="transactionTime" />:
+                                                <FormattedMessage id="paymentTime" />:
                                             </FormLabel>
                                         </Grid>
                                         <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
@@ -136,7 +136,7 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     <Grid container spacing={5} >
                                         <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                                <FormattedMessage id="payTotalDeatail"/>:
+                                                <FormattedMessage id="payDeatail"/>:
                                             </FormLabel>
                                         </Grid>
                                         <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
@@ -150,7 +150,7 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     <Grid container spacing={5} >
                                         <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                                <FormattedMessage id="payMethod"/>:
+                                                <FormattedMessage id="epayMethod"/>:
                                             </FormLabel>
                                         </Grid>
                                         <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
diff --git a/src/pages/Payment/Details_Public/index.js b/src/pages/Payment/Details_Public/index.js
index 96ee14d..5407daf 100644
--- a/src/pages/Payment/Details_Public/index.js
+++ b/src/pages/Payment/Details_Public/index.js
@@ -42,6 +42,7 @@ const Index = () => {
     const [onReady, setOnReady] = React.useState(false);
     const [onDownload, setOnDownload] = React.useState(false);
     // const [detailsOrder, setDetailsOrder] = React.useState(2);
+    const { locale } = intl;
 
     React.useEffect(() => {
         loadForm();
@@ -60,8 +61,10 @@ const Index = () => {
     const doPrint = () => {
         // window.print();
         setOnDownload(true)
+        const local = locale
+        // console.log(local)
         HttpUtils.fileDownload({
-            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.id,
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.id+"/"+local,
             onResponse:()=>{
                 setOnDownload(false)
             },
diff --git a/src/pages/Payment/FPS/AckPage.js b/src/pages/Payment/FPS/AckPage.js
index ae0d804..a9b01a7 100644
--- a/src/pages/Payment/FPS/AckPage.js
+++ b/src/pages/Payment/FPS/AckPage.js
@@ -23,7 +23,7 @@ const PaymentDetails = Loadable(React.lazy(() => import('../Details_Public/Payme
 const DataGrid = Loadable(React.lazy(() => import('../Details_Public/DataGrid')));
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage,useIntl} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -52,6 +52,8 @@ const AckPage = () => {
     const [onReady, setOnReady] = React.useState(false);
     const paymentStatusApi = "/api/payment/status/";
     const [onDownload, setOnDownload] = React.useState(false);
+    const intl = useIntl();
+    const { locale } = intl;
 
     React.useEffect(() => {
         loadForm();
@@ -143,8 +145,9 @@ const AckPage = () => {
     const doPrint = () => {
         // window.print();
         setOnDownload(true)
+        const local = locale
         HttpUtils.fileDownload({
-            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+localStorage.getItem("paymentId"),
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+localStorage.getItem("paymentId")+"/"+local,
             onResponse:()=>{
                 setOnDownload(false)
             },
diff --git a/src/pages/Payment/FPS/fpscallback.js b/src/pages/Payment/FPS/fpscallback.js
index 7e2b004..6120c7c 100644
--- a/src/pages/Payment/FPS/fpscallback.js
+++ b/src/pages/Payment/FPS/fpscallback.js
@@ -23,7 +23,7 @@ const PaymentDetails = Loadable(React.lazy(() => import('../Details_Public/Payme
 const DataGrid = Loadable(React.lazy(() => import('../Details_Public/DataGrid')));
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage,useIntl} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -52,7 +52,8 @@ const Fpscallback = () => {
     const [onReady, setOnReady] = React.useState(false);
     // const paymentStatusApi = "/api/payment/status/";
     const [onDownload, setOnDownload] = React.useState(false);
-
+    const intl = useIntl();
+    const { locale } = intl;
 
     React.useEffect(() => {
         loadForm();
@@ -162,8 +163,9 @@ const Fpscallback = () => {
         const params = new URLSearchParams(window.location.search);
         // window.print();
         setOnDownload(true)
+        const local = locale
         HttpUtils.fileDownload({
-            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.get("PAYMENT_ID"),
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.get("PAYMENT_ID")+"/"+local,
             onResponse:()=>{
                 setOnDownload(false)
             },
diff --git a/src/pages/Payment/PaymentCallback.js b/src/pages/Payment/PaymentCallback.js
index e261213..0beac0b 100644
--- a/src/pages/Payment/PaymentCallback.js
+++ b/src/pages/Payment/PaymentCallback.js
@@ -20,7 +20,7 @@ const PaymentDetails = Loadable(React.lazy(() => import('./Details_Public/Paymen
 const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid')));
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage,useIntl} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -48,6 +48,8 @@ const Index = () => {
     const [onReady, setOnReady] = React.useState(false);
     const updatePaymentApi = "/api/payment/updatepayment";
     const paymentStatusApi = "/api/payment/status/";
+    const intl = useIntl();
+    const { locale } = intl;
 
 
     React.useEffect(() => {
@@ -146,8 +148,10 @@ const Index = () => {
     const doPrint = () => {
         // window.print();
         setOnDownload(true)
+        const local = locale
+        // console.log(local)
         HttpUtils.fileDownload({
-            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+localStorage.getItem("paymentId"),
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+localStorage.getItem("paymentId")+"/"+local,
             onResponse:()=>{
                 setOnDownload(false)
             },
diff --git a/src/pages/Payment/Search_GLD/SearchForm.js b/src/pages/Payment/Search_GLD/SearchForm.js
index eadd7b6..46f23c3 100644
--- a/src/pages/Payment/Search_GLD/SearchForm.js
+++ b/src/pages/Payment/Search_GLD/SearchForm.js
@@ -167,12 +167,14 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                             inputComponent: FormDateInputComponent,
                                         }}
                                         onChange={(newValue) => {
-                                            setMinDate(newValue.target.value);
+                                            if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                                         }}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                                 <Grid item xs={6}>
@@ -186,13 +188,15 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                             inputComponent: ToDateInputComponent,
                                         }}
                                         onChange={(newValue) => {
-                                            setMaxDate(newValue.target.value);
+                                            if(newValue.target.value!=""){
+                                                setMaxDate(newValue.target.value);
+                                            }
                                         }}
                                         id="dateTo"
                                         type="date"
                                         label="Transaction Date (To)"
                                         defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                             </Grid>
diff --git a/src/pages/Payment/Search_Public/SearchForm.js b/src/pages/Payment/Search_Public/SearchForm.js
index de493e2..1e4f298 100644
--- a/src/pages/Payment/Search_Public/SearchForm.js
+++ b/src/pages/Payment/Search_Public/SearchForm.js
@@ -184,12 +184,14 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         inputComponent: FormDateInputComponent,
                                     }}
                                     onChange={(newValue) => {
-                                        setMinDate(newValue.target.value);
+                                        if(newValue.target.value!=""){
+                                            setMinDate(newValue.target.value);
+                                        }
                                     }}
                                     InputLabelProps={{
                                         shrink: true
                                     }}
-                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                 />
                             </Grid>
 
@@ -204,13 +206,15 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         inputComponent: ToDateInputComponent,
                                     }}
                                     onChange={(newValue) => {
-                                        setMaxDate(newValue.target.value);
+                                        if(newValue.target.value!=""){
+                                            setMaxDate(newValue.target.value);
+                                        }
                                     }}
                                     id="dateTo"
                                     type="date"
                                     label={intl.formatMessage({id: 'payDateTo'})}
                                     defaultValue={searchCriteria.dateTo}
-                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                 />
                             </Grid>
                         </Grid>
diff --git a/src/pages/Proof/Search_GLD/SearchForm.js b/src/pages/Proof/Search_GLD/SearchForm.js
index ba73815..7f30a90 100644
--- a/src/pages/Proof/Search_GLD/SearchForm.js
+++ b/src/pages/Proof/Search_GLD/SearchForm.js
@@ -292,12 +292,14 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                             inputComponent: FormDateInputComponent,
                                         }}
                                         onChange={(newValue) => {
-                                            setMinDate(newValue.target.value);
+                                            if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                                         }}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                                
@@ -312,13 +314,15 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                             inputComponent: ToDateInputComponent,
                                         }}
                                         onChange={(newValue) => {
-                                            setMaxDate(newValue.target.value);
+                                            if(newValue.target.value!=""){
+                                                setMaxDate(newValue.target.value);
+                                            }
                                         }}
                                         id="dateTo"
                                         type="date"
                                         label="Proof Issue Date (To)"
                                         defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />    
                                 </Grid>
                             </Grid>
diff --git a/src/pages/Proof/Search_Public/SearchForm.js b/src/pages/Proof/Search_Public/SearchForm.js
index d9b51b1..1e25c6e 100644
--- a/src/pages/Proof/Search_Public/SearchForm.js
+++ b/src/pages/Proof/Search_Public/SearchForm.js
@@ -292,12 +292,14 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                                         inputComponent: FormDateInputComponent,
                                     }}
                                     onChange={(newValue) => {
-                                        setMinDate(newValue.target.value);
+                                        if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                                     }}
                                     InputLabelProps={{
                                         shrink: true
                                     }}
-                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                 />
                             </Grid>
 
@@ -312,13 +314,15 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                                         inputComponent: ToDateInputComponent,
                                     }}
                                     onChange={(newValue) => {
-                                        setMaxDate(newValue.target.value);
+                                        if(newValue.target.value!=""){
+                                            setMaxDate(newValue.target.value);
+                                        }
                                     }}
                                     id="dateTo"
                                     type="date"
                                     label={intl.formatMessage({id: 'proofDateTo'})}
                                     defaultValue={searchCriteria.dateTo}
-                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                 />
                             </Grid>
                         </Grid>
diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js
index 91ac214..2543195 100644
--- a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js
+++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js
@@ -179,12 +179,14 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                 inputComponent: FormDateInputComponent,
                             }}
                             onChange={(newValue) => {
-                                setMinDate(newValue.target.value);
+                                if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                             }}
                             InputLabelProps={{
                                 shrink: true
                             }}
-                            sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                            sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                         />
                     </Grid>
 
@@ -205,9 +207,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                 inputComponent: ToDateInputComponent,
                             }}
                             onChange={(newValue) => {
-                                setMaxDate(newValue.target.value);
+                                if(newValue.target.value!=""){
+                                    setMaxDate(newValue.target.value);
+                                }
                             }}
-                            sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                            sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                         />
                     </Grid>
                     {isORGLoggedIn()?
diff --git a/src/pages/PublicNotice/Search_GLD/SearchForm.js b/src/pages/PublicNotice/Search_GLD/SearchForm.js
index b0a470b..28556bb 100644
--- a/src/pages/PublicNotice/Search_GLD/SearchForm.js
+++ b/src/pages/PublicNotice/Search_GLD/SearchForm.js
@@ -227,12 +227,14 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                             inputComponent: FormDateInputComponent,
                                         }}
                                         onChange={(newValue) => {
-                                            setMinDate(newValue.target.value);
+                                            if(newValue.target.value!=""){
+                                                setMinDate(newValue.target.value);
+                                            }
                                         }}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                                 
@@ -247,13 +249,15 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                             inputComponent: ToDateInputComponent,
                                         }}
                                         onChange={(newValue) => {
-                                            setMaxDate(newValue.target.value);
+                                            if(newValue.target.value!=""){
+                                                setMaxDate(newValue.target.value);
+                                            }
                                         }}
                                         id="dateTo"
                                         type="date"
                                         label={"Submit Date (To)"}
                                         defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                             </Grid>
diff --git a/src/pages/Recon/SearchForm.js b/src/pages/Recon/SearchForm.js
index ff211d8..22b0121 100644
--- a/src/pages/Recon/SearchForm.js
+++ b/src/pages/Recon/SearchForm.js
@@ -286,6 +286,23 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
         generateReport(temp);
     }
 
+    const clearHandler = () => () => {
+        setSysTxnMinDate(searchCriteria.dateFrom)
+        setsysTxnMaxDate(searchCriteria.dateTo)
+        setTxnMinDate(searchCriteria.dateFrom)
+        setTxnMaxDate(searchCriteria.dateTo)
+        setCollMinDate(searchCriteria.dateFrom)
+        setCollMaxDate(searchCriteria.dateTo)
+        setSysTxnFromDateValue("")
+        setSysTxnToDateValue("")
+        setTxnFromDateValue("")
+        setTxnToDateValue("")
+        setCollFromDateValue("")
+        setCollToDateValue("")
+        setStatus(ComboData.paymentStatus[0])
+        setMethod(ComboData.paymentMethod[0])
+    }
+
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
@@ -382,7 +399,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         InputLabelProps={{
                                             shrink: true
                                         }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                                 <Grid item xs={4}>
@@ -402,7 +419,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         type="date"
                                         label="PNSPS Transaction Date (To)"
                                         ////defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                             </Grid>
@@ -430,7 +447,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         InputLabelProps={{
                                             shrink: true
                                         }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                                 <Grid item xs={4}>
@@ -450,7 +467,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         type="date"
                                         label="FI Transaction Date (To)"
                                         //defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                             </Grid>
@@ -478,7 +495,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         InputLabelProps={{
                                             shrink: true
                                         }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                                 <Grid item xs={4}>
@@ -498,65 +515,92 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         type="date"
                                         label="Bank Credit Date (To)"
                                         //defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
                                     />
                                 </Grid>
                             </Grid>
                         </Grid>
                     </Grid>
-
-                    <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3}>
-                        {onLoad?
-                            <Grid item sx={{ ml: 3, mb: 3, mr:6 }} >
-                                <LoadingComponent disableText={true} alignItems="flex-start"/>
-                            </Grid>
-                            :
-                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                    <Grid container direction="row" justifyContent="space-between">
+                        <Grid item>
+                            <Grid container justifyContent="flex-Start" direction="row"  alignItems="center" spacing={3}>
                                 <Grid item sx={{ ml: 3, mb: 3, }} >
+                                    {/* <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Button
                                             variant="contained"
-                                            type="submit"
+                                            color="cancel"
+                                            onClick={clearHandler()}
                                         >
-                                            View
-                                        </Button>
+                                            Reset
+                                        </Button>    
+                                    </ThemeProvider> */}
                                 </Grid>
-
-                                <Grid item sx={{ ml: 3, mb: 3, }} >
-                                    <Grid container spacing={3}>
-                                        <Grid item sx={{ ml: 3, mr:3 }} >
+                            </Grid>
+                        </Grid>
+                        <Grid item>
+                            <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3}>
+                                {onLoad?
+                                    <Grid item sx={{ ml: 3, mb: 3, mr:6 }} >
+                                        <LoadingComponent disableText={true} alignItems="flex-start"/>
+                                    </Grid>
+                                    :
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                        <Grid item sx={{ mr: 3, mb: 3, }} >
                                             <Button
                                                 variant="contained"
-                                                onClick={generateFileHandler("csv")}
+                                                color="cancel"
+                                                onClick={clearHandler()}
                                             >
-                                                Generate CSV
-                                            </Button>
+                                                Reset
+                                            </Button>    
                                         </Grid>
-                                        
-                                        <Grid item sx={{ ml: 3, }} >
-                                            <Button
-                                                variant="contained"
-                                                onClick={generateFileHandler("pdf")}
-                                            >
-                                                Generate PDF
-                                            </Button>
+                                        <Grid item sx={{ ml: 3, mb: 3, }} >
+                                                <Button
+                                                    variant="contained"
+                                                    type="submit"
+                                                >
+                                                    View
+                                                </Button>
                                         </Grid>
-                                    </Grid>
-                                </Grid>
-                                
-                                {/* <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
-                                    {onDownload?
-                                        <LoadingComponent disableText={true} alignItems="flex-start"/>
-                                    :
-                                        <Button
-                                            variant="contained"
-                                            onClick={generatePDFHandler}
-                                        >
-                                            Generate PDF
-                                        </Button>
-                                    }
-                                </Grid> */}
-                            </ThemeProvider>
-                        }
+
+                                        <Grid item sx={{ ml: 3, mb: 3, }} >
+                                            <Grid container spacing={3}>
+                                                <Grid item sx={{ ml: 3, mr:3 }} >
+                                                    <Button
+                                                        variant="contained"
+                                                        onClick={generateFileHandler("csv")}
+                                                    >
+                                                        Generate CSV
+                                                    </Button>
+                                                </Grid>
+                                                
+                                                <Grid item sx={{ ml: 3, }} >
+                                                    <Button
+                                                        variant="contained"
+                                                        onClick={generateFileHandler("pdf")}
+                                                    >
+                                                        Generate PDF
+                                                    </Button>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        
+                                        {/* <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
+                                            {onDownload?
+                                                <LoadingComponent disableText={true} alignItems="flex-start"/>
+                                            :
+                                                <Button
+                                                    variant="contained"
+                                                    onClick={generatePDFHandler}
+                                                >
+                                                    Generate PDF
+                                                </Button>
+                                            }
+                                        </Grid> */}
+                                    </ThemeProvider>
+                                }
+                            </Grid>
+                        </Grid>
                     </Grid>
                 </Grid>
             </form>
diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
index 2442b15..bfb3498 100644
--- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
+++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
@@ -1,7 +1,9 @@
 // material-ui
 import {
     Grid, Button, Typography,
-    FormHelperText
+    FormHelperText,
+    Stack,
+    IconButton
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -20,6 +22,7 @@ import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerify
 import {useIntl} from "react-intl";
 import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -31,7 +34,16 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
     const [locked, setLocked] = useState(false);
     const [onReady, setOnReady] = useState(false);
     const [errorMsg, setErrorMsg] = useState("");
+    const [showId, setshowId] = useState(false);
 
+    const handleClickShowId = () => {
+        setshowId(!showId);
+    };
+
+    const handleMouseDownId = (event) => {
+        event.preventDefault();
+    };
+    
     useEffect(() => {
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
@@ -359,39 +371,78 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                     <Grid item xs={12} sm={12} md={9} lg={6}>
                                         <Grid container>
                                             {formik.values.idDocType === "HKID" ?
-                                                <>
-                                                    <Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
+                                                editMode?
+                                                    <>
+                                                        <Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
+                                                            {FieldUtils.initField({
+                                                                valueName: "identification",
+                                                                disabled: (!editMode),
+                                                                form: formik,
+                                                                placeholder: intl.formatMessage({id: 'idDocNumber'}),
+                                                                inputProps: {
+                                                                    maxLength: 7,
+                                                                    onKeyDown: (e) => {
+                                                                        if (e.key === 'Enter') {
+                                                                            e.preventDefault();
+                                                                        }
+                                                                    },
+                                                                }
+                                                            })}
+
+                                                        </Grid>
+                                                        <Grid item xs={2} sm={2} md={2} lg={2} style={{minWidth:40}}>
+                                                            {FieldUtils.initField({
+                                                                valueName: "checkDigit",
+                                                                disabled: (!editMode),
+                                                                form: formik,
+                                                            })}
+                                                        </Grid>
+                                                    </> 
+                                                :
+                                                    <Stack direction="row">
+                                                        <Typography variant="h5" mt={1}>
+                                                            {formik.values.identification.slice(0, 4)}
+                                                        </Typography>
+                                                        <Typography variant="h5"mt={1}>
+                                                            {showId ?formik.values.identification.slice(4):"****"}{showId ? '(' + formik.values.checkDigit + ')' :null}
+                                                        </Typography>
+                                                        <IconButton
+                                                            aria-label="toggle id visibility"
+                                                            onClick={handleClickShowId}
+                                                            onMouseDown={handleMouseDownId}
+                                                            edge="end"
+                                                            size="large"
+                                                        >
+                                                            {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+                                                        </IconButton>  
+                                                    </Stack>
+                                                :
+                                                editMode?
+                                                    <Grid item xs={10} sm={4} md={4} lg={10}>
                                                         {FieldUtils.initField({
                                                             valueName: "identification",
                                                             disabled: (!editMode),
-                                                            form: formik,
-                                                            placeholder: intl.formatMessage({id: 'idDocNumber'}),
-                                                            inputProps: {
-                                                                maxLength: 7,
-                                                                onKeyDown: (e) => {
-                                                                    if (e.key === 'Enter') {
-                                                                        e.preventDefault();
-                                                                    }
-                                                                },
-                                                            }
-                                                        })}
-
-                                                    </Grid>
-                                                    <Grid item xs={2} sm={2} md={2} lg={2}>
-                                                        {FieldUtils.initField({
-                                                            valueName: "checkDigit",
-                                                            disabled: (!editMode),
                                                             form: formik
                                                         })}
                                                     </Grid>
-                                                </> :
-                                                <Grid item xs={12} sm={6} md={6} lg={12}>
-                                                    {FieldUtils.initField({
-                                                        valueName: "identification",
-                                                        disabled: (!editMode),
-                                                        form: formik
-                                                    })}
-                                                </Grid>
+                                                    :
+                                                    <Stack direction="row">
+                                                        <Typography variant="h5" mt={1}>
+                                                            {formik.values.identification.slice(0, 4)}
+                                                        </Typography>
+                                                        <Typography variant="h5"mt={1}>
+                                                            {showId ?formik.values.identification.slice(4):"****"}
+                                                        </Typography>
+                                                        <IconButton
+                                                            aria-label="toggle id visibility"
+                                                            onClick={handleClickShowId}
+                                                            onMouseDown={handleMouseDownId}
+                                                            edge="end"
+                                                            size="large"
+                                                        >
+                                                            {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+                                                        </IconButton>  
+                                                    </Stack>
                                             }
                                         </Grid>
                                     </Grid>
diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
index a1b3d7f..24f7acf 100644
--- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
+++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
@@ -1,7 +1,9 @@
 // material-ui
 import {
     Grid, Button, Typography,
-    FormHelperText
+    FormHelperText,
+    Stack,
+    IconButton
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -20,6 +22,7 @@ import {notifySaveSuccess,} from 'utils/CommonFunction';
 import {FormattedMessage, useIntl} from "react-intl";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -30,6 +33,15 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
     const [editMode, setEditMode] = useState(false);
     const [onReady, setOnReady] = useState(false);
     const [errorMsg, setErrorMsg] = useState("");
+    const [showId, setshowId] = useState(false);
+
+    const handleClickShowId = () => {
+        setshowId(!showId);
+    };
+
+    const handleMouseDownId = (event) => {
+        event.preventDefault();
+    };
 
     useEffect(() => {
         if (Object.keys(formData).length > 0) {
@@ -226,39 +238,74 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                     <Grid item xs={12} sm={12} md={9} lg={6}>
                                         <Grid container>
                                             {formik.values.idDocType === "HKID" ?
-                                                <>
-                                                    <Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
-                                                        {FieldUtils.initField({
-                                                            valueName: "identification",
-                                                            disabled: true,
-                                                            form: formik,
-                                                            placeholder: intl.formatMessage({id: 'idDocNumber'}),
-                                                            inputProps: {
-                                                                maxLength: 7,
-                                                                onKeyDown: (e) => {
-                                                                    if (e.key === 'Enter') {
-                                                                        e.preventDefault();
-                                                                    }
-                                                                },
-                                                            }
-                                                        })}
+                                                    // <>
+                                                    //     <Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
+                                                    //         {FieldUtils.initField({
+                                                    //             valueName: "identification",
+                                                    //             disabled: true,
+                                                    //             form: formik,
+                                                    //             placeholder: intl.formatMessage({id: 'idDocNumber'}),
+                                                    //             inputProps: {
+                                                    //                 maxLength: 7,
+                                                    //                 onKeyDown: (e) => {
+                                                    //                     if (e.key === 'Enter') {
+                                                    //                         e.preventDefault();
+                                                    //                     }
+                                                    //                 },
+                                                    //             }
+                                                    //         })}
 
-                                                    </Grid>
-                                                    <Grid item xs={2} sm={2} md={2} lg={2} style={{minWidth:50}}>
-                                                        {FieldUtils.initField({
-                                                            valueName: "checkDigit",
-                                                            disabled: true,
-                                                            form: formik,
-                                                        })}
-                                                    </Grid>
-                                                </> :
-                                                <Grid item xs={12} sm={6} md={6} lg={12}>
-                                                    {FieldUtils.initField({
-                                                        valueName: "identification",
-                                                        disabled: true,
-                                                        form: formik
-                                                    })}
-                                                </Grid>
+                                                    //     </Grid>
+                                                    //     <Grid item xs={2} sm={2} md={2} lg={2} style={{minWidth:40}}>
+                                                    //         {FieldUtils.initField({
+                                                    //             valueName: "checkDigit",
+                                                    //             disabled: true,
+                                                    //             form: formik,
+                                                    //         })}
+                                                    //     </Grid>
+                                                    // </> 
+                                                    <Stack direction="row">
+                                                        <Typography variant="h5" mt={1}>
+                                                            {formik.values.identification.slice(0, 4)}
+                                                        </Typography>
+                                                        <Typography variant="h5"mt={1}>
+                                                            {showId ?formik.values.identification.slice(4):"****"}{showId ? '(' + formik.values.checkDigit + ')' :null}
+                                                        </Typography>
+                                                        <IconButton
+                                                            aria-label="toggle id visibility"
+                                                            onClick={handleClickShowId}
+                                                            onMouseDown={handleMouseDownId}
+                                                            edge="end"
+                                                            size="large"
+                                                        >
+                                                            {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+                                                        </IconButton>  
+                                                    </Stack>
+                                                :
+                                                // <Grid item xs={10} sm={4} md={4} lg={10}>
+                                                //     {FieldUtils.initField({
+                                                //         valueName: "identification",
+                                                //         disabled: true,
+                                                //         form: formik
+                                                //     })}
+                                                // </Grid>
+                                                <Stack direction="row">
+                                                    <Typography variant="h5" mt={1}>
+                                                        {formik.values.identification.slice(0, 4)}
+                                                    </Typography>
+                                                    <Typography variant="h5"mt={1}>
+                                                        {showId ?formik.values.identification.slice(4):"****"}
+                                                    </Typography>
+                                                    <IconButton
+                                                        aria-label="toggle id visibility"
+                                                        onClick={handleClickShowId}
+                                                        onMouseDown={handleMouseDownId}
+                                                        edge="end"
+                                                        size="large"
+                                                    >
+                                                        {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+                                                    </IconButton>  
+                                                </Stack>
                                             }
                                         </Grid>
                                     </Grid>
diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index 580a982..b1a3855 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -59,6 +59,7 @@ const CustomFormWizard = (props) => {
     const [level, setLevel] = useState();
     const [showPassword, setShowPassword] = useState(false);
     const [showConfirmPassword, setshowConfirmPassword] = useState(false);
+    const [showId, setshowId] = useState(false);
     const [fileList, setFileList] = useState([]);
     const [fileListData, setFileListData] = useState([]);
     const [checkUpload, setCheckUpload] = useState(false);
@@ -70,6 +71,7 @@ const CustomFormWizard = (props) => {
     const handleClickShowPassword = () => {
         setShowPassword(!showPassword);
     };
+
     const handleClickShowConfirmPassword = () => {
         setshowConfirmPassword(!showConfirmPassword);
     };
@@ -78,6 +80,14 @@ const CustomFormWizard = (props) => {
         event.preventDefault();
     };
 
+    const handleClickShowId = () => {
+        setshowId(!showId);
+    };
+
+    const handleMouseDownId = (event) => {
+        event.preventDefault();
+    };
+
     const changePassword = (value) => {
         const temp = strengthIndicator(value);
         setLevel(strengthColorChi(temp));
@@ -969,7 +979,7 @@ const CustomFormWizard = (props) => {
                                                             inputProps={{
                                                                 maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18,
                                                                 onKeyDown: (e) => {
-                                                                    console.log(e)
+                                                                    // console.log(e)
                                                                     if (e.key === 'Enter') {
                                                                         e.preventDefault();
                                                                     }
@@ -1683,7 +1693,7 @@ const CustomFormWizard = (props) => {
                                 </Grid> */}
 
                                 <Grid item xs={12} md={6} >
-                                    <Stack spacing={1} direction="row">
+                                    <Stack spacing={1} direction="row" >
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                             <FormattedMessage id="idDocType" />:
                                         </Typography>
@@ -1694,13 +1704,29 @@ const CustomFormWizard = (props) => {
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={6}>
-                                    <Stack spacing={1} direction="row">
-                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
+                                    <Stack direction="row" >
+                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} sx={{mr:1}}>
                                             <FormattedMessage id="idDocNumber" />:
                                         </Typography>
-                                        <Typography variant="pnspsFormHeader" id="idNo-login">
-                                            {formik.values.idNo} {selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null}
+                                        <Typography variant="pnspsFormHeader" id="idNo-f4-login">
+                                            {formik.values.idNo.slice(0, 4)}
+                                        </Typography>
+                                
+                                        <Typography variant="pnspsFormHeader" id="idNo-exf4-login" 
+                                            type={showId ? "text" : "password"}
+                                        >
+                                            {showId ?formik.values.idNo.slice(4):"****"}{showId ?selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null:null}
                                         </Typography>
+                                    
+                                        <IconButton
+                                            aria-label="toggle id visibility"
+                                            onClick={handleClickShowId}
+                                            onMouseDown={handleMouseDownId}
+                                            edge="end"
+                                            size="medium"
+                                        >
+                                            {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+                                        </IconButton>                                                               
                                     </Stack>
                                 </Grid>
 
diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
index 61360d3..ad55cc4 100644
--- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
+++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
@@ -32,6 +32,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
 import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 
 import { Link } from 'react-router-dom';
 import * as HttpUtils from "../../../utils/HttpUtils";
@@ -67,7 +68,8 @@ const CustomFormWizard = (props) => {
 
     const address4ComboList = ComboData.district;
     const address5ComboList = ComboData.country;
-
+    const [showId, setshowId] = useState(false);
+    const [showComId, setshowComId] = useState(false);
 
     useEffect(() => {
         location.state?.responseData ?? {}
@@ -76,6 +78,22 @@ const CustomFormWizard = (props) => {
         responseToData();
     }, []);
 
+    const handleClickShowId = () => {
+        setshowId(!showId);
+    };
+
+    const handleMouseDownId = (event) => {
+        event.preventDefault();
+    };
+   
+    const handleClickShowComId = () => {
+        setshowComId(!showId);
+    };
+
+    const handleMouseDownComId = (event) => {
+        event.preventDefault();
+    };
+
     useEffect(() => {
         setDistrictErrStr("");
         if (selectedAddress5?.type === "hongKong") {
@@ -155,7 +173,7 @@ const CustomFormWizard = (props) => {
             add += str.trim() ? str.trim() + ", " : "";
         });
         add = add.trim();
-        if (add.slice(- 1) == ",") {
+        if (add?.slice(- 1) == ",") {
             add = add.substring(0, add.length - 1);
         }
         return add;
@@ -424,11 +442,27 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} md={12} >
                                     <Grid container sx={{ mb: 1 }}>
-                                        <Stack spacing={1}>
+                                        <Stack direction="row">
                                             <InputLabel htmlFor="idDocType-signup">
+                                                <Typography variant="h5" sx={{mr:1}}>
+                                                    <FormattedMessage id="HKIDcard" />: 
+                                                    {/* {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} */}
+                                                </Typography>
+                                                <Typography variant="h5">
+                                                    {iAmSmartData?.idNo?.slice(0, 4)}
+                                                </Typography>
                                                 <Typography variant="h5">
-                                                <FormattedMessage id="HKIDcard" />: {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"}
+                                                    {showId ?iAmSmartData?.idNo?.slice(4):"****"}{showId ? '(' + iAmSmartData.checkDigit + ')' :null}
                                                 </Typography>
+                                                <IconButton
+                                                    aria-label="toggle id visibility"
+                                                    onClick={handleClickShowId}
+                                                    onMouseDown={handleMouseDownId}
+                                                    edge="end"
+                                                    size="medium"
+                                                >
+                                                    {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+                                                </IconButton>  
                                             </InputLabel>
                                         </Stack>
                                     </Grid>
@@ -933,13 +967,27 @@ const CustomFormWizard = (props) => {
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12} >
-                                    <Stack spacing={1}>
-                                        <Typography variant="h5" color={theme.palette.grey[600]}>
+                                    <Stack direction="row">
+                                        <Typography variant="h5" color={theme.palette.grey[600]} sx={{mr:1}}>
                                             <FormattedMessage id="userIdDoc" />
                                         </Typography>
-                                        <Typography variant="h5" name="preview-idDocType">
-                                            {formik.values.idNo + "(" + formik.values.checkDigit + ")"}
+                                        <Typography variant="h5" name="preview-idDocType-1">
+                                            {formik?.values?.idNo?.slice(0, 4)}
+                                            {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
+                                        </Typography>
+                                        <Typography variant="h5" name="preview-idDocType-2">
+                                            {showComId ?formik?.values?.idNo?.slice(4):"****"}{showComId ? '(' + formik.values.checkDigit + ')' : null}
+                                            {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                         </Typography>
+                                        <IconButton
+                                            aria-label="toggle id visibility"
+                                            onClick={handleClickShowComId}
+                                            onMouseDown={handleMouseDownComId}
+                                            edge="end"
+                                            size="medium"
+                                        >
+                                            {showComId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+                                        </IconButton>   
                                     </Stack>
                                 </Grid>
 
diff --git a/src/pages/iAmSmart/AuthCallback/index.js b/src/pages/iAmSmart/AuthCallback/index.js
index 39772ce..ac6c156 100644
--- a/src/pages/iAmSmart/AuthCallback/index.js
+++ b/src/pages/iAmSmart/AuthCallback/index.js
@@ -70,16 +70,22 @@ const Index = () => {
                         navigate('/dashboard');
                 },
                 onFail: (response)=>{
-                    console.log("Fail");
+                    console.log("onFail");
                     console.log(response);
                     window.location.assign("/iamsmart/loginFail");
                 },
                 onError:(error)=>{
+                    console.log("onError");
                     console.log(error);
-                    window.location.assign("/iamsmart/loginFail");
+                    if(error?.response?.data?.exception == "msg: please verify email."){
+                        window.location.assign("/iamsmart/notverify");
+                    }else{
+                        window.location.assign("/iamsmart/loginFail");
+                    }
                 }
             });
         }else{
+            console.log("Fail");
             window.location.assign("/iamsmart/loginFail");
         }
     }
diff --git a/src/pages/iAmSmart/DirectLoginCallback/index.js b/src/pages/iAmSmart/DirectLoginCallback/index.js
index 788d3ff..0ee31d8 100644
--- a/src/pages/iAmSmart/DirectLoginCallback/index.js
+++ b/src/pages/iAmSmart/DirectLoginCallback/index.js
@@ -57,8 +57,13 @@ const Index = () => {
                     window.location.assign("/iamsmart/loginFail");
                 },
                 onError:(error)=>{
+                    console.log("onError");
                     console.log(error);
-                    window.location.assign("/iamsmart/loginFail");
+                    if(error?.response?.data?.exception == "msg: please verify email."){
+                        window.location.assign("/iamsmart/notverify");
+                    }else{
+                        window.location.assign("/iamsmart/loginFail");
+                    }
                 }
             });
         }else{
diff --git a/src/pages/iAmSmart/FailCallback/index.js b/src/pages/iAmSmart/FailCallback/index.js
index 0fe09dc..1d5da8f 100644
--- a/src/pages/iAmSmart/FailCallback/index.js
+++ b/src/pages/iAmSmart/FailCallback/index.js
@@ -6,7 +6,7 @@ import {
 } from '@mui/material';
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
-
+import { FormattedMessage } from "react-intl";
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
 
@@ -30,32 +30,42 @@ const Index = () => {
                 </Grid>
             </Grid>
             :
-      
-                <Grid container sx={{ height: '100%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                    <Grid item xs={12} md={12} >
-                        <Grid container justifyContent="flex-start" alignItems="center" >
-                            <center>
-                                <Grid item xs={12} md={12} >
-
-                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                        登入失敗，請重試。
-                                    </Typography>
-                                    <Button
-                                        component="span"
-                                        variant="contained"
-                                        size="large"
-                                        sx={{ m: 4 }}
-                                        onClick={() => {
-                                            navigate("/login");
-                                        }}
-                                    >返回登入</Button>
-
-                                </Grid>
-                            </center>
-                        </Grid>
+
+            <Grid container sx={{ height: '100%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                <Grid item xs={12} md={12} >
+                    <Grid container justifyContent="flex-start" alignItems="center" >
+                        <center>
+                            <Grid item xs={12} md={12} >
+
+                                <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                    <FormattedMessage id="loginErrorMessage6" />
+                                </Typography>
+                                <Button
+                                    component="span"
+                                    variant="contained"
+                                    size="large"
+                                    sx={{ m: 4 }}
+                                    onClick={() => {
+                                        navigate("/login");
+                                    }}
+                                ><FormattedMessage id="backToLogin" /></Button>
+
+                                <Button
+                                    component="span"
+                                    variant="contained"
+                                    size="large"
+                                    sx={{ m: 4 }}
+                                    onClick={() => {
+                                        navigate("/register");
+                                    }}
+                                ><FormattedMessage id="goRegister" /></Button>
+
+                            </Grid>
+                        </center>
                     </Grid>
-                    {/*row 2*/}
-                </Grid >
+                </Grid>
+                {/*row 2*/}
+            </Grid >
 
     );
 };
diff --git a/src/pages/iAmSmart/FailCallback_VerifyMail/index.js b/src/pages/iAmSmart/FailCallback_VerifyMail/index.js
new file mode 100644
index 0000000..5c4f1f5
--- /dev/null
+++ b/src/pages/iAmSmart/FailCallback_VerifyMail/index.js
@@ -0,0 +1,69 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Button
+} from '@mui/material';
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const Index = () => {
+
+    const navigate = useNavigate()
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, []);
+
+    return (
+        !onReady ?
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
+            :
+
+            <Grid container sx={{ height: '100%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                <Grid item xs={12} md={12} >
+                    <Grid container justifyContent="flex-start" alignItems="center" >
+                        <center>
+                            <Grid item xs={12} md={12} >
+                                <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                    <FormattedMessage id="loginErrorMessage3" />
+                                </Typography>
+                            </Grid>
+                            <Grid item xs={12} md={12} >
+                                <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                    <FormattedMessage id="sentSecurityCode2" />
+                                </Typography>
+                            </Grid>
+                            <Grid item xs={12} md={12} >
+                                <Button
+                                    component="span"
+                                    variant="contained"
+                                    size="large"
+                                    sx={{ m: 4 }}
+                                    onClick={() => {
+                                        navigate("/login");
+                                    }}
+                                ><FormattedMessage id="backToLogin" /></Button>
+                            </Grid>
+
+                        </center>
+                    </Grid>
+                </Grid>
+                {/*row 2*/}
+            </Grid >
+
+    );
+};
+
+export default Index;
\ No newline at end of file
diff --git a/src/routes/LoginRoutes.js b/src/routes/LoginRoutes.js
index 103ae75..cd36718 100644
--- a/src/routes/LoginRoutes.js
+++ b/src/routes/LoginRoutes.js
@@ -26,6 +26,7 @@ const ForgotUsername_Success = Loadable(lazy(() => import('pages/authentication/
 const IAmSmart_DirectLoginCallback = Loadable(lazy(() => import('pages/iAmSmart/DirectLoginCallback')));
 //const IAmSmart_FallCallback = Loadable(lazy(() => import('pages/iAmSmart/FallCallback')));
 const IAmSmart_FailCallback = Loadable(lazy(() => import('pages/iAmSmart/FailCallback')));
+const FailCallback_VerifyMail = Loadable(lazy(() => import('pages/iAmSmart/FailCallback_VerifyMail')));
 const IAmSmart_SuccessCallback = Loadable(lazy(() => import('pages/iAmSmart/SuccessCallback')));
 const IAmSmart_AuthCallback = Loadable(lazy(() => import('pages/iAmSmart/AuthCallback')));
 const IAmSmart_RegistryCallback = Loadable(lazy(() => import('pages/iAmSmart/RegistryCallback')));
@@ -73,6 +74,10 @@ const LoginRoutes = {
       path: 'iamsmart/loginfallback',
       element: <IAmSmart_FailCallback/>
     },
+    {
+      path: 'iamsmart/notverify',
+      element: <FailCallback_VerifyMail/>
+    },
     {
       path: 'iamsmart/authcallback',
       element: <IAmSmart_AuthCallback/>
diff --git a/src/translations/en.json b/src/translations/en.json
index 56bfcd9..09c8444 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -84,6 +84,7 @@
   "continue": "Continue",
   "submit": "Submit",
   "backToLogin": "Return to login page",
+  "goRegister": "Register an account",
   "registerSubmitted": "Account application submitted successfully.",
   "registerFail": "Application failed, please try again later",
   "iAmSmartNoIdNoMsg": "Invalid information, please return to the registration page.",
@@ -125,6 +126,7 @@
   "loginErrorMessage3":"Account has not been Verified",
   "loginErrorMessage4":"System Connection Failed",
   "loginErrorMessage5":"Incorrect Username or Password",
+  "loginErrorMessage6":"Login fail, please try again",
 
   "newPassword": "New Password",
   "setNewPassword": "Please enter new password",
@@ -323,9 +325,11 @@
   "payConfirm": "Confirm payment",
   "payCancel": "Cancel payment",
   "payTotalDeatail": "Total Payment Amount",
+  "payDeatail": "Total Amount",
   "payTotal": "Total",
   "payDetail": "Payment Details",
   "payMethod": "Payment method",
+  "epayMethod": " e-Payment Method",
   "selectPaymentMethod": "Please select a payment method",
   "payReceipt": "Payment receipt",
   "contactPerson": "Contact Person",
@@ -393,9 +397,9 @@
   "singleCol":"Single Column",
   "doubleCol":"Double Column",
 
-  "transactionNo": "Transaction number",
-  "transactionDate": "Transaction Date",
-  "transactionTime": "Transaction Time",
+  "paymentNo": "Payment No.",
+  "paymentDate": "Payment Date",
+  "paymentTime": "Payment Time",
   "paymentRefCode": "Payment Reference Number",
 
   "paymentInfoRecord": "Payment Notice Record",
diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json
index 389b91c..dca0c9d 100644
--- a/src/translations/zh-CN.json
+++ b/src/translations/zh-CN.json
@@ -83,6 +83,7 @@
   "continue": "继续",
   "submit": "提交",
   "backToLogin": "返回登入页面",
+  "goRegister": "帐户申请",
   "registerSubmitted": "帐户申请已成功提交。",
   "registerFail": "申请失败，请稍后尝试",
   "iAmSmartNoIdNoMsg": "无效资料，请返回注册页面。",
@@ -123,6 +124,7 @@
   "loginErrorMessage3":"帐户尚未验证",
   "loginErrorMessage4":"系统连接失败",
   "loginErrorMessage5":"用户名或密码错误",
+  "loginErrorMessage6":"登入失败，请重试",
 
   "newPassword": "新密码",
   "setNewPassword": "请输入新密码",
@@ -316,9 +318,11 @@
   "payConfirm": "确认付款",
   "payCancel": "取消付款",
   "payTotalDeatail": "付款总额",
+  "payDeatail": "总额",
   "payTotal": "付款总额",
   "payDetail": "付款详情",
   "payMethod": "付款方式",
+  "epayMethod": "电子付款方法",
   "selectPaymentMethod": "请选择付款方式",
   "payReceipt": "付款收据",
   "contactPerson": "联络人",
@@ -386,9 +390,9 @@
   "singleCol":"一格位",
   "doubleCol":"二格位",
 
-  "transactionNo": "交易号码",
-  "transactionDate": "交易日期",
-  "transactionTime": "交易时间",
+  "paymentNo": "付款编号",
+  "paymentDate": "付款日期",
+  "paymentTime": "付款时间",
   "paymentRefCode": "付款参考号码",
 
   "paymentInfoRecord": "缴款通知记录",
diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json
index 0a87b55..1d3572e 100644
--- a/src/translations/zh-HK.json
+++ b/src/translations/zh-HK.json
@@ -83,6 +83,7 @@
   "continue": "繼續",
   "submit": "提交",
   "backToLogin": "返回登入頁面",
+  "goRegister": "帳戶申請",
   "registerSubmitted": "帳戶申請已成功提交。",
   "registerFail": "申請失敗，請稍後嘗試",
   "iAmSmartNoIdNoMsg": "無效資料，請返回注冊頁面。",
@@ -123,6 +124,7 @@
   "loginErrorMessage3":"帳戶尚未驗證",
   "loginErrorMessage4":"系統連接失敗",
   "loginErrorMessage5":"用戶名或密碼錯誤",
+  "loginErrorMessage6":"登入失敗，請重試",
 
   "newPassword": "新密碼",
   "setNewPassword": "請輸入新密碼",
@@ -319,9 +321,11 @@
   "payConfirm": "確認付款",
   "payCancel": "取消付款",
   "payTotalDeatail": "付款總額",
+  "payDeatail": "總額",
   "payTotal": "付款總額",
   "payDetail": "付款詳情",
   "payMethod": "付款方式",
+  "epayMethod": "電子付款方法",
   "selectPaymentMethod": "請選擇付款方式",
   "payReceipt": "付款收據",
   "contactPerson": "聯絡人",
@@ -389,9 +393,9 @@
   "singleCol":"一格位",
   "doubleCol":"二格位",
 
-  "transactionNo": "交易號碼",
-  "transactionDate": "交易日期",
-  "transactionTime": "交易時間",
+  "paymentNo": "付款編號",
+  "paymentDate": "付款日期",
+  "paymentTime": "付款時間",
   "paymentRefCode": "付款參考號碼",
 
   "paymentInfoRecord": "繳款通知記錄",
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index 5aeb291..a771bc9 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -161,7 +161,8 @@ export const PAYMENT_STATUS_API = paymentPath+'/api/payment/status/';//GET
 
 export const DEMAND_NOTE_PREVIEW = apiPath+'/demandNote/preview';//GET
 export const DEMAND_NOTE_CREATE = apiPath+'/demandNote/create';//POST
-export const DEMAND_NOTE_LIST = apiPath+'/demandNote/list';//GET
+export const DEMAND_NOTE_LIST = apiPath+'/demandNote/list';//GET pub
+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