diff --git a/src/pages/Payment/PaymentCallback.js b/src/pages/Payment/PaymentCallback.js
index 9f93dbf..1e882b6 100644
--- a/src/pages/Payment/PaymentCallback.js
+++ b/src/pages/Payment/PaymentCallback.js
@@ -3,8 +3,9 @@ import {
     Grid,
     Typography,
     Stack,
+    Box
     // Button,
-    FormLabel,
+    // FormLabel,
 } from '@mui/material';
 import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
@@ -14,6 +15,8 @@ import { paymentPath } from "auth/utils";
 
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const PaymentDetails = Loadable(React.lazy(() => import('./Details_Public/PaymentDetails')));
+const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid')));
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 const BackgroundHead = {
@@ -32,9 +35,12 @@ const Index = () => {
     //const navigate = useNavigate()
     const [responeData, setResponeDataData] = React.useState({});
 
+    const [paymentData, setPaymentData] = React.useState({});
+    const [itemList, setItemList] = React.useState([]);
+
     const [transactionData, setTransactionData] = React.useState({});
-    const [transactionDate, setTransactionDate] = React.useState("");
-    const [transactionTime, setTransactionTime] = React.useState("");
+    // const [transactionDate, setTransactionDate] = React.useState("");
+    // const [transactionTime, setTransactionTime] = React.useState("");
     const [onReady, setOnReady] = React.useState(false);
     const updatePaymentApi = "/api/payment/updatepayment";
     const paymentStatusApi = "/api/payment/status/";
@@ -109,16 +115,20 @@ const Index = () => {
                             localStorage.removeItem("transactionid");
                         }
                         HttpUtils.post({
-                            url:UrlUtils.PAYMENT_SAVE,
-                            params:{
-                                id:localStorage.getItem("paymentId"),
-                                transNo:transactionData.transicationId,
-                                transDateTime: responseData.paymentdetail.time.replace("[UTC]",""),
-                                egisRefNo:responseData.paymentdetail.paymentid,
-                                status:responseData.paymentdetail.result.paymentstatuscode,
-                                payload:responseData
+                            url: UrlUtils.PAYMENT_SAVE,
+                            params: {
+                                id: localStorage.getItem("paymentId"),
+                                transNo: transactionData.transicationId,
+                                transDateTime: responseData.paymentdetail.time.replace("[UTC]", ""),
+                                egisRefNo: responseData.paymentdetail.paymentid,
+                                status: responseData.paymentdetail.result.paymentstatuscode,
+                                payload: responseData
                             },
-                            onSuccess:function(){
+                            onSuccess: function (responseData2) {
+                                responseData2.data["transDateStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "DD/MM/YYYY");
+                                responseData2.data["transTimeStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "HH:mm:ss");
+                                setItemList(responseData2.paymentItemList)
+                                setPaymentData(responseData2.data);
                                 localStorage.removeItem("paymentId");
                             }
                         });
@@ -155,7 +165,30 @@ const Index = () => {
                                         </Typography>
 
                                         <Grid container>
-                                            <Grid item xs={12} md={12}>
+                                            <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 item xs={12} md={12}>
                                                 <Grid container >
                                                     <Grid item>
                                                         <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
@@ -238,7 +271,7 @@ const Index = () => {
                                                         </FormLabel>
                                                     </Grid>
                                                 </Grid>
-                                            </Grid>
+                                            </Grid> */}
                                         </Grid>
                                     </Grid>
                                 </center>
diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js
index c108670..b573840 100644
--- a/src/pages/Payment/index.js
+++ b/src/pages/Payment/index.js
@@ -3,16 +3,18 @@ import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import Loadable from 'components/Loadable';
 const MultiPaymentWindow = Loadable(React.lazy(() => import('./MultiPaymentWindow')));
+const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid')));
 // const FPS = Loadable(React.lazy(() => import('./FPS')));
-import {useEffect, useState} from "react";
-import {useNavigate, useLocation } from "react-router-dom";
-import {paymentPath} from "auth/utils";
+import { useEffect, useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { paymentPath } from "auth/utils";
 
 import {
     Button,
-    Grid, 
+    Grid,
     Typography,
-    Stack
+    Stack,
+    Box
 } from '@mui/material';
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
@@ -33,31 +35,37 @@ const Index = () => {
     const location = useLocation();
 
     // const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"};
-    const preferpaymentmethods = ['visa','mastercard','pps','creditcard','fps'];
-    const [totalAmount,setTotalAmount] = useState(0);
-    const id =1;
-    
-    
+    const preferpaymentmethods = ['visa', 'mastercard', 'pps', 'creditcard', 'fps'];
+    const [totalAmount, setTotalAmount] = useState(0);
+    const [appIds, setAppIds] = useState([]);
+
+
     //statusWindow
     const [open, setOpen] = useState(false);
-    const [availableMethods,setAvailableMethods] = useState([]);
-    const [transactionData,setTransactionData] = useState({});
-    const [fpsStatus,setFPSStatus] = useState({});
-    const [creditCardStatus,setCreditCardStatus] = useState({});
-    const [unionPayStatus,setUnionPayStatus] = useState({});
-    const [ppsStatus,setPPSStatus] = useState({});
+    const [availableMethods, setAvailableMethods] = useState([]);
+    const [transactionData, setTransactionData] = useState({});
+    const [fpsStatus, setFPSStatus] = useState({});
+    const [creditCardStatus, setCreditCardStatus] = useState({});
+    const [unionPayStatus, setUnionPayStatus] = useState({});
+    const [ppsStatus, setPPSStatus] = useState({});
     const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
     const [confirmPayment, setConfirmPayment] = useState(false);
 
+    const [itemList, setItemList] = useState([]);
+
     useEffect(() => {
-        if(id<0)return;
-        let amount = location.state?.amount??2000;
-      
-        setTotalAmount(amount)
+        setAppIds(location.state?.appIdList ?? [])
+        setTotalAmount(location.state?.amount ?? 2000)
         getAvailablePayment()
         getTransactionId()
+        
     }, []);
 
+    useEffect(()=>{
+        if(appIds!=[] && appIds.length>0)
+            getAppList();
+    },[appIds]);
+
     const handleClose = () => {
         // handleReset()
         setOpen(false);
@@ -68,56 +76,56 @@ const Index = () => {
         setTotalAmount(totalAmount);
         setSelectedPaymentMethod("")
         setConfirmPayment(false)
-        if (totalAmount>0){
+        if (totalAmount > 0) {
             getTransactionId()
             setOpen(true)
         }
     };
 
     useEffect(() => {
-        if (confirmPayment){
+        if (confirmPayment) {
             setOpen(false);
             // let transactionid = "";
             // let webtoken = "";
-           
+
             let page = "";
             let stateParams = {};
             let paymentMethod = "";
-            if(selectedPaymentMethod === "FPS"){
-                page='/paymentPage/fps';
-                stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken} }
+            if (selectedPaymentMethod === "FPS") {
+                page = '/paymentPage/fps';
+                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken } }
                 paymentMethod = "04,BCFP,FPS";
-            }else if(selectedPaymentMethod ==="Visa"){
-                page='/paymentPage/card';
-                stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"Visa", paymentMethod:"02,BCMP,CreditCard"} }
+            } else if (selectedPaymentMethod === "Visa") {
+                page = '/paymentPage/card';
+                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "Visa", paymentMethod: "02,BCMP,CreditCard" } }
                 paymentMethod = "02,BCMP,CreditCard";
-            }else if(selectedPaymentMethod ==="Mastercard"){
-                page='/paymentPage/card';
-                stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"Mastercard", paymentMethod:"02,BCMP,CreditCard"} }
+            } else if (selectedPaymentMethod === "Mastercard") {
+                page = '/paymentPage/card';
+                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "Mastercard", paymentMethod: "02,BCMP,CreditCard" } }
                 paymentMethod = "02,BCMP,CreditCard";
-            }else if(selectedPaymentMethod ==="JCB"){
-                page='/paymentPage/card';
-                stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"JCB", paymentMethod:"02,BCMP,CreditCard"} }
+            } else if (selectedPaymentMethod === "JCB") {
+                page = '/paymentPage/card';
+                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "JCB", paymentMethod: "02,BCMP,CreditCard" } }
                 paymentMethod = "02,BCMP,CreditCard";
-            }else if(selectedPaymentMethod ==="UnionPay" ){
-                page='/paymentPage/card';
-                stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"UnionPay", paymentMethod:"03,BCMP,CreditCard"} }
+            } else if (selectedPaymentMethod === "UnionPay") {
+                page = '/paymentPage/card';
+                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "UnionPay", paymentMethod: "03,BCMP,CreditCard" } }
                 paymentMethod = "03,BCMP,CreditCard";
