diff --git a/src/pages/Payment/Details_GLD/DataGrid.js b/src/pages/Payment/Details_GLD/DataGrid.js
index 3bc24fd..15d2bcb 100644
--- a/src/pages/Payment/Details_GLD/DataGrid.js
+++ b/src/pages/Payment/Details_GLD/DataGrid.js
@@ -2,10 +2,14 @@
 import {
     Typography,
 } from '@mui/material';
-
+import {
+    isORGLoggedIn,
+  } from "utils/Utils";
 import * as React from 'react';
 import * as FormatUtils from "utils/FormatUtils"
 import { FiDataGrid } from "components/FiDataGrid";
+import * as DateUtils from "utils/DateUtils"
+
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -23,14 +27,28 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }, [recordList]);
 
     const columns = [
+        {
+            field: "id",
+            headerName: "No.",
+            filterable: false,
+            renderCell: (params) => {
+                return (params.row.index_number);
+
+            }
+        },
         {
             id: 'appNo',
             field: 'appNo',
-            headerName: 'App No.',
+            headerName:'Particulars',
             flex: 1,
             renderCell: (params) => {
-                let appNo = params?.row?.appNo??"";
-                return <div style={{ margin: 4 }}>{appNo}<br/>{params?.row?.remarks??""}</div>
+                let appNo = params.row.appNo;
+                // console.log(params)
+                return <div style={{ margin: 4, textAlign:"left"}}>Gazette Supplement No. 6 <br/>
+                    {isORGLoggedIn()?<>Care Of: {params.row.careOf}<br /></>:null}
+                    App No: {appNo}<br/>
+                    Issue Date: {DateUtils.dateStr(params.row.issueDate)}<br/>
+                    Length: {params.row.length+ " cm"}</div>
             },
         },
         {
@@ -48,7 +66,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         <div style={{ minHeight: 400, width: '100%' }}>
 
             <FiDataGrid
-                rowHeight={80}
+                rowHeight={150}
                 rows={rows}
                 columns={columns}
                 initialState={{
diff --git a/src/pages/Payment/Details_GLD/PaymentDetails.js b/src/pages/Payment/Details_GLD/PaymentDetails.js
index 5d6ba36..b8b6714 100644
--- a/src/pages/Payment/Details_GLD/PaymentDetails.js
+++ b/src/pages/Payment/Details_GLD/PaymentDetails.js
@@ -3,6 +3,7 @@ import {
     Grid,
     Typography,
     FormLabel,
+    Button
 } from '@mui/material';
 
 import * as React from "react";
@@ -11,8 +12,9 @@ import * as PaymentStatus from "utils/statusUtils/PaymentStatus";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+import DownloadIcon from '@mui/icons-material/Download';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const PaymentDetails = ({ formData, }) => {
+const PaymentDetails = ({ formData,doPrint }) => {
 
     const [data, setData] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
@@ -51,13 +53,13 @@ const PaymentDetails = ({ formData, }) => {
                 <form>
                     <Grid container>
                         <Grid item xs={12} md={12} >
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
+                            <Grid container alignItems="center">
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right", alignItems: 'center', color: "#000000" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Status:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
                                         {PaymentStatus.getStatus_Eng(data.status)}
                                     </FormLabel>
@@ -66,12 +68,12 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Trans No.:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {data.payload?.transactionid}
                                     </FormLabel>
@@ -80,12 +82,12 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Trans Date:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {data.transDateStr + " (DD/MM/YYYY)"}
                                     </FormLabel>
@@ -94,12 +96,12 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Trans Time:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {data.transTimeStr + " (HH:MI:SS)"}
                                     </FormLabel>
@@ -108,12 +110,12 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         EGIS Ref No.:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {data.egisRefNo}
                                     </FormLabel>
@@ -122,12 +124,12 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Payment Amount:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
                                     </FormLabel>
@@ -136,19 +138,33 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Payment Method:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {getPaymentMethod()}
                                     </FormLabel>
                                 </Grid>
                             </Grid>
                         </Grid>
-
+                        <Grid item xs={12} md={12}>
+                            <Grid container alignItems="center">
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                        Payment Receipt:
+                                    </FormLabel>
+                                </Grid>
+                                <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                        <Button className="printHidden" variant="contained" sx={{ mt:2 }} onClick={doPrint}>
+                                            <DownloadIcon/>
+                                            <Typography sx={{fontSize: "16px"}}>Download</Typography>
+                                        </Button>
+                                </Grid>
+                            </Grid>
+                        </Grid>
                     </Grid>
                 </form>
             </MainCard>
diff --git a/src/pages/Payment/Details_GLD/index.js b/src/pages/Payment/Details_GLD/index.js
index 3db673c..236ed56 100644
--- a/src/pages/Payment/Details_GLD/index.js
+++ b/src/pages/Payment/Details_GLD/index.js
@@ -4,7 +4,7 @@ import {
     Typography,
     Stack,
     Box,
-    Button
+    // Button
 } from '@mui/material';
 import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
@@ -37,20 +37,20 @@ const Index = () => {
     const [record, setRecord] = React.useState();
     const [itemList, setItemList] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
-    const [detailsOrder, setDetailsOrder] = React.useState(2);
+    // const [detailsOrder, setDetailsOrder] = React.useState(2);
 
     React.useEffect(() => {
         loadForm();
-        window.addEventListener('resize', handleResize);
+        // window.addEventListener('resize', handleResize);
     }, []);
 
     React.useEffect(() => {
         setOnReady(true);
     }, [record]);
 
-    const handleResize = () => {
-        setDetailsOrder(window.innerWidth > 1023 ? 2 : -1);
-    }
+    // const handleResize = () => {
+    //     setDetailsOrder(window.innerWidth > 1023 ? 2 : -1);
+    // }
 
     const doPrint = () => {
         // window.print();
@@ -96,21 +96,12 @@ const Index = () => {
                         </Grid>
                         {/*row 1*/}
                         <Grid item xs={12} md={12} sx={{textAlign: "center" }}>
-                        <Button className="printHidden" variant="outlined" sx={{mt:2}} onClick={doPrint}>
-                                <Typography variant="h5">Print</Typography>
-                            </Button>
-                            <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
-                                <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{  height: '100%', order: 1 }}>
-                                    <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                        <DataGrid
-                                            recordList={itemList}
-                                        />
-                                    </Box>
-                                </Grid>
-                                <Grid className="printOrder" item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%', order: detailsOrder }}>
+                            <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
+                                <Grid className="printOrder" item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%', order: 1 }}>
                                     <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
                                         <PaymentDetails
                                             formData={record}
+                                            doPrint={doPrint}
                                             style={{
                                                 display: "flex",
                                                 height: "100%",
@@ -119,6 +110,13 @@ const Index = () => {
                                         />
                                     </Box>
                                 </Grid>
+                                <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{  height: '100%', order: 2 }}>
+                                    <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                        <DataGrid
+                                            recordList={itemList}
+                                        />
+                                    </Box>
+                                </Grid>
                             </Grid>
                         </Grid>
                         {/*row 2*/}
diff --git a/src/pages/Payment/Details_Public/DataGrid.js b/src/pages/Payment/Details_Public/DataGrid.js
index 4f84296..4578ce1 100644
--- a/src/pages/Payment/Details_Public/DataGrid.js
+++ b/src/pages/Payment/Details_Public/DataGrid.js
@@ -40,7 +40,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'appNo',
             field: 'appNo',
-            headerName:'詳細',
+            headerName:'項目',
             flex: 1,
             renderCell: (params) => {
                 let appNo = params.row.appNo;
@@ -55,7 +55,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'fee',
             field: 'fee',
-            headerName: '金額 ($)',
+            headerName: '金額 (HK$)',
             width: 150,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
@@ -77,7 +77,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 }}
             />
 
-            <Typography align="right" variant= "h3">付款總額: <span style={{ color: "blue", fontWeight: "bold", }}> HK$ {FormatUtils.currencyFormat(total)}</span></Typography>
+            <Typography align="right" variant= "h3">付款總額: <span style={{ color: "blue", fontWeight: "bold", }}> (HK$) {FormatUtils.currencyFormat(total)}</span></Typography>
         </div>
     );
 }
diff --git a/src/pages/Payment/Details_Public/PaymentDetails.js b/src/pages/Payment/Details_Public/PaymentDetails.js
index 0305e6b..c24c444 100644
--- a/src/pages/Payment/Details_Public/PaymentDetails.js
+++ b/src/pages/Payment/Details_Public/PaymentDetails.js
@@ -3,6 +3,7 @@ import {
     Grid,
     Typography,
     FormLabel,
+    Button
 } from '@mui/material';
 
 import * as React from "react";
@@ -11,8 +12,9 @@ import * as PaymentStatus from "utils/statusUtils/PaymentStatus";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+import DownloadIcon from '@mui/icons-material/Download';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const PaymentDetails = ({ formData, }) => {
+const PaymentDetails = ({ formData,doPrint }) => {
 
     const [data, setData] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
@@ -45,106 +47,125 @@ const PaymentDetails = ({ formData, }) => {
                 border={false}
                 content={false}
             >
-                <Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
+                <Typography variant="h5" sx={{ textAlign: "center", mb: 2, borderBottom: "1px solid black" }}>
                     付款詳情
                 </Typography>
                 <form>
-                    <Grid container>
-                        <Grid item xs={12} md={12} >
+                    <Grid container >
+                        <Grid item>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
-                                    <FormLabel sx={{ color: "#000000" }}>
-                                        狀態:
-                                    </FormLabel>
+                                <Grid item xs={12} md={12} >
+                                    <Grid container alignItems="center">
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right", alignItems: 'center', color: "#000000" }}>
+                                            <FormLabel sx={{ color: "#000000" }}>
+                                                狀態:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid item xs={6} md={5} sx={{ ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
+                                                {PaymentStatus.getStatus_Cht(data.status)}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
-                                        {PaymentStatus.getStatus_Cht(data.status)}
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                交易號碼:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid item  xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {data.payload?.transactionid}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        交易號碼:
-                                    </FormLabel>
-                                </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {data.payload?.transactionid}
-                                    </FormLabel>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        交易日期:
-                                    </FormLabel>
-                                </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {data.transDateStr + " (DD/MM/YYYY)"}
-                                    </FormLabel>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        交易時間:
-                                    </FormLabel>
-                                </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {data.transTimeStr + " (HH:MI:SS)"}
-                                    </FormLabel>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        付款參考號碼:
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                交易日期:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {data.transDateStr + " (DD/MM/YYYY)"}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {data.egisRefNo}
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                交易時間:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {data.transTimeStr + " (HH:MI:SS)"}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        付款總額:
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                付款參考號碼:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {data.egisRefNo}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                付款總額:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        付款方式:
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                付款方式:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {getPaymentMethod()}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {getPaymentMethod()}
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container alignItems="center">
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                付款收據:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                                <Button className="printHidden" variant="contained" sx={{ mt:2 }} onClick={doPrint}>
+                                                    <DownloadIcon/>
+                                                    <Typography sx={{fontSize: "16px"}}>下載</Typography>
+                                                </Button>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
                             </Grid>
                         </Grid>
diff --git a/src/pages/Payment/Details_Public/index.js b/src/pages/Payment/Details_Public/index.js
index 4beeb56..c563ef6 100644
--- a/src/pages/Payment/Details_Public/index.js
+++ b/src/pages/Payment/Details_Public/index.js
@@ -4,7 +4,7 @@ import {
     Typography,
     Stack,
     Box,
-    Button
+    // Button
 } from '@mui/material';
 import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
@@ -37,21 +37,21 @@ const Index = () => {
     const [record, setRecord] = React.useState();
     const [itemList, setItemList] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
-    const [detailsOrder, setDetailsOrder] = React.useState(2);
+    // const [detailsOrder, setDetailsOrder] = React.useState(2);
 
     React.useEffect(() => {
         loadForm();
 
-        window.addEventListener('resize', handleResize)
+        // window.addEventListener('resize', handleResize)
     }, []);
 
     React.useEffect(() => {
         setOnReady(true);
     }, [record]);
 
-    const handleResize = () => {
-        setDetailsOrder(window.innerWidth > 1023 ? 2 : -1);
-    }
+    // const handleResize = () => {
+    //     setDetailsOrder(window.innerWidth > 1023 ? 2 : -1);
+    // }
 
     const doPrint = () => {
         // window.print();
@@ -89,7 +89,6 @@ const Index = () => {
                         {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
                     </style>
                     <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-
                         <Grid className="printHidden" item xs={12} width="100%">
                             <div style={BackgroundHead} width="100%">
                                 <Stack direction="row" height='70px'>
@@ -99,21 +98,12 @@ const Index = () => {
                         </Grid>
                         {/*row 1*/}
                         <Grid item xs={12} md={12} spacing={2} sx={{ textAlign: "center" }}>
-                            <Button className="printHidden" variant="outlined" sx={{ mt:2 }} onClick={doPrint}>
-                                <Typography variant="h5">Print</Typography>
-                            </Button>
-                            <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
-                                <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 1 }}>
-                                    <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                        <DataGrid
-                                            recordList={itemList}
-                                        />
-                                    </Box>
-                                </Grid>
-                                <Grid item className="printOrder" xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%', order: detailsOrder }}>
+                            <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 }}>
                                     <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
                                         <PaymentDetails
                                             formData={record}
+                                            doPrint={doPrint}
                                             style={{
                                                 display: "flex",
                                                 height: "100%",
@@ -122,6 +112,13 @@ const Index = () => {
                                         />
                                     </Box>
                                 </Grid>
+                                <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 2 }}>
+                                    <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                        <DataGrid
+                                            recordList={itemList}
+                                        />
+                                    </Box>
+                                </Grid>
                             </Grid>
                         </Grid>
                         {/*row 2*/}
diff --git a/src/pages/Payment/FPS/AckPage.js b/src/pages/Payment/FPS/AckPage.js
index 3087b9a..2e1d08e 100644
--- a/src/pages/Payment/FPS/AckPage.js
+++ b/src/pages/Payment/FPS/AckPage.js
@@ -43,6 +43,7 @@ const AckPage = () => {
     const [paymentData, setPaymentData] = React.useState({});
     const [responeData, setResponeDataData] = React.useState({});
     const [itemList, setItemList] = React.useState([]);
+    const [paymentId, setPaymentId] = React.useState("");
     
     const [transactionData, setTransactionData] = React.useState({});
     // const [transactionDate, setTransactionDate] = React.useState("");
@@ -88,6 +89,7 @@ const AckPage = () => {
             },
             onSuccess: function(responseData){
                 setResponeDataData(responseData)
+                setPaymentId(responseData.paymentdetail.paymentid)
                 if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {
                     localStorage.removeItem("webtoken");
                     localStorage.removeItem("transactionid");
@@ -136,143 +138,153 @@ const AckPage = () => {
         // )
     }
 
+    const doPrint = () => {
+        // window.print();
+        HttpUtils.fileDownload({
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+paymentId,
+        });
+    };
+
     return (
         !onReady ?
             <LoadingComponent />
             :
             transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ?
                 (
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款成功</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={12} >
-
-                                        <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                            您的申請和付款已收到
-                                        </Typography>
-
-                                        <Grid container>
-                                            <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
-                                                <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
-                                                    <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%' }}>
-                                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                                            <DataGrid
-                                                                recordList={itemList}
-                                                            />
-                                                        </Box>
-                                                    </Grid>
-                                                    <Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
-                                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                                            <PaymentDetails
-                                                                formData={paymentData}
-                                                                style={{
-                                                                    display: "flex",
-                                                                    height: "100%",
-                                                                    flex: 1
-                                                                }}
-                                                            />
-                                                        </Box>
-                                                    </Grid>
-                                                </Grid>
-                                            </Grid>
-                                         
-                                        </Grid>
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center">
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款成功</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*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" }}>
+                                    您的申請和付款已收到
+                                </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 }}>
+                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                            <PaymentDetails
+                                                formData={paymentData}
+                                                doPrint={doPrint}
+                                                style={{
+                                                    display: "flex",
+                                                    height: "100%",
+                                                    flex: 1
+                                                }}
+                                            />
+                                        </Box>
+                                    </Grid>
+                                    <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 2 }}>
+                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                            <DataGrid
+                                                recordList={itemList}
+                                            />
+                                        </Box>
                                     </Grid>
-                                </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                 ) :
                 (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款取消</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={8} >
-                                        <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                            付款取消訊息：
-                                            <br /><br />
-                                            您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
-                                            <br /><br />
-                                            如果您主動取消了支付，請確認並確保取消是您的意願。
-                                            <br />
-                                            如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
-                                            <br /><br />
-                                            檢查您的支付帳戶是否有任何異常或限制。
-                                            <br />
-                                            確保您的付款資訊準確無誤。
-                                            <br />
-                                            檢查您的網路連線是否正常。
-                                            <br /><br />
-                                            如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
-                                        </Typography>
-                                    </Grid>
-                                </center>
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款取消</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*row 1*/}
+                            <Grid item xs={12} md={12} >
+                                <Grid container justifyContent="flex-start" alignItems="center" >
+                                    <center>
+                                        <Grid item xs={12} md={8} >
+                                            <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                                付款取消訊息：
+                                                <br /><br />
+                                                您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
+                                                <br /><br />
+                                                如果您主動取消了支付，請確認並確保取消是您的意願。
+                                                <br />
+                                                如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
+                                                <br /><br />
+                                                檢查您的支付帳戶是否有任何異常或限制。
+                                                <br />
+                                                確保您的付款資訊準確無誤。
+                                                <br />
+                                                檢查您的網路連線是否正常。
+                                                <br /><br />
+                                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
+                                            </Typography>
+                                        </Grid>
+                                    </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                     :
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款失敗</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={8} >
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }}direction="column" justifyContent="flex-start" alignItems="center" >
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款失敗</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*row 1*/}
+                            <Grid item xs={12} md={12} >
+                                <Grid container justifyContent="flex-start" alignItems="center" >
+                                    <center>
+                                        <Grid item xs={12} md={8} >
 
-                                        <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                            付款失敗訊息：
-                                            <br /><br />
-                                            親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
-                                            <br /><br />
-                                            您的支付帳戶餘額是否足夠。
-                                            <br />
-                                            您提供的付款資訊是否準確無誤。
-                                            <br />
-                                            請檢查您的網路連線是否正常。
-                                            <br /><br />
-                                            如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
-                                            <br /><br />
-                                            嘗試使用其他付款方式進行付款。
-                                            <br />
-                                            檢查您的支付帳戶是否有異常或限制。
-                                            <br />
-                                            聯絡我們的客服人員尋求協助。
-                                            <br /><br />
-                                            如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
-                                        </Typography>
+                                            <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                                付款失敗訊息：
+                                                <br /><br />
+                                                親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
+                                                <br /><br />
+                                                您的支付帳戶餘額是否足夠。
+                                                <br />
+                                                您提供的付款資訊是否準確無誤。
+                                                <br />
+                                                請檢查您的網路連線是否正常。
+                                                <br /><br />
+                                                如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
+                                                <br /><br />
+                                                嘗試使用其他付款方式進行付款。
+                                                <br />
+                                                檢查您的支付帳戶是否有異常或限制。
+                                                <br />
+                                                聯絡我們的客服人員尋求協助。
+                                                <br /><br />
+                                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
+                                            </Typography>
 
-                                    </Grid>
-                                </center>
+                                        </Grid>
+                                    </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                 )
     );
 };
diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js
index a33ec73..6ff13bd 100644
--- a/src/pages/Payment/FPS/FPS.js
+++ b/src/pages/Payment/FPS/FPS.js
@@ -305,7 +305,7 @@ const Index = () => {
                                             <br />
                                             請在規定時間內完成付款流程
                                             <br />
-                                            {"剩餘時間: "+timeDownCount}
+                                            {"剩餘時間: "+timeDownCount+ "秒"}
                                         </Typography>
                                     }
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
diff --git a/src/pages/Payment/FPS/fpscallback.js b/src/pages/Payment/FPS/fpscallback.js
index 965b563..27c1c7f 100644
--- a/src/pages/Payment/FPS/fpscallback.js
+++ b/src/pages/Payment/FPS/fpscallback.js
@@ -43,6 +43,7 @@ const Fpscallback = () => {
     const [paymentData, setPaymentData] = React.useState({});
     const [responeData, setResponeDataData] = React.useState({});
     const [itemList, setItemList] = React.useState([]);
+    // const [paymentId, setPaymentId] = React.useState("");
     
     const [transactionData, setTransactionData] = React.useState({});
     // const [transactionDate, setTransactionDate] = React.useState("");
@@ -135,7 +136,6 @@ const Fpscallback = () => {
         //     }
         // )
     }
-
     return (
         !onReady ?
             <LoadingComponent />
diff --git a/src/pages/Payment/MultiPaymentWindow.js b/src/pages/Payment/MultiPaymentWindow.js
index bcac377..46fdcfe 100644
--- a/src/pages/Payment/MultiPaymentWindow.js
+++ b/src/pages/Payment/MultiPaymentWindow.js
@@ -136,7 +136,7 @@ const MultiPaymentWindow = (props) => {
             <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
               <Grid item>
                   <Typography variant="h5" sx={{ textAlign: "left" }}>
-                      請選擇付款方式:
+                      請選擇付款方法:
                   </Typography>
               </Grid>
               <Grid item>
diff --git a/src/pages/Payment/PaymentCallback.js b/src/pages/Payment/PaymentCallback.js
index 4f4295a..b0bedb9 100644
--- a/src/pages/Payment/PaymentCallback.js
+++ b/src/pages/Payment/PaymentCallback.js
@@ -38,6 +38,7 @@ const Index = () => {
 
     const [paymentData, setPaymentData] = React.useState({});
     const [itemList, setItemList] = React.useState([]);
+    const [paymentId, setPaymentId] = React.useState("");
 
     const [transactionData, setTransactionData] = React.useState({});
     // const [transactionDate, setTransactionDate] = React.useState("");
@@ -111,6 +112,7 @@ const Index = () => {
                     },
                     onSuccess: function (responseData) {
                         setResponeDataData(responseData)
+                        setPaymentId(responseData.paymentdetail.paymentid)
                         if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {
                             localStorage.removeItem("webtoken");
                             localStorage.removeItem("transactionid");
@@ -137,150 +139,156 @@ const Index = () => {
                 });
             }
         });
-
-
     }
 
+    const doPrint = () => {
+        // window.print();
+        HttpUtils.fileDownload({
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+paymentId,
+        });
+    };
+
     return (
         !onReady ?
             <LoadingComponent />
             :
             transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ?
                 (
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款成功</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={12} >
-
-                                        <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                            您的申請和付款已收到
-                                        </Typography>
-
-                                        <Grid container>
-                                            <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
-                                                <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
-                                                    <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%' }}>
-                                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                                            <DataGrid
-                                                                recordList={itemList}
-                                                            />
-                                                        </Box>
-                                                    </Grid>
-                                                    <Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
-                                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                                            <PaymentDetails
-                                                                formData={paymentData}
-                                                                style={{
-                                                                    display: "flex",
-                                                                    height: "100%",
-                                                                    flex: 1
-                                                                }}
-                                                            />
-                                                        </Box>
-                                                    </Grid>
-                                                </Grid>
-                                            </Grid>
-                                           
-                                        </Grid>
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center">
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款成功</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*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" }}>
+                                    您的申請和付款已收到
+                                </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 }}>
+                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                            <PaymentDetails
+                                                formData={paymentData}
+                                                doPrint={doPrint}
+                                                style={{
+                                                    display: "flex",
+                                                    height: "100%",
+                                                    flex: 1
+                                                }}
+                                            />
+                                        </Box>
+                                    </Grid>
+                                    <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 2 }}>
+                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                            <DataGrid
+                                                recordList={itemList}
+                                            />
+                                        </Box>
                                     </Grid>
-                                </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                 ) :
                 (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?
-
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款取消</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={8} >
-                                        <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                            付款取消訊息：
-                                            <br /><br />
-                                            您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
-                                            <br /><br />
-                                            如果您主動取消了支付，請確認並確保取消是您的意願。
-                                            <br />
-                                            如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
-                                            <br /><br />
-                                            檢查您的支付帳戶是否有任何異常或限制。
-                                            <br />
-                                            確保您的付款資訊準確無誤。
-                                            <br />
-                                            檢查您的網路連線是否正常。
-                                            <br /><br />
-                                            如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
-                                        </Typography>
-                                    </Grid>
-                                </center>
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款取消</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*row 1*/}
+                            <Grid item xs={12} md={12} >
+                                <Grid container justifyContent="flex-start" alignItems="center" >
+                                    <center>
+                                        <Grid item xs={12} md={8} >
+                                            <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                                付款取消訊息：
+                                                <br /><br />
+                                                您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
+                                                <br /><br />
+                                                如果您主動取消了支付，請確認並確保取消是您的意願。
+                                                <br />
+                                                如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
+                                                <br /><br />
+                                                檢查您的支付帳戶是否有任何異常或限制。
+                                                <br />
+                                                確保您的付款資訊準確無誤。
+                                                <br />
+                                                檢查您的網路連線是否正常。
+                                                <br /><br />
+                                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
+                                            </Typography>
+                                        </Grid>
+                                    </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                     :
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款失敗</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={8} >
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }}direction="column" justifyContent="flex-start" alignItems="center" >
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款失敗</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*row 1*/}
+                            <Grid item xs={12} md={12} >
+                                <Grid container justifyContent="flex-start" alignItems="center" >
+                                    <center>
+                                        <Grid item xs={12} md={8} >
 
-                                        <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                            付款失敗訊息：
-                                            <br /><br />
-                                            親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
-                                            <br /><br />
-                                            您的支付帳戶餘額是否足夠。
-                                            <br />
-                                            您提供的付款資訊是否準確無誤。
-                                            <br />
-                                            請檢查您的網路連線是否正常。
-                                            <br /><br />
-                                            如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
-                                            <br /><br />
-                                            嘗試使用其他付款方式進行付款。
-                                            <br />
-                                            檢查您的支付帳戶是否有異常或限制。
-                                            <br />
-                                            聯絡我們的客服人員尋求協助。
-                                            <br /><br />
-                                            如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
-                                        </Typography>
+                                            <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                                付款失敗訊息：
+                                                <br /><br />
+                                                親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
+                                                <br /><br />
+                                                您的支付帳戶餘額是否足夠。
+                                                <br />
+                                                您提供的付款資訊是否準確無誤。
+                                                <br />
+                                                請檢查您的網路連線是否正常。
+                                                <br /><br />
+                                                如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
+                                                <br /><br />
+                                                嘗試使用其他付款方式進行付款。
+                                                <br />
+                                                檢查您的支付帳戶是否有異常或限制。
+                                                <br />
+                                                聯絡我們的客服人員尋求協助。
+                                                <br /><br />
+                                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
+                                            </Typography>
 
-                                    </Grid>
-                                </center>
+                                        </Grid>
+                                    </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                 )
-
     );
 };