diff --git a/src/pages/Payment/Details_Public/DataGrid.js b/src/pages/Payment/Details_Public/DataGrid.js
new file mode 100644
index 0000000..77b5469
--- /dev/null
+++ b/src/pages/Payment/Details_Public/DataGrid.js
@@ -0,0 +1,64 @@
+// material-ui
+import {
+    Typography,
+} from '@mui/material';
+
+import * as React from 'react';
+import * as FormatUtils from "utils/FormatUtils"
+import { FiDataGrid } from "components/FiDataGrid";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchPublicNoticeTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+    const [total, setTotal] = React.useState(0);
+
+    React.useEffect(() => {
+        setRows(recordList);
+        let countTotal = 0;
+        recordList.forEach(item => {
+            countTotal+=item.fee;
+        });
+
+        setTotal(countTotal)
+    }, [recordList]);
+
+    const columns = [
+        {
+            id: 'appNo',
+            field: 'appNo',
+            headerName: '申請編號/我的備註',
+            flex: 1,
+            renderCell: (params) => {
+                let appNo = params.row.appNo;
+                return <div style={{ margin: 4 }}>{appNo}<br/>{params.row.remarks}</div>
+            },
+        },
+        {
+            id: 'fee',
+            field: 'fee',
+            headerName: '費用 (HK$)',
+            width: 150,
+            valueGetter: (params) => {
+                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
+            }
+        },
+    ];
+
+    return (
+        <div style={{ height: 400, width: '100%' }}>
+
+            <FiDataGrid
+                rowHeight={80}
+                rows={rows}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 5 },
+                    },
+                }}
+            />
+
+            <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
new file mode 100644
index 0000000..666e32b
--- /dev/null
+++ b/src/pages/Payment/Details_Public/PaymentDetails.js
@@ -0,0 +1,135 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    FormLabel,
+} from '@mui/material';
+
+import * as React from "react";
+import * as FormatUtils from "utils/FormatUtils";
+import Loadable from 'components/Loadable';
+const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+const PaymentDetails = ({ formData, }) => {
+
+    const [data, setData] = React.useState({});
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
+            setData(formData);
+        }
+    }, [formData]);
+
+    React.useEffect(() => {
+        if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
+            setOnReady(data != {});
+        }
+    }, [data]);
+
+
+    return (
+        !onReady ?
+            <LoadingComponent />
+            :
+            <MainCard elevation={0}
+                border={false}
+                content={false}
+            >
+                <Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
+                    付款詳情
+                </Typography>
+                <form>
+                    <Grid container>
+                        <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>
+                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                        {data.egisRefNo}
+                                    </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" }}>
+                                        {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
+                                    </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.payload?.paymentdetail?.subtype ?? (data.payload.paymentdetail.paymentmethod === "01" ? "PPS" : "")}
+                                    </FormLabel>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </form>
+            </MainCard>
+    );
+};
+
+export default PaymentDetails;
diff --git a/src/pages/Payment/Details_Public/index.js b/src/pages/Payment/Details_Public/index.js
new file mode 100644
index 0000000..d6d5dca
--- /dev/null
+++ b/src/pages/Payment/Details_Public/index.js
@@ -0,0 +1,114 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack,
+    Box
+} from '@mui/material';
+import * as UrlUtils from "utils/ApiPathConst";
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const PaymentDetails = Loadable(React.lazy(() => import('./PaymentDetails')));
+const DataGrid = Loadable(React.lazy(() => import('./DataGrid')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const Index = () => {
+    const params = useParams();
+    const navigate = useNavigate()
+
+    const [record, setRecord] = React.useState();
+    const [itemList, setItemList] = React.useState([]);
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        loadForm();
+    }, []);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [record]);
+
+
+    const loadForm = () => {
+        if (params.id > 0) {
+
+            HttpUtils.get({
+                url: UrlUtils.PAYMENT_LOAD + "/" + params.id,
+                onSuccess: (responseData) => {
+                    if (!responseData.data?.id) {
+                        navigate("/paymentPage/search");
+                    }
+                    responseData.data["transDateStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "DD/MM/YYYY");
+                    responseData.data["transTimeStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "HH:mm:ss");
+                    setItemList(responseData.paymentItemList)
+                    setRecord(responseData.data);
+                }
+            });
+        }
+    }
+
+    return (
+        !onReady ?
+            <LoadingComponent />
+            :
+            (
+                <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} 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={record}
+                                        style={{
+                                            display: "flex",
+                                            height: "100%",
+                                            flex: 1
+                                        }}
+                                    />
+                                </Box>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                    {/*row 2*/}
+                </Grid >
+
+
+            )
+
+
+    );
+};
+
+export default Index;
diff --git a/src/pages/Payment/Search_Public/DataGrid.js b/src/pages/Payment/Search_Public/DataGrid.js
index 5e81d49..9578ef0 100644
--- a/src/pages/Payment/Search_Public/DataGrid.js
+++ b/src/pages/Payment/Search_Public/DataGrid.js
@@ -5,6 +5,7 @@ import {
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
+import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 // ==============================|| EVENT TABLE ||============================== //
@@ -18,33 +19,32 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }, [recordList]);
 
     const handleEditClick = (params) => () => {
-        navigate('/proof/reply/' + params.row.id);
+        navigate('/paymentPage/details/' + params.row.id);
     };
 
-
     const columns = [
         {
             field: 'actions',
             headerName: '付款編號',
-            width: 150,
+            flex: 1,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
             },
         },
         {
-            id: 'appId',
-            field: 'appId',
+            id: 'appNos',
+            field: 'appNos',
             headerName: '申請編號',
             flex: 1,
             renderCell: (params) => {
-                let appNo = params.row.appNo;
+                let appNo = params.row.appNos;
                 return <div style={{ margin: 4 }}>{appNo}</div>
             },
         },
         {
-            id: 'created',
-            field: 'created',
+            id: 'transDateTime',
+            field: 'transDateTime',
             headerName: '付款日期',
             flex: 1,
             valueGetter: (params) => {
@@ -52,29 +52,24 @@ export default function SearchPublicNoticeTable({ recordList }) {
             }
         },
         {
-            id: 'status',
-            field: 'status',
+            field: 'action',
             headerName: '付款狀況',
-            flex: 1,
-            valueGetter: (params) => {
-                return DateUtils.datetimeStr(params?.value);
+            width: 150,
+            renderCell: (params) => {
+                return PaymentStatus.getStatus_Cht(params);
             }
         },
         {
-            id: 'fee',
-            field: 'fee',
+            id: 'payAmount',
+            field: 'payAmount',
             headerName: '費用',
-            flex: 1,
+            width: 150,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
             }
         },
     ];
 
-    function handleRowDoubleClick(params) {
-        navigate('/proof/reply/' + params.row.id);
-    }
-
     return (
         <div style={{ height: 400, width: '100%' }}>
 
@@ -87,7 +82,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                         paginationModel: { page: 0, pageSize: 5 },
                     },
                 }}
-                onRowDoubleClick={handleRowDoubleClick}
+                onRowDoubleClick={handleEditClick}
             />
         </div>
     );
diff --git a/src/pages/Payment/Search_Public/SearchForm.js b/src/pages/Payment/Search_Public/SearchForm.js
index 2f2af85..a3890bf 100644
--- a/src/pages/Payment/Search_Public/SearchForm.js
+++ b/src/pages/Payment/Search_Public/SearchForm.js
@@ -20,10 +20,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
     const { reset, register, handleSubmit } = useForm()
 
     const onSubmit = (data) => {
-        let typeArray = [];
-        for (let i = 0; i < type.length; i++) {
-            typeArray.push(type[i].label);
-        }
         const temp = {
             code: data.code,
             dateFrom: data.dateFrom,
@@ -58,7 +54,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                             fullWidth
                             {...register("code")}
                             id='code'
-                            label="申請編號:"
+                            label="申請/付款編號:"
                             defaultValue={searchCriteria.code}
                             InputLabelProps={{
                                 shrink: true
diff --git a/src/pages/Payment/Search_Public/index.js b/src/pages/Payment/Search_Public/index.js
index 50a1445..338e140 100644
--- a/src/pages/Payment/Search_Public/index.js
+++ b/src/pages/Payment/Search_Public/index.js
@@ -47,7 +47,7 @@ const Index = () => {
 
     function loadGrid(){
         HttpUtils.get({
-            url: UrlUtils.LIST_PROOF,
+            url: UrlUtils.PAYMENT_LIST,
             params: searchCriteria,
             onSuccess: function(responseData){
                 setRecord(responseData);
diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js
index c30566f..9035b50 100644
--- a/src/routes/PublicUserRoutes.js
+++ b/src/routes/PublicUserRoutes.js
@@ -21,6 +21,7 @@ const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPag
 const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card')));
 const Payment_Callback = Loadable(lazy(() => import('pages/Payment/PaymentCallback')));
 const PaymentSearch_Public = Loadable(lazy(() => import('pages/Payment/Search_Public')));
+const PaymentDetails_Public = Loadable(lazy(() => import('pages/Payment/Details_Public')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -95,6 +96,10 @@ const PublicDashboard = {
           path: 'paymentPage/search',
           element: <PaymentSearch_Public/>
         },
+        {
+          path: 'paymentPage/details/:id',
+          element: <PaymentDetails_Public/>
+        },
       ]
     },
   ]
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index e31dd23..bc2f867 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -84,6 +84,7 @@ export const GET_PROOF_PAY = apiPath+'/proof/pay-details';//GET
 export const PAYMENT_CREATE = apiPath+'/payment/create';//POST
 export const PAYMENT_SAVE = apiPath+'/payment/save';//POST
 export const PAYMENT_LIST = apiPath+'/payment/list';//GET
+export const PAYMENT_LOAD = apiPath+'/payment/load';//GET
 
 
 
diff --git a/src/utils/statusUtils/PaymentStatus.js b/src/utils/statusUtils/PaymentStatus.js
new file mode 100644
index 0000000..e177d8b
--- /dev/null
+++ b/src/utils/statusUtils/PaymentStatus.js
@@ -0,0 +1,25 @@
+import {getStatusTag} from "utils/statusUtils/Base";
+
+const APPR = {color:"#22a13f", eng:"Success", cht:"成功"}
+const REJT = {color:"#d9372b", eng:"Reject", cht:"拒絕"}
+const CANC = {color:"#8a8784", eng:"Cancelled", cht:"取消"}
+const INPR = {color:"#f5a83d", eng:"In Progress", cht:"進行中"}
+
+export function getStatus_Cht(params) {
+    let status = getStatus(params);
+    return getStatusTag({color: status.color, text:status.cht })
+}
+
+export function getStatus_Eng(params) {
+    let status = getStatus(params);
+    return getStatusTag({color: status.color, text:status.eng })
+}
+
+function getStatus(params) {
+    let status = params.row?params.row.status:params;
+    if(status == "APPR") return APPR;
+    if(status == "REJT") return REJT;
+    if(status == "CANC") return CANC;
+    if(status == "INPR") return INPR;
+}
+