diff --git a/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
index e2f1516..71a8ec2 100644
--- a/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
+++ b/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
@@ -37,10 +37,10 @@ import {
 import CloseIcon from '@mui/icons-material/Close';
 import EditNoteIcon from '@mui/icons-material/EditNote';
 import DownloadIcon from '@mui/icons-material/Download';
-import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
-import {ThemeProvider} from "@emotion/react";
+import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
+import { ThemeProvider } from "@emotion/react";
 import * as React from "react";
-import {FormattedMessage, useIntl} from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
     { applicationDetailData,
@@ -146,40 +146,40 @@ const ApplicationDetailCard = (
                             mb={2}
                         >
                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                            {
-                                currentApplicationDetailData.status == "confirmed" ?
-                                    <Button
-                                        variant="contained"
-                                        color="create"
-                                        onClick={() => { checkExprityDate(true) }}
-                                        disabled={currentApplicationDetailData.status == "rejected"
-                                            || currentApplicationDetailData.status == "cancelled"
-                                            || currentApplicationDetailData.status == "paid"
-                                            || currentApplicationDetailData.creditor}
-                                        startIcon={<EditNoteIcon />}
-                                        aria-label={intl.formatMessage({id: 'payFor'})}
-                                    >
-                                        <FormattedMessage id="payFor"/>
-                                    </Button>
-                                    : null
-                            }
-                            <Button
-                                variant="contained"
-                                onClick={cancelledClick()}
-                                color="edit"
-                                disabled={currentApplicationDetailData.status !== "submitted"}
-                                title={intl.formatMessage({id: 'cancel'})}
-                                startIcon={<CloseIcon />}
-                                aria-label={intl.formatMessage({id: 'cancel'})}
-                            >
-                                <FormattedMessage id="cancel"/>
-                            </Button>
+                                {
+                                    currentApplicationDetailData.status == "confirmed" ?
+                                        <Button
+                                            variant="contained"
+                                            color="create"
+                                            onClick={() => { checkExprityDate(true) }}
+                                            disabled={currentApplicationDetailData.status == "rejected"
+                                                || currentApplicationDetailData.status == "cancelled"
+                                                || currentApplicationDetailData.status == "paid"
+                                                || currentApplicationDetailData.creditor}
+                                            startIcon={<EditNoteIcon />}
+                                            aria-label={intl.formatMessage({ id: 'payFor' })}
+                                        >
+                                            <FormattedMessage id="payFor" />
+                                        </Button>
+                                        : null
+                                }
+                                <Button
+                                    variant="contained"
+                                    onClick={cancelledClick()}
+                                    color="edit"
+                                    disabled={currentApplicationDetailData.status !== "submitted"}
+                                    title={intl.formatMessage({ id: 'cancel' })}
+                                    startIcon={<CloseIcon />}
+                                    aria-label={intl.formatMessage({ id: 'cancel' })}
+                                >
+                                    <FormattedMessage id="cancel" />
+                                </Button>
                             </ThemeProvider>
                         </Stack>
                     </Grid>
                 </Grid>
                 <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
-                    <FormattedMessage id="publicNoticeDetailTitle"/>
+                    <FormattedMessage id="publicNoticeDetailTitle" />
                 </Typography>
                 <form>
                     <Grid container direction="column">
@@ -191,7 +191,7 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="applicationId"/>:
+                                                <FormattedMessage id="applicationId" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -221,36 +221,37 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="applyStatus"/>:
+                                                <FormattedMessage id="applyStatus" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={4} lg={4}>
                                             <FormControl variant="outlined">
-                                                {currentApplicationDetailData.status? StatusUtils.getStatusByTextIntl(currentApplicationDetailData.status, false,intl) : ""}
+                                                {currentApplicationDetailData.status ? StatusUtils.getStatusByTextIntl(currentApplicationDetailData.status, false, intl) : ""}
                                             </FormControl>
                                         </Grid>
-                                        {
-                                            currentApplicationDetailData.reason ?
-                                                <Grid item xs={12} md={5} lg={5}>
-                                                    <Grid container alignItems={"center"}>
-                                                        <Stack direction="row" justifyContent="flex-start" alignItems="center">
-                                                            <Grid item xs={12} md={7} lg={7}>
-                                                                <FormLabel><Typography variant="pnspsFormParagraph">原因:</Typography></FormLabel>
-                                                            </Grid>
-                                                            <Grid item xs={12} md={5} lg={5}>
-                                                                <FormControl variant="outlined" fullWidth disabled>
-                                                                    <Typography id='reason' variant="pnspsFormParagraph">
-                                                                        {currentApplicationDetailData.reason}
-                                                                    </Typography>
-                                                                </FormControl>
-                                                            </Grid>
-                                                        </Stack>
+
+                                    </Grid>
+                                    {
+                                        currentApplicationDetailData.reason ?
+                                            <Grid item xs={12} md={12} lg={12}>
+                                                <Grid container alignItems={"center"} direction="row" >
+
+                                                    <Grid item xs={12} md={3} lg={3}>
+                                                        <FormLabel><Typography variant="pnspsFormParagraph"><FormattedMessage id="reason" />:</Typography></FormLabel>
                                                     </Grid>
+                                                    <Grid item xs={12} md={9} lg={9}>
+                                                        <FormLabel>
+                                                            <Typography id='reason' variant="pnspsFormParagraph">
+                                                                {currentApplicationDetailData.reason}
+                                                            </Typography>
+                                                        </FormLabel>
+                                                    </Grid>
+
                                                 </Grid>
-                                                : ""
-                                        }
-                                    </Grid>
+                                            </Grid>
+                                            : ""
+                                    }
                                 </Grid>
                             </Grid>
                             <Grid container direction="row" justifyContent="space-between"
@@ -260,7 +261,7 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="applyPerson"/>:
+                                                <FormattedMessage id="applyPerson" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -302,12 +303,12 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: {lg:1} }}>
+                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: { lg: 1 } }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="gazetteCount"/>:
+                                                <FormattedMessage id="gazetteCount" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -341,7 +342,7 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="contactPerson"/>:
+                                                <FormattedMessage id="contactPerson" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -366,12 +367,12 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: {lg:1} }}>
+                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: { lg: 1 } }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="publishDate"/>:
+                                                <FormattedMessage id="publishDate" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -406,7 +407,7 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="userContactNumber"/>:
+                                                <FormattedMessage id="userContactNumber" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -455,7 +456,7 @@ const ApplicationDetailCard = (
                                                 <Grid item xs={12} md={3} lg={3}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <FormLabel><Typography variant="pnspsFormParagraph">
-                                                        <FormattedMessage id="currencyPrice"/>(HK$):
+                                                        <FormattedMessage id="currencyPrice" />(HK$):
                                                     </Typography></FormLabel>
                                                 </Grid>
 
@@ -474,7 +475,7 @@ const ApplicationDetailCard = (
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="userFaxNumber"/>:
+                                            <FormattedMessage id="userFaxNumber" />:
                                         </Typography></FormLabel>
                                     </Grid>
 
@@ -525,12 +526,12 @@ const ApplicationDetailCard = (
                                                 <Grid item xs={12} sm={12} md={2.5} lg={1.6}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <FormLabel><Typography variant="pnspsFormParagraph">
-                                                        <FormattedMessage id="draftFile"/>:
+                                                        <FormattedMessage id="draftFile" />:
                                                     </Typography></FormLabel>
                                                 </Grid>
                                                 <Grid item xs={12} sm={12} md={9} lg={9} >
                                                     <Grid container direction="row" alignItems="center" justifyContent="flex-start">
-                                                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ wordBreak: 'break-word' , }}>
+                                                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ wordBreak: 'break-word', }}>
                                                             <Typography
                                                                 fullWidth
                                                                 id='fileName'