-            }else if(selectedPaymentMethod ==="PPS"){
-                page='/paymentPage/card';
-                stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"PPS", paymentMethod:"01,PPSB,PPS"} }
+            } else if (selectedPaymentMethod === "PPS") {
+                page = '/paymentPage/card';
+                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "PPS", paymentMethod: "01,PPSB,PPS" } }
                 paymentMethod = "01,PPSB,PPS";
             }
-            if(paymentMethod != ""){
+            if (paymentMethod != "") {
                 HttpUtils.post({
-                    url:UrlUtils.PAYMENT_CREATE,
-                    params:{
-                      transNo:transactionData.transicationId,
-                      payMethod:paymentMethod,
-                      payAmount:totalAmount,
-                      appIdList:location.state?.appIdList??[]
+                    url: UrlUtils.PAYMENT_CREATE,
+                    params: {
+                        transNo: transactionData.transicationId,
+                        payMethod: paymentMethod,
+                        payAmount: totalAmount,
+                        appIdList: location.state?.appIdList ?? []
                     },
-                    onSuccess:function(responData){
+                    onSuccess: function (responData) {
                         localStorage.removeItem("paymentId");
                         localStorage.setItem("paymentId", responData.id)
                         navigate(page, stateParams);
@@ -126,7 +134,7 @@ const Index = () => {
             }
         }
     }, [confirmPayment]);
-    
+
     const getAvailablePayment = () => {
         // const responseData = {
         //     "availablepaymentmethods": [
@@ -276,7 +284,7 @@ const Index = () => {
         // }
 
         HttpUtils.post({
-            url: paymentPath+getAvailablePaymentUrl,
+            url: paymentPath + getAvailablePaymentUrl,
             params: {
                 // "locale": local.zh,;
                 "amount": totalAmount,
@@ -285,31 +293,31 @@ const Index = () => {
                 // ],
                 "preferpaymentmethods": preferpaymentmethods
             },
-            onSuccess: (responseData)=>{
+            onSuccess: (responseData) => {
                 let availableMethods = responseData.availablepaymentmethods;
                 setAvailableMethods(availableMethods);
-                
+
             }
         });
     }
 
     useEffect(() => {
         console.log(availableMethods)
-        if (availableMethods.length>0){
-            availableMethods.forEach((method)=>{
-                if(method.subtype === "FPS" ){
+        if (availableMethods.length > 0) {
+            availableMethods.forEach((method) => {
+                if (method.subtype === "FPS") {
                     setFPSStatus(method)
-                }else if (method.subtype === "CreditCard"){
-                    method.supportedcard.forEach((supportedcard)=>{
-                        if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
+                } else if (method.subtype === "CreditCard") {
+                    method.supportedcard.forEach((supportedcard) => {
+                        if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa") {
                             setCreditCardStatus(method)
                         } else {
-                            if (supportedcard === "UnionPay"){
+                            if (supportedcard === "UnionPay") {
                                 setUnionPayStatus(method)
                             }
                         }
                     })
-                }else if (method.subtype === "PPS" ){
+                } else if (method.subtype === "PPS") {
                     setPPSStatus(method)
                 }
             });
@@ -318,14 +326,27 @@ const Index = () => {
 
     const getTransactionId = () => {
         HttpUtils.get({
-            url: paymentPath+getTransactionIdUrl,
-            onSuccess: (responseData)=>{
+            url: paymentPath + getTransactionIdUrl,
+            onSuccess: (responseData) => {
                 // const transactionData = responseData;
                 setTransactionData(responseData)
             }
         });
     }
 
+    const getAppList = () => {
+        HttpUtils.post({
+            url: UrlUtils.PAYMENT_APP_LIST,
+            params:{
+                appIds:appIds
+            },
+            onSuccess: (responseData) => {
+                setItemList(responseData)
+            }
+        });
+    }
+    
+
     return (
         <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
             <Grid item xs={12} width="100%">
@@ -336,44 +357,59 @@ const Index = () => {
                 </div>
             </Grid>
             {/*row 1*/}
-            <Grid item xs={12} md={12} >
-                <Grid container justifyContent="flex-start" alignItems="center" >
-                    <center>
-                        <Grid item xs={12} md={12} >
+            <Grid item xs={12} md={12}  width="100%">
+                <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
+                    <Grid item xs={12} md={5}  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' }} >
+                            <Grid container justifyContent="flex-start" alignItems="left" >
+
+                                <center>
+                                    <Grid item xs={12} md={12} >
+                                        <Typography variant="h5" sx={{ textAlign: "left" }}>
+                                            交易參考號: {transactionData.transactionid}
+                                        </Typography>
 
-                            <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                <br />
-                                支付金額
-                                <br />
-                                $ {totalAmount}
-                            </Typography>
+                                        <Typography variant="h5" sx={{  textAlign: "left" }}>
+                                            支付金額: HK$ {totalAmount}
+                                        </Typography>
 
-                            <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                <Button
-                                    component="span"
-                                    variant="contained"
-                                    size="large"
-                                    // color="error"
-                                    onClick={()=>paymentClick()}
-                                    sx={{ m: 4 }}
-                                >付款</Button>
-                            </Typography>
-                        </Grid>
-                    </center>
+                                        <Button
+                                                component="span"
+                                                variant="contained"
+                                                size="large"
+                                                // color="error"
+                                                onClick={() => paymentClick()}
+                                                sx={{ mt: 4 }}
+                                            >選擇付款方式</Button>
+                                    </Grid>
+                                </center>
+                            </Grid>
+                            <MultiPaymentWindow open={open}
+                                handleCose={handleClose}
+                                availableMethods={availableMethods}
+                                transactionData={transactionData}
+                                totalAmount={totalAmount}
+                                fpsStatus={fpsStatus}
+                                creditCardStatus={creditCardStatus}
+                                unionPayStatus={unionPayStatus}
+                                ppsStatus={ppsStatus}
+                                setSelectedPaymentMethod={setSelectedPaymentMethod}
+                                selectedPaymentMethod={selectedPaymentMethod}
+                                setConfirmPayment={setConfirmPayment}
+                            />
+                        </Box>
+                    </Grid>
                 </Grid>
-                <MultiPaymentWindow open={open}
-                    handleClose={handleClose}
-                    availableMethods={availableMethods}
-                    transactionData={transactionData}
-                    totalAmount={totalAmount}
-                    fpsStatus={fpsStatus}
-                    creditCardStatus={creditCardStatus}
-                    unionPayStatus={unionPayStatus}
-                    ppsStatus={ppsStatus}
-                    setSelectedPaymentMethod={setSelectedPaymentMethod}
-                    selectedPaymentMethod={selectedPaymentMethod}
-                    setConfirmPayment={setConfirmPayment}
-                />
+            </Grid>
+            <Grid item xs={12} md={12} >
+
             </Grid>
             {/*row 2*/}
         </Grid >
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index bc2f867..cf6fb6d 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -85,6 +85,7 @@ 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
+export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST