diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index 0e7157d..6b107ee 100644
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -138,7 +138,7 @@ function Header(props) {
           <Link className="setting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Settings</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
           <ul className='dropdown'>
             <li>
-              <Link className="userProfileGld" to='/user/profile'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users Profile</Typography></Link>
+              <Link className="userProfileGld" to='/user/profile'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>My Profile</Typography></Link>
             </li>
             <li>
               <Link className="emailTemplate" to='/emailTemplate'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Email Template</Typography></Link>
@@ -248,6 +248,7 @@ function Header(props) {
                 <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
                   <FormattedMessage id="setting" />
                 </Typography>
+                <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
               </Link>
               <ul className='dropdown' style={{ width: "max-content" }}>
                 <li>
@@ -266,6 +267,7 @@ function Header(props) {
                 <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
                   <FormattedMessage id="setting" />
                 </Typography>
+                <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
               </Link>
               <ul className='dropdown' style={{ width: "max-content" }}>
                 <li>
diff --git a/src/pages/DemandNote/Search/DataGrid.js b/src/pages/DemandNote/Search/DataGrid.js
index 43498b2..f12a87c 100644
--- a/src/pages/DemandNote/Search/DataGrid.js
+++ b/src/pages/DemandNote/Search/DataGrid.js
@@ -11,7 +11,6 @@ import DownloadIcon from '@mui/icons-material/Download';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
 import * as StatusUtils from "utils/statusUtils/DnStatus";
-import * as PublicNoteStatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 import { notifyDownloadSuccess } from 'utils/CommonFunction';
@@ -200,7 +199,7 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
         },
         {
             field: 'cm',
-            headerName: 'Length(cm)',
+            headerName: 'Length',
             width: 100,
             renderCell: (params) => {
                 return (<>
@@ -213,6 +212,7 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
             field: 'amount',
             headerName: 'Amount($)',
             width: 100,
+            align: 'right',
             valueGetter: (params) => {
                 return FormatUtils.currencyFormat(params?.value);
             }
@@ -228,18 +228,13 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
         {
             id: 'issueDate',
             field: 'issueDate',
-            headerName: 'DN Issue/Due Date',
-            width: 175,
-            valueGetter: (params) => {
-                return DateUtils.dateStr(params?.value);
-            }
-        },
-        {
-            field: 'sentDate',
-            headerName: 'DN Sent Date',
-            width: 175,
-            valueGetter: (params) => {
-                return params?.value ? DateUtils.datetimeStr(params?.value) + " - " + params.row.sentBy : "";
+            headerName: 'Due Date / Sent Date',
+            width: 250,
+            renderCell: (params) => {
+                return (<>
+                    {DateUtils.dateStr(params?.value)}
+                    {params.row.sentDate ? "<br />" + DateUtils.datetimeStr(params.row.sentDate) + " - " + params.row.sentBy : " / To be sent"}
+                </>);
             }
         },
         {
@@ -253,14 +248,6 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                 return <Button onClick={onDownloadClick(params)}><u>{params.row.filename}</u></Button>;
             },
         },
-        {
-            field: 'appStatus',
-            headerName: 'App Status',
-            width: 175,
-            renderCell: (params) => {
-                return [PublicNoteStatusUtils.getStatusByTextEng(params?.value, true)]
-            },
-        },
         {
             field: 'status',
             headerName: 'Status',
diff --git a/src/pages/Organization/DetailPage/OrganizationCard.js b/src/pages/Organization/DetailPage/OrganizationCard.js
index 344ecff..3a4026f 100644
--- a/src/pages/Organization/DetailPage/OrganizationCard.js
+++ b/src/pages/Organization/DetailPage/OrganizationCard.js
@@ -2,6 +2,7 @@
 import {
     Grid, Button, Checkbox, FormControlLabel, Typography,
     Dialog, DialogTitle, DialogContent, DialogActions,
+    FormHelperText
 } from '@mui/material';
 // import { FormControlLabel } from '@material-ui/core';
 import MainCard from "components/MainCard";
@@ -33,6 +34,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
     const [editMode, setEditMode] = useState(false);
     const [createMode, setCreateMode] = useState(false);
     const [onReady, setOnReady] = useState(false);
+    const [errorMsg, setErrorMsg] = useState("");
 
     useEffect(() => {
         //if state data are ready and assign to different field
@@ -71,43 +73,50 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                 }
             }),
         }),
-        onSubmit: vaule => {
-            console.log(vaule)
-            HttpUtils.post({
-                url: UrlUtils.POST_ORG_SAVE_PATH,
-                params: {
-                    id: id > 0 ? id : null,
-                    enCompanyName: vaule.enCompanyName,
-                    chCompanyName: vaule.chCompanyName,
-                    brNo: vaule.brNo,
-                    brExpiryDate: vaule.brExpiryDate,
-                    enCompanyNameTemp: vaule.enCompanyNameTemp,
-                    chCompanyNameTemp: vaule.chCompanyNameTemp,
-                    brExpiryDateTemp: vaule.brExpiryDateTemp,
-                    contactPerson: vaule.contactPerson,
-                    contactTel: {
-                        countryCode: vaule.tel_countryCode,
-                        phoneNumber: vaule.phoneNumber
-                    },
-                    faxNo: {
-                        countryCode: vaule.fax_countryCode,
-                        faxNumber: vaule.faxNumber
-                    },
-                    addressTemp: {
-                        country: vaule.country.id,
-                        district: vaule.district.id,
-                        addressLine1: vaule.addressLine1,
-                        addressLine2: vaule.addressLine2,
-                        addressLine3: vaule.addressLine3,
-                    },
-                    //creditor: vaule.creditor,
-                },
-                onSuccess: function () {
-                    notifySaveSuccess()
-                    loadDataFun();
-                    setEditMode(false);
-                }
-            });
+        onSubmit: values => {
+            if (values.country==null){
+                setErrorMsg(intl.formatMessage({id: 'pleaseFillInCountry'}))
+            } else {
+                if (values.country.key ==1 && values.district == null){
+                    setErrorMsg(intl.formatMessage({id: 'pleaseFillInDistrict'}))
+                } else {
+                    HttpUtils.post({
+                        url: UrlUtils.POST_ORG_SAVE_PATH,
+                        params: {
+                            id: id > 0 ? id : null,
+                            enCompanyName: values.enCompanyName,
+                            chCompanyName: values.chCompanyName,
+                            brNo: values.brNo,
+                            brExpiryDate: values.brExpiryDate,
+                            enCompanyNameTemp: values.enCompanyNameTemp,
+                            chCompanyNameTemp: values.chCompanyNameTemp,
+                            brExpiryDateTemp: values.brExpiryDateTemp,
+                            contactPerson: values.contactPerson,
+                            contactTel: {
+                                countryCode: values.tel_countryCode,
+                                phoneNumber: values.phoneNumber
+                            },
+                            faxNo: {
+                                countryCode: values.fax_countryCode,
+                                faxNumber: values.faxNumber
+                            },
+                            addressTemp: {
+                                country: values.country.id,
+                                district: values.district?.id,
+                                addressLine1: values.addressLine1,
+                                addressLine2: values.addressLine2,
+                                addressLine3: values.addressLine3,
+                            },
+                            //creditor: values.creditor,
+                        },
+                        onSuccess: function () {
+                            notifySaveSuccess()
+                            loadDataFun();
+                            setEditMode(false);
+                        }
+                    });
+                }   
+            }
         }
     });
 
@@ -263,6 +272,13 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 Organization Details
                             </Typography>
                         </Grid>
+                        <Grid item xs={12}>
+                            <FormHelperText error id="helper-text-address1-signup">
+                                <Typography variant="errorMessage1">
+                                    {errorMsg}
+                                </Typography>
+                            </FormHelperText>
+                        </Grid>
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
                                 label: FieldUtils.notNullFieldLabel("BR No.:"),
diff --git a/src/pages/Organization/DetailPage/OrganizationPubCard.js b/src/pages/Organization/DetailPage/OrganizationPubCard.js
index 32ec1bd..3487a05 100644
--- a/src/pages/Organization/DetailPage/OrganizationPubCard.js
+++ b/src/pages/Organization/DetailPage/OrganizationPubCard.js
@@ -4,6 +4,7 @@ import {
     // Checkbox, FormControlLabel,
     Typography,
     Dialog, DialogTitle, DialogContent, DialogActions,
+    FormHelperText
 } from '@mui/material';
 // import { FormControlLabel } from '@material-ui/core';
 import MainCard from "components/MainCard";
@@ -35,6 +36,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
     const [editMode, setEditMode] = useState(false);
     const [createMode, setCreateMode] = useState(false);
     const [onReady, setOnReady] = useState(false);
+    const [errorMsg, setErrorMsg] = useState("");
 
     useEffect(() => {
         //if state data are ready and assign to different field
@@ -58,31 +60,38 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
             tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
             phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requiredValidNumber'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
         }),
-        onSubmit: vaule => {
-            console.log(vaule)
-            HttpUtils.post({
-                url: UrlUtils.POST_PUB_ORG_SAVE_PATH,
-                params: {
-                    contactPerson: vaule.contactPerson,
-                    contactTel: {
-                        countryCode: vaule.tel_countryCode,
-                        phoneNumber: vaule.phoneNumber
-                    },
-                    addressTemp: {
-                        country: vaule.country.id,
-                        district: vaule.district.id,
-                        addressLine1: vaule.addressLine1,
-                        addressLine2: vaule.addressLine2,
-                        addressLine3: vaule.addressLine3,
-                    },
-                    //creditor: vaule.creditor,
-                },
-                onSuccess: function () {
-                    notifySaveSuccess()
-                    loadDataFun();
-                    setEditMode(false);
+        onSubmit: values => {
+            if (values.country==null){
+                setErrorMsg(intl.formatMessage({id: 'pleaseFillInCountry'}))
+            } else {
+                if (values.country.key ==1 && values.district == null){
+                    setErrorMsg(intl.formatMessage({id: 'pleaseFillInDistrict'}))
+                } else {
+                    HttpUtils.post({
+                        url: UrlUtils.POST_PUB_ORG_SAVE_PATH,
+                        params: {
+                            contactPerson: values.contactPerson,
+                            contactTel: {
+                                countryCode: values.tel_countryCode,
+                                phoneNumber: values.phoneNumber
+                            },
+                            addressTemp: {
+                                country: values.country.id,
+                                district: values.district?.id,
+                                addressLine1: values.addressLine1,
+                                addressLine2: values.addressLine2,
+                                addressLine3: values.addressLine3,
+                            },
+                            //creditor: values.creditor,
+                        },
+                        onSuccess: function () {
+                            notifySaveSuccess()
+                            loadDataFun();
+                            setEditMode(false);
+                        }
+                    });
                 }
-            });
+            }
         }
     });
 
@@ -193,6 +202,13 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 <FormattedMessage id="organizationDetails" />
                             </Typography>
                         </Grid>
+                        <Grid item xs={12}>
+                            <FormHelperText error id="helper-text-address1-signup">
+                                <Typography variant="errorMessage1">
+                                    {errorMsg}
+                                </Typography>
+                            </FormHelperText>
+                        </Grid>
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
                                 label: intl.formatMessage({id: 'brNo'}) + ":",
diff --git a/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js b/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js
index ac1d529..c9fa273 100644
--- a/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js
+++ b/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js
@@ -2,15 +2,16 @@
 import {
     Grid, Button, Typography,
     Dialog, DialogTitle, DialogContent, DialogActions,
+    FormHelperText
 } from '@mui/material';
-import MainCard from "../../../components/MainCard";
+import MainCard from "components/MainCard";
 import * as React from "react";
 import * as yup from 'yup';
 import { useEffect, useState } from "react";
-import * as HttpUtils from '../../../utils/HttpUtils';
-import * as UrlUtils from "../../../utils/ApiPathConst";
-import * as FieldUtils from "../../../utils/FieldUtils";
-import * as ComboData from "../../../utils/ComboData";
+import * as HttpUtils from 'utils/HttpUtils';
+import * as UrlUtils from "utils/ApiPathConst";
+import * as FieldUtils from "utils/FieldUtils";
+import * as ComboData from "utils/ComboData";
 import { useNavigate } from "react-router-dom";
 import { useFormik } from 'formik';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
@@ -29,6 +30,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
     const [onReady, setOnReady] = useState(false);
     const [isFailPopUp, setIsFailPopUp] = useState(false);
     const [failText, setFailText] = useState("");
+    const [errorMsg, setErrorMsg] = useState("");
 
     useEffect(() => {
         //if state data are ready and assign to different field
@@ -57,7 +59,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
             faxNumber: yup.string().min(8).nullable(),
             brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
             brNo: yup.string().max(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'})))
-                .test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`)), function (value) {
+                .test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) {
                 var brNo_pattern = /[0-9]{8}/
                 if (value !== undefined) {
                     if (value.match(brNo_pattern)) {
@@ -69,45 +71,53 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
             }),
         }),
         onSubmit: values => {
-            HttpUtils.post({
-                url: UrlUtils.POST_ORG_SAVE_PATH,
-                params: {
-                    id: null,
-                    primaryUserId: userId,
-                    enCompanyName: values.enCompanyName,
-                    chCompanyName: values.chCompanyName,
-                    brNo: values.brNo,
-                    brExpiryDate: values.brExpiryDate,
-                    enCompanyNameTemp: values.enCompanyNameTemp,
-                    chCompanyNameTemp: values.chCompanyNameTemp,
-                    brExpiryDateTemp: values.brExpiryDateTemp,
-                    contactPerson: values.contactPerson,
-                    contactTel: {
-                        countryCode: values.tel_countryCode,
-                        phoneNumber: values.phoneNumber
-                    },
-                    faxNo: {
-                        countryCode: values.fax_countryCode,
-                        faxNumber: values.faxNumber
-                    },
-                    addressTemp: {
-                        country: values.country.key,
-                        district: values.district.key,
-                        addressLine1: values.addressLine1,
-                        addressLine2: values.addressLine2,
-                        addressLine3: values.addressLine3,
-                    }
-                },
-                onSuccess: function (responseData) {
-                    if(responseData.msg){
-                        setFailText(responseData.msg);
-                        setIsFailPopUp(true);
-                        return;
-                    }
-                    navigate('/org/' + responseData.id);
-                    notifyCreateSuccess()
+            if (values.country==null){
+                setErrorMsg(intl.formatMessage({id: 'pleaseFillInCountry'}))
+            } else {
+                if (values.country.key ==1 && values.district == null){
+                    setErrorMsg(intl.formatMessage({id: 'pleaseFillInDistrict'}))
+                } else {
+                    HttpUtils.post({
+                        url: UrlUtils.POST_ORG_SAVE_PATH,
+                        params: {
+                            id: null,
+                            primaryUserId: userId,
+                            enCompanyName: values.enCompanyName,
+                            chCompanyName: values.chCompanyName,
+                            brNo: values.brNo,
+                            brExpiryDate: values.brExpiryDate,
+                            enCompanyNameTemp: values.enCompanyNameTemp,
+                            chCompanyNameTemp: values.chCompanyNameTemp,
+                            brExpiryDateTemp: values.brExpiryDateTemp,
+                            contactPerson: values.contactPerson,
+                            contactTel: {
+                                countryCode: values.tel_countryCode,
+                                phoneNumber: values.phoneNumber
+                            },
+                            faxNo: {
+                                countryCode: values.fax_countryCode,
+                                faxNumber: values.faxNumber
+                            },
+                            addressTemp: {
+                                country: values.country.key,
+                                district: values.district?.key,
+                                addressLine1: values.addressLine1,
+                                addressLine2: values.addressLine2,
+                                addressLine3: values.addressLine3,
+                            }
+                        },
+                        onSuccess: function (responseData) {
+                            if(responseData.msg){
+                                setFailText(responseData.msg);
+                                setIsFailPopUp(true);
+                                return;
+                            }
+                            navigate('/org/' + responseData.id);
+                            notifyCreateSuccess()
+                        }
+                    });
                 }
-            });
+            }
         }
     });
 
@@ -140,9 +150,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                 <Grid container spacing={1}>
                     {/*top*/}
                     <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
-
-
-                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                        <Grid item sx={{mr: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"
@@ -155,10 +163,17 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                                 Create
                             </Button>
                         </Grid>
-
                     </Grid>
                     {/*top*/}
 
+                    <Grid item xs={12}>
+                        <FormHelperText error id="helper-text-address1-signup">
+                            <Typography variant="errorMessage1">
+                                {errorMsg}
+                            </Typography>
+                        </FormHelperText>
+                    </Grid>
+                    
                     <Grid item lg={4}>
                         {FieldUtils.getTextField({
                             label: "BR No.:",
diff --git a/src/pages/Organization/DetailPage_FromUser/index.js b/src/pages/Organization/DetailPage_FromUser/index.js
index 32ce97c..17afd41 100644
--- a/src/pages/Organization/DetailPage_FromUser/index.js
+++ b/src/pages/Organization/DetailPage_FromUser/index.js
@@ -1,18 +1,30 @@
 // material-ui
-import {Grid, Typography} from '@mui/material';
+import {Grid, Typography, Stack, Box} from '@mui/material';
 import {useEffect, useState} from "react";
 import * as React from "react";
-import * as HttpUtils from "../../../utils/HttpUtils";
+import * as HttpUtils from "utils/HttpUtils";
 import {useParams} from "react-router-dom";
 import {useNavigate} from "react-router-dom";
-import * as UrlUtils from "../../../utils/ApiPathConst";
-import * as DateUtils from "../../../utils/DateUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as DateUtils from "utils/DateUtils";
+import {getObjectByValue} from "utils/CommonFunction";
+import * as ComboData from "utils/ComboData";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const InfoCard = Loadable(lazy(() => import('./OrganizationCard_loadFromUser')));
-const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
 
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -34,8 +46,8 @@ const OrganizationDetailPage_FromUser = () => {
             HttpUtils.get({
                 url: UrlUtils.GET_ORG_FROM_USER_PATH+"/"+params.id,
                 onSuccess: function(response){
-                    response.data["country"] = response.data.addressTemp?.country;
-                    response.data["district"] = response.data.addressTemp?.district;
+                    response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.addressTemp?.country);
+                    response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.addressTemp?.district);
                     response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
                     response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
                     response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
@@ -62,20 +74,32 @@ const OrganizationDetailPage_FromUser = () => {
 
     return (
         isLoading ?
-            <LoadingComponent/>
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">Organisation (Create From User)</Typography>
+            <Grid container direction="column" sx={{minHeight: '87vh',backgroundColor:'#ffffff' }}>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                                Organisation (Create From User)
+                            </Typography>
+                        </Stack>
+                    </div>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <InfoCard
-                                userData={formData}
-                                userId={params.id}
-                            />
+                            <Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
+                                <InfoCard
+                                    userData={formData}
+                                    userId={params.id}
+                                />
+                            </Box>
                         </Grid>
 
                     </Grid>
diff --git a/src/pages/Payment/FPS/AckPage.js b/src/pages/Payment/FPS/AckPage.js
index ac6d04e..ae0d804 100644
--- a/src/pages/Payment/FPS/AckPage.js
+++ b/src/pages/Payment/FPS/AckPage.js
@@ -51,7 +51,7 @@ const AckPage = () => {
     // const [transactionTime, setTransactionTime] = React.useState("");
     const [onReady, setOnReady] = React.useState(false);
     const paymentStatusApi = "/api/payment/status/";
-
+    const [onDownload, setOnDownload] = React.useState(false);
 
     React.useEffect(() => {
         loadForm();
@@ -142,8 +142,15 @@ const AckPage = () => {
 
     const doPrint = () => {
         // window.print();
+        setOnDownload(true)
         HttpUtils.fileDownload({
             url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+localStorage.getItem("paymentId"),
+            onResponse:()=>{
+                setOnDownload(false)
+            },
+            onError:()=>{
+                setOnDownload(false)
+            }
         });
     };
 
@@ -182,6 +189,7 @@ const AckPage = () => {
                                             <PaymentDetails
                                                 formData={paymentData}
                                                 doPrint={doPrint}
+                                                onDownload={onDownload}
                                                 style={{
                                                     display: "flex",
                                                     height: "100%",
diff --git a/src/pages/Payment/PaymentCallback.js b/src/pages/Payment/PaymentCallback.js
index 72b93a8..86de794 100644
--- a/src/pages/Payment/PaymentCallback.js
+++ b/src/pages/Payment/PaymentCallback.js
@@ -40,6 +40,7 @@ const Index = () => {
     const [paymentData, setPaymentData] = React.useState({});
     const [itemList, setItemList] = React.useState([]);
     // const [paymentId, setPaymentId] = React.useState("");
+    const [onDownload, setOnDownload] = React.useState(false);
 
     const [transactionData, setTransactionData] = React.useState({});
     // const [transactionDate, setTransactionDate] = React.useState("");
@@ -144,8 +145,15 @@ const Index = () => {
 
     const doPrint = () => {
         // window.print();
+        setOnDownload(true)
         HttpUtils.fileDownload({
             url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+localStorage.getItem("paymentId"),
+            onResponse:()=>{
+                setOnDownload(false)
+            },
+            onError:()=>{
+                setOnDownload(false)
+            }
         });
     };
 
@@ -176,7 +184,7 @@ const Index = () => {
                             {/*row 1*/}
                             <Grid item xs={12} md={12} spacing={2} sx={{ textAlign: "center" }}>
                                 <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                    您的申請和付款已收到
+                                    <FormattedMessage id="MSG.paymentMsg"/>
                                 </Typography>
                                 <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
                                     <Grid item className="printOrder" xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%', order: 1 }}>
@@ -184,6 +192,7 @@ const Index = () => {
                                             <PaymentDetails
                                                 formData={paymentData}
                                                 doPrint={doPrint}
+                                                onDownload={onDownload}
                                                 style={{
                                                     display: "flex",
                                                     height: "100%",
@@ -226,21 +235,21 @@ const Index = () => {
                                     <center>
                                         <Grid item xs={12} md={8} >
                                             <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                                付款取消訊息：
+                                                <FormattedMessage id="MSG.paymentCancelMsg1"/>
                                                 <br /><br />
-                                                您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
+                                                <FormattedMessage id="MSG.paymentCancelMsg2"/>
                                                 <br /><br />
-                                                如果您主動取消了支付，請確認並確保取消是您的意願。
+                                                <FormattedMessage id="MSG.paymentCancelMsg3"/>
                                                 <br />
-                                                如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
+                                                <FormattedMessage id="MSG.paymentCancelMsg4"/>
                                                 <br /><br />
-                                                檢查您的支付帳戶是否有任何異常或限制。
+                                                <FormattedMessage id="MSG.paymentCancelMsg5"/>
                                                 <br />
-                                                確保您的付款資訊準確無誤。
+                                                <FormattedMessage id="MSG.paymentCancelMsg6"/>
                                                 <br />
-                                                檢查您的網路連線是否正常。
+                                                <FormattedMessage id="MSG.paymentCancelMsg7"/>
                                                 <br /><br />
-                                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
+                                                <FormattedMessage id="MSG.paymentCancelMsg8"/>
                                             </Typography>
                                         </Grid>
                                     </center>
diff --git a/src/pages/Proof/Search_GLD/DataGrid.js b/src/pages/Proof/Search_GLD/DataGrid.js
index 1d95455..983df0a 100644
--- a/src/pages/Proof/Search_GLD/DataGrid.js
+++ b/src/pages/Proof/Search_GLD/DataGrid.js
@@ -26,7 +26,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             field: 'actions',
             headerName: 'Proof No.',
-            width: 150,
+            width: 170,
             cellClassName: 'actions',
             renderCell: (params) => {
                 return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
@@ -36,7 +36,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'appId',
             field: 'appId',
             headerName: 'Application No./ Gazette Code/ Gazette Issue',
-            flex: 1.5,
+            width: 400,
             renderCell: (params) => {
                 let appNo = params.row.appNo;
                 let code = params.row.groupNo;
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
index 140ab29..8340e37 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
@@ -76,9 +76,9 @@ const PublicNotice = ({ applicationDetailData, proofList, paymentList }) => {
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto'  }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                <Tab label={"Proof(" + _proofList?.length + ") "} value="1" />
-                                <Tab label={"Payment(" + _paymentList.length + ") "} value="2" />
-                                <Tab label={"Status History(" + statusHistoryList.length + ") "} value="3" />
+                                <Tab label={"Proof (" + _proofList?.length + ") "} value="1" />
+                                <Tab label={"Payment (" + _paymentList.length + ") "} value="2" />
+                                <Tab label={"Status History (" + statusHistoryList.length + ") "} value="3" />
                             </TabList>
                         </Box>
                         <TabPanel value="1" sx={{p:0}}>
diff --git a/src/pages/PublicNotice/Details_Public/tabTableDetail/TabTable.js b/src/pages/PublicNotice/Details_Public/tabTableDetail/TabTable.js
index 0785c20..5ad915f 100644
--- a/src/pages/PublicNotice/Details_Public/tabTableDetail/TabTable.js
+++ b/src/pages/PublicNotice/Details_Public/tabTableDetail/TabTable.js
@@ -59,11 +59,11 @@ const PublicNotice = ({ proofList, paymentList }) => {
                                 <Tab
                                     aria-label={intl.formatMessage({id: 'proofRecord'})}
                                     label={
-                                    intl.formatMessage({id: 'proofRecord'}) + "(" + _proofList.length + ") "} value="1"
+                                    intl.formatMessage({id: 'proofRecord'}) + " (" + _proofList.length + ") "} value="1"
                                 />
                                 <Tab
                                     aria-label={intl.formatMessage({id: 'paymentHistory'})}
-                                    label={ intl.formatMessage({id: 'paymentHistory'}) +"(" + _paymentList.length + ") "} value="2"
+                                    label={ intl.formatMessage({id: 'paymentHistory'}) +" (" + _paymentList.length + ") "} value="2"
                                 />
                             </TabList>
                         </Box>
diff --git a/src/pages/PublicNotice/Search_GLD/DataGrid.js b/src/pages/PublicNotice/Search_GLD/DataGrid.js
index 3f3237a..ae8c290 100644
--- a/src/pages/PublicNotice/Search_GLD/DataGrid.js
+++ b/src/pages/PublicNotice/Search_GLD/DataGrid.js
@@ -85,7 +85,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'groupNo',
             field: 'groupNo',
             headerName: 'Gazette Group',
-            flex: 1,
+            flex: 0.5,
             valueGetter: (params) => {
                 return (params?.value) ? (params?.value) : "";
             }
@@ -94,7 +94,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'issueId',
             field: 'issueId',
             headerName: 'Issue No',
-            flex: 1,
+            flex: 1.5,
             valueGetter: (params) => {
                 return params.row.issueYear
                     + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3)
diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
index 0a0fd79..6b47d89 100644
--- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
+++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
@@ -1,23 +1,24 @@
 // material-ui
 import {
-    Grid, Button, Typography
+    Grid, Button, Typography,
+    FormHelperText
 } from '@mui/material';
-import MainCard from "../../../components/MainCard";
+import MainCard from "components/MainCard";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import * as yup from 'yup';
 
 import { useFormik } from 'formik';
-import * as FieldUtils from "../../../utils/FieldUtils";
-import * as HttpUtils from '../../../utils/HttpUtils';
-import * as UrlUtils from "../../../utils/ApiPathConst";
-import * as ComboData from "../../../utils/ComboData";
+import * as FieldUtils from "utils/FieldUtils";
+import * as HttpUtils from 'utils/HttpUtils';
+import * as UrlUtils from "utils/ApiPathConst";
+import * as ComboData from "utils/ComboData";
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
 import {useIntl} from "react-intl";
-import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -29,6 +30,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
     const [editMode, setEditMode] = useState(false);
     const [locked, setLocked] = useState(false);
     const [onReady, setOnReady] = useState(false);
+    const [errorMsg, setErrorMsg] = useState("");
 
     useEffect(() => {
         //if state data are ready and assign to different field
@@ -57,38 +59,45 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
             faxNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).nullable(),
         }),
         onSubmit: values => {
-            console.log(values);
-            HttpUtils.post({
-                url: UrlUtils.POST_IND_USER + "/" + formData.id,
-                params: {
-                    prefix: values.prefix,
-                    enName: values.enName,
-                    chName: values.chName,
-                    idDocType: values.idDocType,
-                    mobileNumber: {
-                        countryCode: values.tel_countryCode,
-                        phoneNumber: values.phoneNumber
-                    },
-                    identification: values.identification,
-                    checkDigit: values.checkDigit,
-                    faxNo: {
-                        countryCode: values.fax_countryCode,
-                        faxNumber: values.faxNumber
-                    },
-                    emailAddress: values.emailAddress,
-                    address: {
-                        country: values.country.key,
-                        district: values.district.key,
-                        addressLine1: values.addressLine1,
-                        addressLine2: values.addressLine2,
-                        addressLine3: values.addressLine3,
-                    },
-                },
-                onSuccess: function () {
-                    notifySaveSuccess();
-                    loadDataFun();
+            if (values.country==null){
+                setErrorMsg(intl.formatMessage({id: 'pleaseFillInCountry'}))
+            } else {
+                if (values.country.key ==1 && values.district == null){
+                    setErrorMsg(intl.formatMessage({id: 'pleaseFillInDistrict'}))
+                } else {
+                    HttpUtils.post({
+                        url: UrlUtils.POST_IND_USER + "/" + formData.id,
+                        params: {
+                            prefix: values.prefix,
+                            enName: values.enName,
+                            chName: values.chName,
+                            idDocType: values.idDocType,
+                            mobileNumber: {
+                                countryCode: values.tel_countryCode,
+                                phoneNumber: values.phoneNumber
+                            },
+                            identification: values.identification,
+                            checkDigit: values.checkDigit,
+                            faxNo: {
+                                countryCode: values.fax_countryCode,
+                                faxNumber: values.faxNumber
+                            },
+                            emailAddress: values.emailAddress,
+                            address: {
+                                country: values.country.key,
+                                district: values.district?.key,
+                                addressLine1: values.addressLine1,
+                                addressLine2: values.addressLine2,
+                                addressLine3: values.addressLine3,
+                            },
+                        },
+                        onSuccess: function () {
+                            notifySaveSuccess();
+                            loadDataFun();
+                        }
+                    });
                 }
-            });
+            }
         }
     });
 
@@ -196,6 +205,13 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                     </Typography>
                     <Grid item xs={12} sm={12} md={12} lg={12}>
                         <Grid container>
+                            <Grid item xs={12}>
+                                <FormHelperText error id="helper-text-address1-signup">
+                                    <Typography variant="errorMessage1">
+                                        {errorMsg}
+                                    </Typography>
+                                </FormHelperText>
+                            </Grid>
                             <Grid item xs={12} sm={12} md={12} lg={4} >
                                 {FieldUtils.getTextField({
                                     label: "Username:",
diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
index 62abe00..3f677f7 100644
--- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
+++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
@@ -1,6 +1,7 @@
 // material-ui
 import {
-    Grid, Button, Typography
+    Grid, Button, Typography,
+    FormHelperText
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -28,6 +29,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
     const [currentUserData, setCurrentUserData] = useState(formData);
     const [editMode, setEditMode] = useState(false);
     const [onReady, setOnReady] = useState(false);
+    const [errorMsg, setErrorMsg] = useState("");
 
     useEffect(() => {
         //if state data are ready and assign to different field
@@ -53,33 +55,40 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
             faxNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).nullable(),
         }),
         onSubmit: values => {
-            console.log(values);
-            HttpUtils.post({
-                url: UrlUtils.POST_PUB_IND_USER,
-                params: {
-                    enName: values.enName,
-                    chName: values.chName,
-                    mobileNumber: {
-                        countryCode: values.tel_countryCode,
-                        phoneNumber: values.phoneNumber
-                    },
-                    faxNo: {
-                        countryCode: values.fax_countryCode,
-                        faxNumber: values.faxNumber
-                    },
-                    address: {
-                        country: values.country.key,
-                        district: values.district.key,
-                        addressLine1: values.addressLine1,
-                        addressLine2: values.addressLine2,
-                        addressLine3: values.addressLine3,
-                    },
-                },
-                onSuccess: function () {
-                    notifySaveSuccess();
-                    loadDataFun();
+            if (values.country==null){
+                setErrorMsg(intl.formatMessage({id: 'pleaseFillInCountry'}))
+            } else {
+                if (values.country.key ==1 && values.district == null){
+                    setErrorMsg(intl.formatMessage({id: 'pleaseFillInDistrict'}))
+                } else {
+                    HttpUtils.post({
+                        url: UrlUtils.POST_PUB_IND_USER,
+                        params: {
+                            enName: values.enName,
+                            chName: values.chName,
+                            mobileNumber: {
+                                countryCode: values.tel_countryCode,
+                                phoneNumber: values.phoneNumber
+                            },
+                            faxNo: {
+                                countryCode: values.fax_countryCode,
+                                faxNumber: values.faxNumber
+                            },
+                            address: {
+                                country: values.country.key,
+                                district: values.district?.key,
+                                addressLine1: values.addressLine1,
+                                addressLine2: values.addressLine2,
+                                addressLine3: values.addressLine3,
+                            },
+                        },
+                        onSuccess: function () {
+                            notifySaveSuccess();
+                            loadDataFun();
+                        }
+                    });
                 }
-            });
+            }
         }
     });
 
@@ -160,6 +169,13 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                     </Typography>
                     <Grid item xs={12} sm={12} md={12} lg={12}>
                         <Grid container>
+                            <Grid item xs={12}>
+                                <FormHelperText error id="helper-text-address1-signup">
+                                    <Typography variant="errorMessage1">
+                                        {errorMsg}
+                                    </Typography>
+                                </FormHelperText>
+                            </Grid>
                             <Grid item xs={12} sm={12} md={12} lg={4} >
                                 {FieldUtils.getTextField({
                                     label: intl.formatMessage({id: 'userLoginName'}) + ":",
diff --git a/src/pages/User/GLDUserProfile/index.js b/src/pages/User/GLDUserProfile/index.js
index 68893af..42d4ce5 100644
--- a/src/pages/User/GLDUserProfile/index.js
+++ b/src/pages/User/GLDUserProfile/index.js
@@ -87,7 +87,7 @@ const UserMaintainPage = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                             <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
-                                User Profile
+                                My Profile
                             </Typography>
                         </Stack>
                     </div>
diff --git a/src/pages/User/ManagePage_OrgPublic/index.js b/src/pages/User/ManagePage_OrgPublic/index.js
index cf7fa21..528b381 100644
--- a/src/pages/User/ManagePage_OrgPublic/index.js
+++ b/src/pages/User/ManagePage_OrgPublic/index.js
@@ -10,8 +10,8 @@ import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as DateUtils from "utils/DateUtils";
-import {FormattedMessage, useIntl} from "react-intl";
-import {useTheme} from "@emotion/react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useTheme } from "@emotion/react";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -87,16 +87,16 @@ const ManageOrgUserPage = () => {
         if (params.row.locked) {
             return (
                 <>
-                    {getStatusTag({ color: "#525150", text: intl.formatMessage({id: 'locked'}) })}
+                    {getStatusTag({ color: "#525150", text: intl.formatMessage({ id: 'locked' }) })}
                     <Button variant="outlined" onClick={() => onActiveClick(params)}>
                         <FormattedMessage id="unlock" />
                     </Button>
                 </>
             )
         } else if (!params.row.verifiedBy) {
-            return getStatusTag({ color: "#fca503", text: intl.formatMessage({id: 'pendingFor'}) })
+            return getStatusTag({ color: "#fca503", text: intl.formatMessage({ id: 'pendingFor' }) })
         } else if (params.row.status === "active") {
-            return getStatusTag({ color: "#73AD21", text: intl.formatMessage({id: 'active'}) })
+            return getStatusTag({ color: "#73AD21", text: intl.formatMessage({ id: 'active' }) })
         }
         return getStatusTag({ text: params.row.status })
     }
@@ -126,7 +126,7 @@ const ManageOrgUserPage = () => {
         {
             id: 'username',
             field: 'username',
-            headerName: getHeader(intl.formatMessage({id: 'loginName'})),
+            headerName: getHeader(intl.formatMessage({ id: 'loginName' })),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
 
@@ -134,7 +134,7 @@ const ManageOrgUserPage = () => {
         {
             id: 'contactPerson',
             field: 'contactPerson',
-            headerName: getHeader(intl.formatMessage({id: 'userName'})),
+            headerName: getHeader(intl.formatMessage({ id: 'userName' })),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
 
@@ -142,7 +142,7 @@ const ManageOrgUserPage = () => {
         {
             id: 'contactTel',
             field: 'contactTel',
-            headerName: getHeader(intl.formatMessage({id: 'userContactNumber'})),
+            headerName: getHeader(intl.formatMessage({ id: 'userContactNumber' })),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -153,14 +153,14 @@ const ManageOrgUserPage = () => {
         {
             id: 'emailBus',
             field: 'emailBus',
-            headerName: getHeader(intl.formatMessage({id: 'userContactEmail'})),
+            headerName: getHeader(intl.formatMessage({ id: 'userContactEmail' })),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'lastLogin',
             field: 'lastLogin',
-            headerName: getHeader(intl.formatMessage({id: 'lastLoginDate'})),
+            headerName: getHeader(intl.formatMessage({ id: 'lastLoginDate' })),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -170,7 +170,7 @@ const ManageOrgUserPage = () => {
         {
             id: 'lastApply',
             field: 'lastApply',
-            headerName: getHeader(intl.formatMessage({id: 'lastSubmissionDate'})),
+            headerName: getHeader(intl.formatMessage({ id: 'lastSubmissionDate' })),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: () => {
@@ -180,7 +180,7 @@ const ManageOrgUserPage = () => {
         {
             field: 'actions',
             type: 'actions',
-            headerName: getHeader(intl.formatMessage({id: 'status'})),
+            headerName: getHeader(intl.formatMessage({ id: 'status' })),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
@@ -192,7 +192,7 @@ const ManageOrgUserPage = () => {
             id: 'primaryUser',
             field: 'primaryUser',
             type: 'bool',
-            headerName: getHeader(intl.formatMessage({id: 'primary'})),
+            headerName: getHeader(intl.formatMessage({ id: 'primary' })),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
@@ -204,7 +204,16 @@ const ManageOrgUserPage = () => {
                             <Checkbox
                                 onClick={() => {
                                     setSelectUser(params);
-                                    let str = params.row.primaryUser ? "Are you sure to mark " + params.row.username + " as un-primary user?" : "Are you sure to mark " + params.row.username + " as primary user?"
+                                    let str = params.row.primaryUser ?
+                                        intl.formatMessage({ id: 'MSG.revokePrimay' },
+                                            {
+                                                username: params.row.username
+                                            })
+                                        :
+                                        intl.formatMessage({ id: 'MSG.setPrimay' },
+                                            {
+                                                username: params.row.username
+                                            });
                                     setWarningText(str);
                                     setIsWarningPopUp(true);
                                 }}
@@ -222,7 +231,7 @@ const ManageOrgUserPage = () => {
             <Grid item xs={12}>
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                        <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
                             <FormattedMessage id="companyOrUserRecord" />
                         </Typography>
                     </Stack>
diff --git a/src/pages/authentication/RegisterCustom.js b/src/pages/authentication/RegisterCustom.js
index 33d236f..3abd3fe 100644
--- a/src/pages/authentication/RegisterCustom.js
+++ b/src/pages/authentication/RegisterCustom.js
@@ -20,6 +20,7 @@ const RegisterCustom = () => {
 
   const [isPopUp, setIsPopUp] = React.useState(false);
   const intl = useIntl();
+  const { locale } = intl;
 
   const registerWithIAmSmart = () => {
     setIsPopUp(true);
@@ -41,7 +42,7 @@ const RegisterCustom = () => {
       +"&source=" + getBowserType()
       +"&redirectURI="+encodeURIComponent(callbackUrl)
       +"&scope="+encodeURIComponent("eidapi_auth eidapi_profiles")
-      +"&lang=zh-HK"//en-US, zh-HK, or zh-CN
+      +"&lang="+(locale === 'en' ?"en-US":locale === 'zh-HK' ?"zh-HK":"zh-CN")
       //+"&state="
       +"&brokerPage=false"
     window.location.assign(url);
@@ -55,7 +56,7 @@ const RegisterCustom = () => {
       +"&source=" + getBowserType()
       +"&redirectURI="+encodeURIComponent(callbackUrl)
       +"&scope="+encodeURIComponent("eidapi_auth eidapi_profiles")
-      +"&lang=zh-HK"//en-US, zh-HK, or zh-CN
+      +"&lang="+(locale === 'en' ?"en-US":locale === 'zh-HK' ?"zh-HK":"zh-CN")
       //+"&state="
       +"&brokerPage=true"
     window.location.assign(url);
@@ -80,7 +81,7 @@ const RegisterCustom = () => {
           <Box alignItems="center">
             <Grid container>
               <Grid item xs={12} md={12}>
-                <Typography mt={4} variant="h2">
+                <Typography mt={4} variant="h3">
                   <FormattedMessage id="registerTitle1"/>
                   <strong style={{ color: '#FF5733' }}>
                     {" " + intl.formatMessage({id: 'registerTitle2'}) + " "}
@@ -98,14 +99,15 @@ const RegisterCustom = () => {
                   <Typography mb={4} variant="h3">
                     <FormattedMessage id="personalUser"/>
                   </Typography>
-                  <Button variant="outlined" color="iAmSmart"  onClick={registerWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}><Typography variant="h5">
-                    <FormattedMessage id="continueWithIAmSmart"/>
-                  </Typography></Button>
+                  <Button variant="outlined" color="iAmSmart" sx={{textTransform: 'none'}} onClick={registerWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>
+                    <Typography variant="h5">
+                      <FormattedMessage id="continueWithIAmSmart"/>
+                    </Typography>
+                  </Button>
 
                   <Box mt={4} ml={2} mr={2} bgcolor="grey.100" p={1.5} >
                     <Typography textAlign='justify' variant="body1" display="block" gutterBottom>
-                      你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動憲報刊登公告帳戶。
-                      <br />如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。
+                    <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({id: 'MSG.registerIAmSmart'}) }} />
                     </Typography>
                     <Link href="https://www.iamsmart.gov.hk/tc/">
                       <FormattedMessage id="learnMore"/>
@@ -121,8 +123,7 @@ const RegisterCustom = () => {
                   </Typography></Button>
 
                   <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
-                    需上載身份證明文件數碼檔案以進行網上申請。
-                    <br />如：香港身份證; 護照; 中國內地身份證; 專業執業証書等
+                  <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({id: 'MSG.registerPersonal'}) }} />
                   </Typography>
                 </Grid>
                 <Grid item xs={12} md={6} sx={{ borderLeft: 1, borderColor: 'grey.500' }}>
@@ -133,8 +134,7 @@ const RegisterCustom = () => {
                     <FormattedMessage id="registerNewBusinessUser"/>
                   </Typography></Button>
                   <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
-                    需上載以下任何一份證明文件以進行網上申請。
-                    <br />如：商業登記證；專業執業證書
+                  <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({id: 'MSG.registerOrg'}) }} />
                   </Typography>
                 </Grid>
               </Grid>
diff --git a/src/pages/authentication/auth-forms/AuthLoginCustom.js b/src/pages/authentication/auth-forms/AuthLoginCustom.js
index 0e40833..5b9bd00 100644
--- a/src/pages/authentication/auth-forms/AuthLoginCustom.js
+++ b/src/pages/authentication/auth-forms/AuthLoginCustom.js
@@ -205,7 +205,7 @@ const AuthLoginCustom = () => {
       + "&source=" + getBowserType()
       + "&redirectURI=" + encodeURIComponent(callbackUrl)
       + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
-      + "&lang=zh-HK"//en-US, zh-HK, or zh-CN
+      +"&lang="+(locale === 'en' ?"en-US":locale === 'zh-HK' ?"zh-HK":"zh-CN")
       //+"&state="
       + "&brokerPage=false"
     window.location=url;
@@ -237,7 +237,7 @@ const AuthLoginCustom = () => {
       + "&source=" + getBowserType()
       + "&redirectURI=" + encodeURIComponent(callbackUrl)
       + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
-      + "&lang=zh-HK"//en-US, zh-HK, or zh-CN
+      +"&lang="+(locale === 'en' ?"en-US":locale === 'zh-HK' ?"zh-HK":"zh-CN")
       //+"&state="
       + "&brokerPage=true"
     window.location=url;
@@ -361,7 +361,7 @@ const AuthLoginCustom = () => {
             <Grid container>
               <Grid item xs={12}>
                 <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-                  <Button onClick={() => getQRWithIAmSmart()} color="iAmSmart" fullWidth size="large" variant="outlined" startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>
+                  <Button onClick={() => getQRWithIAmSmart()}  sx={{textTransform: 'none'}} color="iAmSmart" fullWidth size="large" variant="outlined" startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>
                     <Typography variant="h5">
                       <FormattedMessage id="iAmSmartLogin"/>
                     </Typography>
diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index f303cf9..b3f85f1 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -110,7 +110,7 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         changePassword('');
-        if(captchaImg=="")
+        if (captchaImg == "")
             onCaptchaChange();
     }, []);
 
@@ -171,7 +171,7 @@ const CustomFormWizard = (props) => {
     const onCaptchaChange = () => {
         HttpUtils.post({
             url: POST_CAPTCHA,
-            params: { width: 130, height: 40,  captcha: captchaImg},
+            params: { width: 130, height: 40, captcha: captchaImg },
             onSuccess: (responseData) => {
                 props.setBase64Url(responseData.base64Url)
                 localStorage.setItem("base64Url", responseData.base64Url);
@@ -300,7 +300,7 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         props.step == 2 ? _onSubmit() : null;
-        if(captchaImg=="")
+        if (captchaImg == "")
             onCaptchaChange();
         checkDataField(values)
     }, [props.step])
@@ -309,7 +309,7 @@ const CustomFormWizard = (props) => {
     const _onSubmit = () => {
         setLoding(true);
         values.idDocType = selectedIdDocType.type
-        values.address4 = selectedAddress4==null?"":selectedAddress4.key
+        values.address4 = selectedAddress4 == null ? "" : selectedAddress4.key
         values.address5 = selectedAddress5.key
         // console.log(values)
         const userAddress = {
@@ -383,7 +383,7 @@ const CustomFormWizard = (props) => {
             })
                 .then((
                     // response
-                    ) => {
+                ) => {
                     // console.log(response)
                     setCheckUpload(true)
                     setLoding(false);
@@ -551,27 +551,27 @@ const CustomFormWizard = (props) => {
             captchaField: ''
         }),
         validationSchema: yup.object().shape({
-            username: yup.string().min(6, displayErrorMsg(intl.formatMessage({id: 'atLeast6CharAccount'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireUsername'})))
-                .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpecialCharAccount'})) })
-                .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpaceAccount'})) }),
-            password: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'requirePassword'})))
-                .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpacePassword'})) })
-                .matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneSmallLetter'})) })
-                .matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneCapLetter'})) })
-                .matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1Number'})) })
-                .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1SpecialChar'})) }),
-            confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'pleaseConfirmPassword'}))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({id: 'samePassword'}))),
-            enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
-            chName: yup.string().max(6).required(displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))),
-            address1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
-            address2: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine2'}))),
-            address3: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine3'}))),
-            email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))),
-            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({id: 'validSameEmail'}))),
-            idNo: yup.string().required(displayErrorMsg(`${intl.formatMessage({id: 'require'})}${selectedIdDocInputType}${intl.formatMessage({id: 'number'})}`))
-                .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({id: 'noSpecialCharacter'})}`) })
-                .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({id: 'noSpace'})}`) })
-                .test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({id: 'requiredValid'})}${selectedIdDocInputType}${intl.formatMessage({id: 'number'})}`), function (value) {
+            username: yup.string().min(6, displayErrorMsg(intl.formatMessage({ id: 'atLeast6CharAccount' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireUsername' })))
+                .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpecialCharAccount' })) })
+                .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpaceAccount' })) }),
+            password: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requirePassword' })))
+                .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpacePassword' })) })
+                .matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeastOneSmallLetter' })) })
+                .matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeastOneCapLetter' })) })
+                .matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeast1Number' })) })
+                .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeast1SpecialChar' })) }),
+            confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).required(displayErrorMsg(intl.formatMessage({ id: 'pleaseConfirmPassword' }))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({ id: 'samePassword' }))),
+            enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
+            chName: yup.string().max(6).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))),
+            address1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
+            address2: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine2' }))),
+            address3: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine3' }))),
+            email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))),
+            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({ id: 'validSameEmail' }))),
+            idNo: yup.string().required(displayErrorMsg(`${intl.formatMessage({ id: 'require' })}${selectedIdDocInputType}${intl.formatMessage({ id: 'number' })}`))
+                .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) })
+                .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpace' })}`) })
+                .test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({ id: 'requiredValid' })}${selectedIdDocInputType}${intl.formatMessage({ id: 'number' })}`), function (value) {
                     const idDocType = selectedIdDocType.type;
                     var pattern_HKIDv1 = /^[A-Z]{1}[0-9]{6}$/;
                     var pattern_HKIDv2 = /^[A-Z]{2}[0-9]{6}$/;
@@ -622,13 +622,13 @@ const CustomFormWizard = (props) => {
                         }
                     }
                 }),
-            checkDigit: yup.string().max(1).required(displayErrorMsg(intl.formatMessage({id: 'requiredNumberInQuote'}))),
-            idDocType: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireIdDocType'}))),
-            phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
+            checkDigit: yup.string().max(1).required(displayErrorMsg(intl.formatMessage({ id: 'requiredNumberInQuote' }))),
+            idDocType: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireIdDocType' }))),
+            phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
             // faxCountryCode: yup.string().min(3,'請輸入3位數字'),
-            phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
+            phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
             // fax: yup.string().min(8,'請輸入8位數字'),
-            captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
+            captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
         }),
     });
 
@@ -661,19 +661,19 @@ const CustomFormWizard = (props) => {
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}>
                                     <Typography variant="pnspsFormHeader">
-                                    <FormattedMessage id="reset"/>
+                                        <FormattedMessage id="reset" />
                                     </Typography>
                                 </Button>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                     <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
-                                        <FormattedMessage id="becomeNewPersonalUser"/>
+                                        <FormattedMessage id="becomeNewPersonalUser" />
                                     </Typography>
                                 </div>
                                 <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>
-                                    <FormattedMessage id="requireString"/>
+                                    <FormattedMessage id="requireString" />
                                 </Typography>
                                 <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>
-                                    <FormattedMessage id="yourLoginInformation"/>
+                                    <FormattedMessage id="yourLoginInformation" />
                                 </Typography>
                             </Stack>
                         </Grid>
@@ -683,7 +683,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="username-signup">
                                             <Typography variant="pnspsFormHeader">
-                                                <FormattedMessage id="userLoginName"/>
+                                                <FormattedMessage id="userLoginName" />
                                                 <span style={{ color: '#f10000' }}>*</span>
                                                 {/*<Button*/}
                                                 {/*    variant="contained"*/}
@@ -703,7 +703,7 @@ const CustomFormWizard = (props) => {
                                                 props.setUsername(e.target.value)
                                                 formik.handleChange(e)
                                             }}
-                                            placeholder={intl.formatMessage({id: 'userLoginName'})}
+                                            placeholder={intl.formatMessage({ id: 'userLoginName' })}
                                             fullWidth
                                             error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)}
                                             onBlur={formik.handleBlur}
@@ -722,7 +722,7 @@ const CustomFormWizard = (props) => {
                                         )}
                                         {checkUsername && (
                                             <FormHelperText error id="helper-text-username-signup">
-                                                <FormattedMessage id="usernameTaken"/>
+                                                <FormattedMessage id="usernameTaken" />
                                             </FormHelperText>
                                         )}
                                     </Stack>
@@ -734,7 +734,7 @@ const CustomFormWizard = (props) => {
                                                 <Stack direction="row" justifyContent="space-between">
                                                     <InputLabel htmlFor="password-signup">
                                                         <Typography variant="pnspsFormHeader">
-                                                            <FormattedMessage id="userPassword"/>
+                                                            <FormattedMessage id="userPassword" />
                                                             <span style={{ color: '#f10000' }}>*</span>
                                                         </Typography>
                                                     </InputLabel>
@@ -763,7 +763,7 @@ const CustomFormWizard = (props) => {
                                                             </IconButton>
                                                         </InputAdornment>
                                                     }
-                                                    placeholder={intl.formatMessage({id: 'userPassword'})}
+                                                    placeholder={intl.formatMessage({ id: 'userPassword' })}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -786,7 +786,7 @@ const CustomFormWizard = (props) => {
                                                     </Grid>
                                                     <Grid item>
                                                         <Typography variant="subtitle1">
-                                                            <FormattedMessage id={level ? level?.label : "pwWeak" }/>
+                                                            <FormattedMessage id={level ? level?.label : "pwWeak"} />
                                                         </Typography>
                                                     </Grid>
                                                 </Grid>
@@ -796,7 +796,7 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1}>
                                                 <InputLabel htmlFor="confirmPassword-signup">
                                                     <Typography variant="pnspsFormHeader">
-                                                        <FormattedMessage id="confirmPassword"/>
+                                                        <FormattedMessage id="confirmPassword" />
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
                                                 </InputLabel>
@@ -830,7 +830,7 @@ const CustomFormWizard = (props) => {
                                                             </IconButton>
                                                         </InputAdornment>
                                                     }
-                                                    placeholder={intl.formatMessage({id: 'confirmPassword'})}
+                                                    placeholder={intl.formatMessage({ id: 'confirmPassword' })}
                                                     fullWidth
                                                     error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)}
                                                 />
@@ -841,12 +841,12 @@ const CustomFormWizard = (props) => {
                                                 )}
                                             </Stack>
                                             <Grid container spacing={2} alignItems="center">
-                                                <Grid item sx={{mt:1}}>
+                                                <Grid item sx={{ mt: 1 }}>
                                                     <Typography variant="subtitle1">
-                                                        •<FormattedMessage id="pwRemark1"/> <br />
-                                                        •<FormattedMessage id="pwRemark2"/><br />
-                                                        •<FormattedMessage id="pwRemark3"/><br />
-                                                        •<FormattedMessage id="pwRemark4"/>
+                                                        •<FormattedMessage id="pwRemark1" /> <br />
+                                                        •<FormattedMessage id="pwRemark2" /><br />
+                                                        •<FormattedMessage id="pwRemark3" /><br />
+                                                        •<FormattedMessage id="pwRemark4" />
                                                     </Typography>
                                                 </Grid>
                                             </Grid>
@@ -856,7 +856,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="yourPersonalInformation"/>
+                                            <FormattedMessage id="yourPersonalInformation" />
                                         </Typography>
                                         {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                             Already have an account?
@@ -868,7 +868,7 @@ const CustomFormWizard = (props) => {
                                         <Stack spacing={1}>
                                             <InputLabel htmlFor="idDocType-signup">
                                                 <Typography variant="pnspsFormHeader">
-                                                    <FormattedMessage id="userIdDoc"/>
+                                                    <FormattedMessage id="userIdDoc" />
                                                     <span style={{ color: '#f10000' }}>*</span>
                                                 </Typography>
                                             </InputLabel>
@@ -892,9 +892,9 @@ const CustomFormWizard = (props) => {
                                                     onBlur={formik.handleBlur}
                                                     filterOptions={(options) => options}
                                                     inputValue={selectedIdDocInputType}
-                                                    getOptionLabel={(option) => option.label? intl.formatMessage({ id: option.label }) : ""}
+                                                    getOptionLabel={(option) => option.label ? intl.formatMessage({ id: option.label }) : ""}
                                                     onChange={(event, newValue) => {
-                                                        if (newValue != null ) {
+                                                        if (newValue != null) {
                                                             setSelectedIdDocInputType(intl.formatMessage({ id: newValue.label }));
                                                             setSelectedIdDocType(newValue);
                                                             if (newValue.type !== "HKID") {
@@ -907,13 +907,13 @@ const CustomFormWizard = (props) => {
                                                     sx={{ "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                                     renderInput={(params) => <TextField
                                                         {...params}
-                                                        placeholder={intl.formatMessage({id: 'idDocType'})}
+                                                        placeholder={intl.formatMessage({ id: 'idDocType' })}
                                                     />}
                                                 />
                                                 {formik.touched.idDocType && (
                                                     selectedIdDocType === null ?
                                                         <FormHelperText error id="helper-text-idDocType-signup">
-                                                            <FormattedMessage id="requireIdDocType"/>
+                                                            <FormattedMessage id="requireIdDocType" />
                                                         </FormHelperText> : ''
                                                 )}
                                             </Stack>
@@ -941,7 +941,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                 }
                                                             }}
-                                                            placeholder={intl.formatMessage({id: 'idDocNumber'})}
+                                                            placeholder={intl.formatMessage({ id: 'idDocNumber' })}
                                                             fullWidth
                                                             sx={{ mr: 1 }}
                                                             error={Boolean(formik.touched.idNo && formik.errors.idNo)}
@@ -1021,7 +1021,7 @@ const CustomFormWizard = (props) => {
                                                                 }
                                                             }
                                                         }}
-                                                        placeholder={intl.formatMessage({id: 'idDocNumber'})}
+                                                        placeholder={intl.formatMessage({ id: 'idDocNumber' })}
                                                         fullWidth
                                                         sx={{ mr: 1 }}
                                                         error={Boolean(formik.touched.idNo && formik.errors.idNo)}
@@ -1049,7 +1049,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="enName-signup">
                                             <Typography variant="pnspsFormHeader">
-                                                <FormattedMessage id="userEnglishName"/>
+                                                <FormattedMessage id="userEnglishName" />
                                                 {selectedIdDocType.type === "CNID" ? "" : <span style={{ color: '#f10000' }}>*</span>}
                                             </Typography>
                                         </InputLabel>
@@ -1059,7 +1059,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.enName}
                                             name="enName"
                                             onChange={formik.handleChange}
-                                            placeholder={intl.formatMessage({id: 'sameAsYourIdDoc'})}
+                                            placeholder={intl.formatMessage({ id: 'sameAsYourIdDoc' })}
                                             fullWidth
                                             error={Boolean(formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID")}
                                             onBlur={formik.handleBlur}
@@ -1082,7 +1082,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="chName-signup">
                                             <Typography variant="pnspsFormHeader">
-                                                <FormattedMessage id="userChineseName"/>
+                                                <FormattedMessage id="userChineseName" />
                                                 <span style={{ color: '#f10000' }}>*</span>
                                             </Typography>
                                         </InputLabel>
@@ -1094,7 +1094,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.chName.trim()}
                                             name="chName"
                                             onChange={formik.handleChange}
-                                            placeholder={intl.formatMessage({id: 'sameAsYourIdDoc'})}
+                                            placeholder={intl.formatMessage({ id: 'sameAsYourIdDoc' })}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
                                                 maxLength: 6,
@@ -1116,7 +1116,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="address1-signup">
                                             <Typography variant="pnspsFormHeader">
-                                                <FormattedMessage id="formAddress"/>
+                                                <FormattedMessage id="formAddress" />
                                                 <span style={{ color: '#f10000' }}>*</span>
                                             </Typography>
                                         </InputLabel>
@@ -1127,7 +1127,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.address1}
                                             name="address1"
                                             onChange={formik.handleChange}
-                                            placeholder={intl.formatMessage({id: 'addressLine1'})}
+                                            placeholder={intl.formatMessage({ id: 'addressLine1' })}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
                                                 onKeyDown: (e) => {
@@ -1144,7 +1144,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.address2}
                                             name="address2"
                                             onChange={formik.handleChange}
-                                            placeholder={intl.formatMessage({id: 'addressLine2'})}
+                                            placeholder={intl.formatMessage({ id: 'addressLine2' })}
                                             inputProps={{
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
@@ -1160,7 +1160,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.address3}
                                             name="address3"
                                             onChange={formik.handleChange}
-                                            placeholder={intl.formatMessage({id: 'addressLine3'})}
+                                            placeholder={intl.formatMessage({ id: 'addressLine3' })}
                                             inputProps={{
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
@@ -1175,14 +1175,16 @@ const CustomFormWizard = (props) => {
                                             value={selectedAddress4}
                                             options={ComboData.district}
                                             disabled={checkCountry}
-                                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
+                                            getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 setSelectedAddress4(newValue);
                                             }}
-                                            sx={{ "& .MuiInputBase-root": { height: "41px" },
+                                            sx={{
+                                                "& .MuiInputBase-root": { height: "41px" },
                                                 "#address4-combo": { padding: "0px 0px 0px 3px" },
-                                                "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
-                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'region'})}
+                                                "& .MuiAutocomplete-endAdornment": { top: "auto" },
+                                            }}
+                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'region' })}
                                             />}
                                         />
                                         <Autocomplete
@@ -1190,7 +1192,7 @@ const CustomFormWizard = (props) => {
                                             id="address5-combo"
                                             value={selectedAddress5}
                                             options={ComboData.country}
-                                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
+                                            getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 if (newValue !== null) {
                                                     setSelectedAddress5(newValue);
@@ -1207,7 +1209,7 @@ const CustomFormWizard = (props) => {
                                             }}
 
                                             sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
-                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'regionOrCountry'})} />}
+                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'regionOrCountry' })} />}
                                         />
                                         {formik.touched.address1 && formik.errors.address1 && (
                                             <FormHelperText error id="helper-text-address1-signup">
@@ -1229,7 +1231,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="yourContact"/>
+                                            <FormattedMessage id="yourContact" />
                                         </Typography>
                                     </Stack>
                                 </Grid>
@@ -1239,7 +1241,7 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                 <InputLabel htmlFor="email-signup">
                                                     <Typography variant="pnspsFormHeader">
-                                                        <FormattedMessage id="userContactEmail"/>
+                                                        <FormattedMessage id="userContactEmail" />
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
                                                 </InputLabel>
@@ -1251,7 +1253,7 @@ const CustomFormWizard = (props) => {
                                                     value={formik.values.email.trim()}
                                                     name="email"
                                                     onChange={formik.handleChange}
-                                                    placeholder={intl.formatMessage({id: 'userContactEmail'})}
+                                                    placeholder={intl.formatMessage({ id: 'userContactEmail' })}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -1268,7 +1270,7 @@ const CustomFormWizard = (props) => {
                                                 )}
                                                 {checkEmail && (
                                                     <FormHelperText error id="helper-text-email-signup">
-                                                        <FormattedMessage id="emailUsed"/>
+                                                        <FormattedMessage id="emailUsed" />
                                                     </FormHelperText>
                                                 )}
                                             </Stack>
@@ -1277,7 +1279,7 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1} >
                                                 <InputLabel htmlFor="emailConfirm-signup">
                                                     <Typography variant="pnspsFormHeader">
-                                                        <FormattedMessage id="userContactEmail"/>
+                                                        <FormattedMessage id="userContactEmail" />
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
                                                 </InputLabel>
@@ -1290,7 +1292,7 @@ const CustomFormWizard = (props) => {
                                                     name="emailConfirm"
                                                     // onBlur={formik.handleBlur}
                                                     onChange={formik.handleChange}
-                                                    placeholder={intl.formatMessage({id: 'confirmEmail'})}
+                                                    placeholder={intl.formatMessage({ id: 'confirmEmail' })}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -1317,7 +1319,7 @@ const CustomFormWizard = (props) => {
                                                     <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                         <InputLabel htmlFor="phone-signup">
                                                             <Typography variant="pnspsFormHeader">
-                                                                <FormattedMessage id="userContactNumber"/>
+                                                                <FormattedMessage id="userContactNumber" />
                                                                 <span style={{ color: '#f10000' }}>*</span>
                                                             </Typography>
                                                         </InputLabel>
@@ -1336,7 +1338,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("phoneCountryCode", value);
                                                                 }}
-                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
+                                                                placeholder={intl.formatMessage({ id: 'dialingCode' })}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 endAdornment={<InputAdornment position="end">-</InputAdornment>}
@@ -1348,7 +1350,7 @@ const CustomFormWizard = (props) => {
                                                                         }
                                                                     },
                                                                 }}
-                                                                sx={{ width: '33%', mr:1}}
+                                                                sx={{ width: '33%', mr: 1 }}
                                                             />
                                                             <OutlinedInput
                                                                 id="phone-login"
@@ -1364,7 +1366,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("phone", value);
                                                                 }}
-                                                                placeholder={intl.formatMessage({id: 'userContactNumber'})}
+                                                                placeholder={intl.formatMessage({ id: 'userContactNumber' })}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
@@ -1393,7 +1395,7 @@ const CustomFormWizard = (props) => {
                                                     <Stack spacing={1} direction="column">
                                                         <InputLabel htmlFor="fax-signup">
                                                             <Typography variant="pnspsFormHeader">
-                                                                <FormattedMessage id="userFaxNumber"/>
+                                                                <FormattedMessage id="userFaxNumber" />
                                                             </Typography>
                                                         </InputLabel>
                                                         <Stack direction="row">
@@ -1411,7 +1413,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("faxCountryCode", value);
                                                                 }}
-                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
+                                                                placeholder={intl.formatMessage({ id: 'dialingCode' })}
                                                                 onBlur={formik.handleBlur}
                                                                 endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                                 inputProps={{
@@ -1422,7 +1424,7 @@ const CustomFormWizard = (props) => {
                                                                         }
                                                                     },
                                                                 }}
-                                                                sx={{ width: '33%' , mr: 1}}
+                                                                sx={{ width: '33%', mr: 1 }}
                                                             />
                                                             <OutlinedInput
                                                                 id="fax-login"
@@ -1438,7 +1440,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("fax", value);
                                                                 }}
-                                                                placeholder={intl.formatMessage({id: 'userFaxNumber'})}
+                                                                placeholder={intl.formatMessage({ id: 'userFaxNumber' })}
                                                                 inputProps={{
                                                                     maxLength: 8,
                                                                     onKeyDown: (e) => {
@@ -1461,28 +1463,28 @@ const CustomFormWizard = (props) => {
                                         <Grid item xs={12} md={12}>
                                             <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                 <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                                    <FormattedMessage id="userIdDoc"/>
+                                                    <FormattedMessage id="userIdDoc" />
                                                     <span style={{ color: '#f10000' }}>*</span></Typography>
                                                 <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
-                                                    <FormattedMessage id="pleaseUploadIdDoc"/>
+                                                    <FormattedMessage id="pleaseUploadIdDoc" />
                                                 </Typography>
                                                 <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
-                                                    <FormattedMessage id="pleaseUploadIdDocSubTitle"/>
+                                                    <FormattedMessage id="pleaseUploadIdDocSubTitle" />
                                                 </Typography>
                                                 <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                     <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
-                                                    <Button variant="contained" component="label" sx={{ height: '40px' }}>
-                                                        <FormattedMessage id="uploadIdDoc"/>
-                                                        <input
-                                                            accept="image/png, .jpg, .bmp, .pdf"
-                                                            //className={classes.input}
-                                                            id="contained-button-file"
-                                                            multiple
-                                                            type="file"
-                                                            onChange={handleFileUpload}
-                                                            style={{ display: 'none' }}
-                                                        />
-                                                    </Button>
+                                                        <Button variant="contained" component="label" sx={{ height: '40px' }}>
+                                                            <FormattedMessage id="uploadIdDoc" />
+                                                            <input
+                                                                accept="image/png, .jpg, .bmp, .pdf"
+                                                                //className={classes.input}
+                                                                id="contained-button-file"
+                                                                multiple
+                                                                type="file"
+                                                                onChange={handleFileUpload}
+                                                                style={{ display: 'none' }}
+                                                            />
+                                                        </Button>
                                                     </ThemeProvider>
                                                     {/*<Typography xs={12} sm={9} md={3} display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>如: 香港身份證; 護照; 中國內地身份證等</Typography>*/}
                                                 </Stack>
@@ -1501,7 +1503,7 @@ const CustomFormWizard = (props) => {
                                 <Grid container>
                                     <Grid item xs={12} md={12}>
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="termsAndCondition"/>
+                                            <FormattedMessage id="termsAndCondition" />
                                             <span style={{ color: '#f10000' }}>*</span>
                                         </Typography>
                                     </Grid>
@@ -1526,7 +1528,7 @@ const CustomFormWizard = (props) => {
                                                                 size="small"
                                                             />
                                                             <Typography variant="pnspsFormHeader">
-                                                                <FormattedMessage id="acceptTerms"/>
+                                                                <FormattedMessage id="acceptTerms" />
                                                             </Typography>
                                                         </Grid>
                                                     </Grid>
@@ -1542,7 +1544,7 @@ const CustomFormWizard = (props) => {
                                                                 size="small"
                                                             />
                                                             <Typography variant="pnspsFormHeader">
-                                                                <FormattedMessage id="rejectTerms"/>
+                                                                <FormattedMessage id="rejectTerms" />
                                                             </Typography>
                                                         </Grid>
                                                     </Grid>
@@ -1556,7 +1558,7 @@ const CustomFormWizard = (props) => {
                                 <Grid container>
                                     <Stack direction="column">
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="verify"/>
+                                            <FormattedMessage id="verify" />
                                             <span style={{ color: '#f10000' }}>*</span>
                                         </Typography>
                                         <Stack spacing={1} direction="row">
@@ -1604,12 +1606,12 @@ const CustomFormWizard = (props) => {
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                     <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
-                                        <FormattedMessage id="becomeNewPersonalUser"/>
+                                        <FormattedMessage id="becomeNewPersonalUser" />
                                     </Typography>
                                 </div>
                                 {/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
                                 <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>
-                                    <FormattedMessage id="yourLoginInformation"/>
+                                    <FormattedMessage id="yourLoginInformation" />
                                 </Typography>
                                 {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                 Already have an account?
@@ -1621,7 +1623,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} >
                                     <Stack spacing={2} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userLoginName"/>:
+                                            <FormattedMessage id="userLoginName" />:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-username-login">
                                             {formik.values.username}
@@ -1631,7 +1633,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="yourPersonalInformation"/>
+                                            <FormattedMessage id="yourPersonalInformation" />
                                         </Typography>
                                         {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                         Already have an account?
@@ -1641,7 +1643,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={12} >
                                     <Stack spacing={1}>
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userIdDoc"/>
+                                            <FormattedMessage id="userIdDoc" />
                                         </Typography>
                                     </Stack>
                                 </Grid>
@@ -1649,17 +1651,18 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6} >
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="idDocType"/>:
+                                            <FormattedMessage id="idDocType" />:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" name="preview-idDocType">
-                                            {selectedIdDocType.label}
+                                            {intl.formatMessage({ id: selectedIdDocType?.label??" " })}
+                                           
                                         </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="idDocNumber"/>:
+                                            <FormattedMessage id="idDocNumber" />:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="idNo-login">
                                             {formik.values.idNo} {selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null}
@@ -1670,7 +1673,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userEnglishName"/>:
+                                            <FormattedMessage id="userEnglishName" />:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-enName-signup">
                                             {formik.values.enName}
@@ -1680,7 +1683,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userChineseName"/>:
+                                            <FormattedMessage id="userChineseName" />:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-chName-signup">
                                             {formik.values.chName}
@@ -1690,7 +1693,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="formAddress"/>:
+                                            <FormattedMessage id="formAddress" />:
                                         </Typography>
                                         <Stack spacing={1} direction="column">
                                             <Typography variant="pnspsFormHeader" id="preview-address1-signup">
@@ -1709,19 +1712,19 @@ const CustomFormWizard = (props) => {
                                             {selectedAddress5.label === "hongKong" ?
                                                 <Stack direction="row">
                                                     <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
-                                                        <FormattedMessage id="region"/>:
+                                                        <FormattedMessage id="region" />:
                                                     </Typography>
                                                     <Typography variant="pnspsFormHeader">
-                                                        {!selectedAddress4? "" : intl.formatMessage({id: selectedAddress4.type})}
+                                                        {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })}
                                                     </Typography>
                                                 </Stack>
                                                 : null}
                                             <Stack direction="row">
                                                 <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
-                                                    <FormattedMessage id="regionOrCountry"/>:
+                                                    <FormattedMessage id="regionOrCountry" />:
                                                 </Typography>
                                                 <Typography variant="pnspsFormHeader">
-                                                    {intl.formatMessage({id: selectedAddress5.type})}
+                                                    {intl.formatMessage({ id: selectedAddress5.type })}
                                                 </Typography>
                                             </Stack>
                                         </Stack>
@@ -1730,14 +1733,14 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="yourContact"/>
+                                            <FormattedMessage id="yourContact" />
                                         </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userContactEmail"/>:
+                                            <FormattedMessage id="userContactEmail" />:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-email-signup">
                                             {formik.values.email}
@@ -1747,7 +1750,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userContactNumber"/>:
+                                            <FormattedMessage id="userContactNumber" />:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-phone-signup">
                                             +{formik.values.phoneCountryCode} {formik.values.phone}
@@ -1758,7 +1761,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={6}>
                                         <Stack spacing={1} direction="row">
                                             <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                                <FormattedMessage id="userFaxNumber"/>:
+                                                <FormattedMessage id="userFaxNumber" />:
                                             </Typography>
                                             <Typography variant="pnspsFormHeader" id="preview-fax-signup">
                                                 +{formik.values.faxCountryCode} {formik.values.fax}
@@ -1771,7 +1774,7 @@ const CustomFormWizard = (props) => {
                                         <Grid item xs={12} md={12}>
                                             <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                 <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                                    <FormattedMessage id="userIdDoc"/>
+                                                    <FormattedMessage id="userIdDoc" />
                                                 </Typography>
                                                 {fileList != null ?
                                                     <PreviewUploadFileTable key="previewTable" recordList={fileListData} /> : null}
@@ -1794,13 +1797,13 @@ const CustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                         <Typography display="inline" variant="h4">
-                                            <FormattedMessage id="registerSubmitted"/>
+                                            <FormattedMessage id="registerSubmitted" />
                                         </Typography>
                                         <Typography display="inline" variant="h4">
-                                            <FormattedMessage id="emailSent"/>
+                                            <FormattedMessage id="emailSent" />
                                         </Typography>
                                         <Button variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">
-                                            <FormattedMessage id="backToLogin"/>
+                                            <FormattedMessage id="backToLogin" />
                                         </Typography></Button>
                                     </Stack>
                                     :
@@ -1812,7 +1815,7 @@ const CustomFormWizard = (props) => {
                                             <FormattedMessage id="registerFail" />
                                         </Typography>
                                         <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">
-                                            <FormattedMessage id="backToLogin"/>
+                                            <FormattedMessage id="backToLogin" />
                                         </Typography></Button>
                                     </Stack>
                                 }
diff --git a/src/translations/en.json b/src/translations/en.json
index f4c6a1e..73f7a15 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -29,6 +29,23 @@
   "noMoreThen40Words": "Must not exceed 40 characters",
   "noMoreThen255Words": "Must not exceed 255 characters",
 
+  "MSG.registerIAmSmart": "You may click the \"iAM Smart\" button to fill the personal information automatically or enter the information manually to activate the PNSPS account now.<br/>If you want to use \"iAM Smart\" to fill the personal information, please download the \"iAM Smart\" mobile app and register as an \"iAM Smart\" user first.",
+  "MSG.registerPersonal": "To complete the online application, you need to upload digital copies of identification documents.<br/>e.g. Hong Kong Identity Card, Passport, Mainland China Identity Card, Professional Practicing Certificate, etc.",
+  "MSG.registerOrg": "You need to upload the proof documents for the online application.<br/>e.g. Business Registration Certificate, Professional Practicing Certificate, etc.",
+  "MSG.paymentMsg": "Your application and payment have been received",
+
+  "MSG.paymentCancelMsg1": "付款取消訊息：",
+  "MSG.paymentCancelMsg2": "你的付款已被取消。我們收到了你的付款請求，但由於某些原因，付款無法完成。請注意以下事項：",
+  "MSG.paymentCancelMsg3": "如果你主動取消了支付，請確認並確保取消是你的意願。",
+  "MSG.paymentCancelMsg4": "如果付款被取消是由於系統問題或其他原因，請你嘗試以下解決方法：",
+  "MSG.paymentCancelMsg5": "檢查你的支付帳戶是否有任何異常或限制。",
+  "MSG.paymentCancelMsg6": "確保你的付款資訊準確無誤。",
+  "MSG.paymentCancelMsg7": "檢查你的網路連線是否正常。",
+  "MSG.paymentCancelMsg8": "如果你需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決你的付款問題。謝謝！",
+
+
+
+
   "registerTitle1": "Become",
   "registerTitle2": "Gazette Notice",
   "registerTitle3": "Publisher now",
@@ -53,7 +70,7 @@
   "publicNoticePaymentProofDoneAndPaid": "Public Notice: Proofreading Completed and Payment",
   "publicNoticePaymentProofComment": "Public Notice: Proofreading Reply",
   "publicNoticePaymentProofInfo": "Public Notice: Proofreading Information",
-  "proofRecord": "Proof Record",
+  "proofRecord": "Proof Records",
   "onlinePaymentHistory": "Online Payment History",
   "setting": "Settings",
   "companyOrUserRecord": "Company/Institutional User Records",
@@ -62,7 +79,7 @@
   "login": "Login",
   "logout": "Logout",
   "iAmSmartLogin": "iAM Smart Login",
-  "continueWithIAmSmart": "Continue with iAmSmart",
+  "continueWithIAmSmart": "Continue with iAM Smart",
   "authorizeIAmSmartForInfo": "Authorize iAmSmart to provide personal information",
   "iAmSmartSubTitle": "In order to complete the account opening and establish a connection with \"iAmStart\", please authorize \"iAmSmart\" to provide the following personal information:",
   "iAmSmartAutoFillIn": "Use \"iAmSmart\" to automatically fill in",
@@ -96,20 +113,20 @@
   "user": "User",
   "personalUser": "Personal user",
   "becomeNewPersonalUser": "Become New Personal User",
-  "registerNewPersonalUser": "Apply for personal user",
-  "businessUser": "Organization/Company User",
-  "registerNewBusinessUser": "Applying Organization/Company user",
-  "becomeNewBusinessUser": "Become New Organization/Company user",
+  "registerNewPersonalUser": "Apply as personal user",
+  "businessUser": "Organisation/Company User",
+  "registerNewBusinessUser": "Apply as organisation/company user",
+  "becomeNewBusinessUser": "Become New Organisation/Company user",
   "userName": "Username",
   "userChineseName": "Chinese Name",
   "userEnglishName": "English Name",
   "userContactName": "Name",
   "userRequireChineseName": "Please enter your Chinese name",
   "userRequireEnglishName": "Please enter your English name",
-  "userRequireName": "Please enter your name",
+  "userRequireName": "Name is required.",
   "userContactEmail": "Email",
   "confirmEmail": "Confirm Email",
-  "requireEmail": "Please enter your email",
+  "requireEmail": "Email address is required.",
   "validEmailFormat": "Please enter a valid email",
   "validSameEmail": "Please enter same email address",
   "emailUsed": "This email has been registered, please use another email",
@@ -117,7 +134,7 @@
   "userContactNumber": "Contact Number",
   "contactFaxNumber": "Contact Fax",
   "requiredValidNumber": "Please enter a valid contact number",
-  "requireContactNumber": "Please enter your contact number",
+  "requireContactNumber": "Contact number is required.",
   "require3Number": "Please enter an 3-digit number",
   "require8Number": "Please enter an 8-digit number",
   "requireAtLeast8Number": "Please enter at least 8 digits",
@@ -135,9 +152,9 @@
   "personalInformation": "Personal Information",
   "yourPersonalInformation": "Your Personal Information",
   "yourLoginInformation": "Your Login Information",
-  "yourBusinessInformation": "Your Organization/Company Information",
-  "businessEngName": "English name of Organization/Company",
-  "businessChName": "Chinese name of Organization/Company",
+  "yourBusinessInformation": "Your Organisation/Company Information",
+  "businessEngName": "English name of Organisation/Company",
+  "businessChName": "Chinese name of Organisation/Company",
   "preview": "Preview",
   "finishSubmission": "Finish Submission",
   "reset": "Reset",
@@ -199,6 +216,8 @@
   "requireUsername": "Please enter user name",
   "requirePassword": "Please enter password",
   "regionOrCountry": "Country/Region",
+  "pleaseFillInCountry": "Please enter the Country/Region",
+  "pleaseFillInDistrict": "Please enter the District",
   "hongKong": "Hong Kong",
   "mainland": "Mainland China",
   "macau": "Macau",
@@ -362,6 +381,8 @@
   "pendingFor": "Pending approval",
   "active": "Active",
   "primary": "Primary",
+  "MSG.setPrimay": "Are you sure to mark user “{username}” as primary user?",
+  "MSG.revokePrimay": "Are you sure to revoke the primary user from user “{username}”?",
 
   "submitApplication": "Submit public notice application",
   "applicationSubheading": "Provide your advertisement content with formatting, proofreading and pricing.",
@@ -372,7 +393,7 @@
   "msgDetails": "Message Details",
 
   "userDetail": "User Details",
-  "userProfile": "User Profile",
+  "userProfile": "My Profile",
   "primaryUser": "Primary User",
   "resetAndBack": "Reset & Back",
   "edit": "Edit",
@@ -391,8 +412,8 @@
   "loading": "Loading...",
   "ok": "Ok",
 
-  "organizationProfile": "Organization Profile",
-  "organizationDetails": "Organization Details",
+  "organizationProfile": "Organisation Profile",
+  "organizationDetails": "Organisation Details",
   "brNo": "BR No.",
   "creditorAccount": "Creditor account",
   "nameEng": "Name (Eng)",
diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json
index 2c6e178..d58388b 100644
--- a/src/translations/zh-CN.json
+++ b/src/translations/zh-CN.json
@@ -29,6 +29,21 @@
   "noMoreThen40Words": "不得超过 40 个字符",
   "noMoreThen255Words": "不得超过 255 个字符",
 
+  "MSG.registerIAmSmart": "你可点击「智方便」按钮，系统会自动输入个人资料，或自行输入个人资料，以即时启动 公共启事提交及缴费系统 帐户。<br/>如欲使用「智方便」提供个人资料，请先下载「智方便」流动应用程式并登记成为「智方便」用户。",
+  "MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。 <br/>如：香港身份证; 护照; 中国内地身份证; 专业执业证书等",
+  "MSG.registerOrg": "需上载以下任何一份证明文件以进行网上申请。 <br/>如：商业登记证；专业执业证书",
+  "MSG.paymentMsg": "你的申请和付款已收到",
+  
+  "MSG.paymentCancelMsg1": "付款取消讯息：",
+  "MSG.paymentCancelMsg2": "你的付款已被取消。我们收到了你的付款请求，但由于某些原因，付款无法完成。请注意以下事项：",
+  "MSG.paymentCancelMsg3": "如果你主动取消了支付，请确认并确保取消是你的意愿。",
+  "MSG.paymentCancelMsg4": "如果付款被取消是由于系统问题或其他原因，请你尝试以下解决方法：",
+  "MSG.paymentCancelMsg5": "检查你的支付帐户是否有任何异常或限制。",
+  "MSG.paymentCancelMsg6": "确保你的付款资讯准确无误。",
+  "MSG.paymentCancelMsg7": "检查你的网路连线是否正常。",
+  "MSG.paymentCancelMsg8": "如果你需要进一步的协助或有任何疑问，请随时与我们联系，我们将尽快解决你的付款问题。谢谢！",
+
+
   "registerTitle1": "立即成为",
   "registerTitle2": "宪报刊登公告",
   "registerTitle3": "用户",
@@ -195,6 +210,8 @@
   "requirePassword": "请输入密码",
   "region": "区域 (只适用于香港)",
   "regionOrCountry": "国家/地区",
+  "pleaseFillInCountry": "请输入国家/地区",
+  "pleaseFillInDistrict": "请输入地区",
   "hongKong": "香港",
   "mainland": "内地",
   "macau": "澳门",
@@ -357,7 +374,9 @@
   "unlock": "解锁",
   "pendingFor": "待批核",
   "active": "生效中",
-  "primary": "源自",
+  "primary": "主要账户",
+  "MSG.setPrimay": "是否确定设定 “{username}” 为主要账户吗？",
+  "MSG.revokePrimay": "是否确定要撤销 “{username}” 为主要用户吗？",
 
   "submitApplication": "提交公共启事申请",
   "applicationSubheading": "提供你的启事内容作排版，校对及计价。",
@@ -368,7 +387,7 @@
   "msgDetails": "消息详情",
 
   "userDetail": "用户详细信息",
-  "userProfile": "用户个人资料",
+  "userProfile": "我的个人资料",
   "primaryUser": "主要用户",
   "resetAndBack": "重置并返回",
   "edit": "编辑",
diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json
index 33bc175..3d91b10 100644
--- a/src/translations/zh-HK.json
+++ b/src/translations/zh-HK.json
@@ -29,6 +29,21 @@
   "noMoreThen40Words": "不得超過 40 個字符",
   "noMoreThen255Words": "不得超過 255 個字符",
 
+  "MSG.registerIAmSmart": "你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動 公共啟事提交及繳費系統 帳戶。<br/>如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。",
+  "MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。<br/>如：香港身份證; 護照; 中國內地身份證; 專業執業証書等",
+  "MSG.registerOrg": "需上載以下任何一份證明文件以進行網上申請。<br/>如：商業登記證；專業執業證書",
+  "MSG.paymentMsg": "你的申請和付款已收到",
+
+  "MSG.paymentCancelMsg1": "付款取消訊息：",
+  "MSG.paymentCancelMsg2": "你的付款已被取消。我們收到了你的付款請求，但由於某些原因，付款無法完成。請注意以下事項：",
+  "MSG.paymentCancelMsg3": "如果你主動取消了支付，請確認並確保取消是你的意願。",
+  "MSG.paymentCancelMsg4": "如果付款被取消是由於系統問題或其他原因，請你嘗試以下解決方法：",
+  "MSG.paymentCancelMsg5": "檢查你的支付帳戶是否有任何異常或限制。",
+  "MSG.paymentCancelMsg6": "確保你的付款資訊準確無誤。",
+  "MSG.paymentCancelMsg7": "檢查你的網路連線是否正常。",
+  "MSG.paymentCancelMsg8": "如果你需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決你的付款問題。謝謝！",
+
+
   "registerTitle1": "立即成為",
   "registerTitle2": "憲報刊登公告",
   "registerTitle3": "用戶",
@@ -200,6 +215,8 @@
   "requirePassword": "請輸入密碼",
   "region": "區域 (只適用於香港)",
   "regionOrCountry": "國家/地區",
+  "pleaseFillInCountry": "請輸入國家/地區",
+  "pleaseFillInDistrict": "請輸入地區",
   "hongKong": "香港",
   "mainland": "內地",
   "macau": "澳門",
@@ -363,6 +380,8 @@
   "pendingFor": "待批核",
   "active": "生效中",
   "primary": "主要帳戶",
+  "MSG.setPrimay": "是否確定設定 “{username}” 為主要帳戶嗎？",
+  "MSG.revokePrimay": "是否確定要撤銷 “{username}” 為主要使用者嗎？",
 
   "submitApplication": "提交公共啟事申請",
   "applicationSubheading": "提供你的啟事內容作排版，校對及計價。",
@@ -373,7 +392,7 @@
   "msgDetails": "消息詳情",
 
   "userDetail": "使用者詳細資料",
-  "userProfile": "使用者個人資料",
+  "userProfile": "我的個人資料",
   "primaryUser": "主要使用者",
   "resetAndBack": "重置並返回",
   "edit": "編輯",
diff --git a/src/utils/DateUtils.js b/src/utils/DateUtils.js
index 43771f0..2572448 100644
--- a/src/utils/DateUtils.js
+++ b/src/utils/DateUtils.js
@@ -2,7 +2,7 @@ import dayjs from 'dayjs';
 
 export const datetimeStr = (date) =>{
     
-    return dateFormat(date,"DD-MM-YYYY HH:mm:ss")
+    return dateFormat(date,"YYYY-MM-DD HH:mm:ss")
 };
 
 export const dateStr = (date) =>{