@@ -540,15 +541,15 @@ const ApplicationDetailCard = (
                                                             </Typography>
                                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                                 <Button
-                                                                    sx={{ml:3}}
+                                                                    sx={{ ml: 3 }}
                                                                     variant="contained"
                                                                     onClick={onDownloadClick()}
-                                                                    aria-label={intl.formatMessage({id: 'download'})}
-                                                                    title={intl.formatMessage({id: 'download'})}
+                                                                    aria-label={intl.formatMessage({ id: 'download' })}
+                                                                    title={intl.formatMessage({ id: 'download' })}
                                                                     color="save"
-                                                                    startIcon={<DownloadIcon sx={{alignItems:"center"}}/>}
+                                                                    startIcon={<DownloadIcon sx={{ alignItems: "center" }} />}
                                                                 >
-                                                                    <FormattedMessage id="download"/>
+                                                                    <FormattedMessage id="download" />
                                                                 </Button>
                                                             </ThemeProvider>
                                                         </Grid>
@@ -577,7 +578,7 @@ const ApplicationDetailCard = (
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="extraMark"/>:
+                                            <FormattedMessage id="extraMark" />:
                                         </Typography></FormLabel>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9}>
@@ -601,31 +602,31 @@ const ApplicationDetailCard = (
                         >
                             <DialogTitle>
                                 <Typography variant="h3" >
-                                    <FormattedMessage id="payConfirm"/>
+                                    <FormattedMessage id="payConfirm" />
                                 </Typography>
                             </DialogTitle>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <Typography variant="h4">
-                                        <FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(fee)}
+                                        <FormattedMessage id="totalAmount" /> (HK$): {FormatUtils.currencyFormat(fee)}
                                     </Typography>
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
                                 <Button
                                     onClick={() => setIsPopUp(false)}
-                                    aria-label={intl.formatMessage({id: 'close'})}
+                                    aria-label={intl.formatMessage({ id: 'close' })}
                                 >
                                     <Typography variant="pnspsFormParagraph">
-                                    <FormattedMessage id="close"/>
-                                </Typography></Button>
+                                        <FormattedMessage id="close" />
+                                    </Typography></Button>
                                 <Button
                                     onClick={() => doPayment()}
-                                    aria-label={intl.formatMessage({id: 'confirm'})}
+                                    aria-label={intl.formatMessage({ id: 'confirm' })}
                                 >
                                     <Typography variant="pnspsFormParagraph">
-                                    <FormattedMessage id="confirm"/>
-                                </Typography></Button>
+                                        <FormattedMessage id="confirm" />
+                                    </Typography></Button>
                             </DialogActions>
                         </Dialog>
                     </div>
@@ -653,10 +654,10 @@ const ApplicationDetailCard = (
                             <DialogActions>
                                 <Button
                                     onClick={() => setErrorPopUp(false)}
-                                    aria-label={intl.formatMessage({id: 'close'})}
+                                    aria-label={intl.formatMessage({ id: 'close' })}
                                 >
                                     <Typography variant="pnspsFormParagraph">
-                                        <FormattedMessage id="close"/>
+                                        <FormattedMessage id="close" />
                                     </Typography></Button>
                             </DialogActions>
                         </Dialog>
diff --git a/src/translations/en.json b/src/translations/en.json
index 4be6f6d..ccfaf82 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -12,6 +12,7 @@
   "gazetteDate": "GazetteDate",
   "gazetteLength": "length",
   "gazetteSampleName": "Gazette Supplement No. 6",
+  "reason": "Reason",
 
   "payInstantly": "Instant online payment",
   "payLater": "Pay later",
diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json
index e63ff8e..6058668 100644
--- a/src/translations/zh-CN.json
+++ b/src/translations/zh-CN.json
@@ -12,6 +12,7 @@
   "gazetteDate": "宪报日期",
   "gazetteLength": "长度",
   "gazetteSampleName": "宪报第6号副刊公告",
+  "reason": "原因",
 
   "payInstantly": "即时网上缴费",
   "payLater": "稍后缴费",
diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json
index 3d8e8a1..d3cbdfd 100644
--- a/src/translations/zh-HK.json
+++ b/src/translations/zh-HK.json
@@ -12,6 +12,7 @@
   "gazetteDate": "憲報日期",
   "gazetteLength": "長度",
   "gazetteSampleName": "憲報第6號副刊公告",
+  "reason": "原因",
 
   "payInstantly": "即時網上繳費",
   "payLater": "稍後繳費",