diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index 58f66ad..fdd3b15 100644
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -121,7 +121,7 @@ function Header(props) {
           <Link className="documentRecord" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ml:2}}>校對記錄</Typography></Link>
         </li>
         <li>
-          <Link className="paymentRecord" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ml:2}}>付款記錄</Typography></Link>
+          <Link className="paymentRecord" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ml:2}}>付款記錄</Typography></Link>
         </li>
         <li>
           <Link className="userSetting" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ml:2}}>設定</Typography><KeyboardArrowDownIcon /></Link>
diff --git a/src/pages/Payment/Search_Public/DataGrid.js b/src/pages/Payment/Search_Public/DataGrid.js
new file mode 100644
index 0000000..5e81d49
--- /dev/null
+++ b/src/pages/Payment/Search_Public/DataGrid.js
@@ -0,0 +1,94 @@
+// material-ui
+import * as React from 'react';
+import {
+    Button
+} from '@mui/material';
+import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils"
+import { useNavigate } from "react-router-dom";
+import { FiDataGrid } from "components/FiDataGrid";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchPublicNoticeTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+    const navigate = useNavigate()
+
+    React.useEffect(() => {
+        setRows(recordList);
+    }, [recordList]);
+
+    const handleEditClick = (params) => () => {
+        navigate('/proof/reply/' + params.row.id);
+    };
+
+
+    const columns = [
+        {
+            field: 'actions',
+            headerName: '付款編號',
+            width: 150,
+            cellClassName: 'actions',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+            },
+        },
+        {
+            id: 'appId',
+            field: 'appId',
+            headerName: '申請編號',
+            flex: 1,
+            renderCell: (params) => {
+                let appNo = params.row.appNo;
+                return <div style={{ margin: 4 }}>{appNo}</div>
+            },
+        },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: '付款日期',
+            flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: '付款狀況',
+            flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
+        },
+        {
+            id: 'fee',
+            field: 'fee',
+            headerName: '費用',
+            flex: 1,
+            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%' }}>
+
+            <FiDataGrid
+                rowHeight={80}
+                rows={rows}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 5 },
+                    },
+                }}
+                onRowDoubleClick={handleRowDoubleClick}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/Payment/Search_Public/SearchForm.js b/src/pages/Payment/Search_Public/SearchForm.js
new file mode 100644
index 0000000..2f2af85
--- /dev/null
+++ b/src/pages/Payment/Search_Public/SearchForm.js
@@ -0,0 +1,142 @@
+// material-ui
+import {
+    Button,
+    CardContent,
+    Grid, TextField
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import { useForm } from "react-hook-form";
+import * as React from "react";
+import * as DateUtils from "utils/DateUtils";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
+
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+
+
+    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,
+            dateTo: data.dateTo,
+        };
+        applySearch(temp);
+    };
+
+    function resetForm() {
+        reset();
+    }
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}>
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+                {/*row 1*/}
+                <CardContent sx={{ px: 2.5, pt: 3 }}>
+                    <Grid item justifyContent="space-between" alignItems="center">
+                    搜尋
+                    </Grid>
+                </CardContent>
+
+                {/*row 2*/}
+                <Grid container alignItems={"center"}>
+         
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("code")}
+                            id='code'
+                            label="申請編號:"
+                            defaultValue={searchCriteria.code}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("dateFrom")}
+                            id="dateFrom"
+                            type="date"
+                            label="付款日期(從)"
+                            defaultValue={searchCriteria.dateFrom}
+                            InputProps={{ inputProps: { max: maxDate } }}
+                            onChange={(newValue) => {
+                                setMinDate(DateUtils.dateStr(newValue));
+                            }}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                            {...register("dateTo")}
+                            InputProps={{ inputProps: { min: minDate } }}
+                            onChange={(newValue) => {
+                                setMaxDate(DateUtils.dateStr(newValue));
+                            }}
+                            id="dateTo"
+                            type="date"
+                            label="付款日期(到)"
+                            defaultValue={searchCriteria.dateTo}
+                        />
+                    </Grid>
+                
+                </Grid>
+
+
+                {/*last row*/}
+                <Grid container maxWidth justifyContent="flex-end">
+
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Button
+                            size="large"
+                            variant="contained"
+                            onClick={resetForm}
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            重置
+                        </Button>
+                    </Grid>
+
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Button
+                            size="large"
+                            variant="contained"
+                            type="submit"
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            提交
+                        </Button>
+                    </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchPublicNoticeForm;
diff --git a/src/pages/Payment/Search_Public/index.js b/src/pages/Payment/Search_Public/index.js
new file mode 100644
index 0000000..50a1445
--- /dev/null
+++ b/src/pages/Payment/Search_Public/index.js
@@ -0,0 +1,97 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
+const EventTable = 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 [record,setRecord] = React.useState([]);
+    const [searchCriteria, setSearchCriteria] = React.useState({
+        dateTo: DateUtils.dateStr(new Date()),
+        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+    });
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [record]);
+
+    React.useEffect(() => {
+        loadGrid();
+    }, [searchCriteria]);
+
+    function loadGrid(){
+        HttpUtils.get({
+            url: UrlUtils.LIST_PROOF,
+            params: searchCriteria,
+            onSuccess: function(responseData){
+                setRecord(responseData);
+            }
+        });
+    }
+
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+
+    return (
+        !onReady ?
+            <LoadingComponent/>
+            :
+            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">付款記錄</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm 
+                    applySearch={applySearch}
+                    searchCriteria={searchCriteria}
+                    />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                            border={false}
+                            content={false}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+};
+
+export default Index;
diff --git a/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
index e01bd00..538c9b0 100644
--- a/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
+++ b/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
@@ -6,11 +6,13 @@ import {
     // InputAdornment, 
     Typography, FormLabel,
     OutlinedInput,
-    Stack
+    Stack,
+    Dialog, DialogTitle, DialogContent, DialogActions
 } from '@mui/material';
 // import MainCard from "../../components/MainCard";
 const MainCard = Loadable(lazy(() => import('components/MainCard')));
 import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
 import {
     useEffect,
     useState
@@ -24,6 +26,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import * as HttpUtils from "utils/HttpUtils"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils";
 
 // import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined';
 // import DoneIcon from '@mui/icons-material/Done';
@@ -38,8 +41,10 @@ const ApplicationDetailCard = (
         // isNewRecord
     }
 ) => {
+    const [isPopUp, setIsPopUp] = useState(false);
     // const params = useParams();
     const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
+    const [fee, setFee] = useState(0);
     const [companyName, setCompanyName] = useState({});
     const [fileDetail, setfileDetail] = useState({});
     const [onReady, setOnReady] = useState(false);
@@ -47,7 +52,8 @@ const ApplicationDetailCard = (
     const [issueDate, setIssueDate] = useState("");
     const { register,
         // getValues
-    } = useForm()
+    } = useForm();
+    const navigate = useNavigate();
 
     useEffect(() => {
         //if user data from parent are not null
@@ -60,6 +66,11 @@ const ApplicationDetailCard = (
                 + " No. " + applicationDetailData.gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
 
+            for (let i = 0; i < applicationDetailData.proofList.length; i++) {
+                if (applicationDetailData.proofList[i].action == true) {
+                    setFee(applicationDetailData.proofList[i].fee);
+                }
+            }
         }
     }, [applicationDetailData]);
 
@@ -83,6 +94,11 @@ const ApplicationDetailCard = (
         setStatus("cancel")
     };
 
+    function doPayment() {
+        setIsPopUp(false);
+        navigate('/paymentPage', { state: { amount: fee, appIdList: [currentApplicationDetailData.id]} });
+    }
+
     return (
         !onReady ?
             <LoadingComponent />
@@ -100,22 +116,22 @@ const ApplicationDetailCard = (
                             spacing={2}
                             mb={2}
                         >
-                        {
-                            currentApplicationDetailData.status == "confirmed"?
-                            <Button
-                                // size="large"
-                                variant="contained"
-                                // onClick={handleNewUserClick}
-                                disabled={currentApplicationDetailData.status == "rejected" || currentApplicationDetailData.status == "cancelled" || currentApplicationDetailData.status == "paid"}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <EditNoteIcon />
-                                <Typography ml={1}> 支付</Typography>
-                            </Button>
-                            :null
-                        }
+                            {
+                                currentApplicationDetailData.status == "confirmed" ?
+                                    <Button
+                                        // size="large"
+                                        variant="contained"
+                                        onClick={()=>{setIsPopUp(true)}}
+                                        disabled={currentApplicationDetailData.status == "rejected" || currentApplicationDetailData.status == "cancelled" || currentApplicationDetailData.status == "paid"}
+                                        sx={{
+                                            textTransform: 'capitalize',
+                                            alignItems: 'end'
+                                        }}>
+                                        <EditNoteIcon />
+                                        <Typography ml={1}> 支付</Typography>
+                                    </Button>
+                                    : null
+                            }
                             <Button
                                 // size="large"
                                 variant="contained"
@@ -329,50 +345,72 @@ const ApplicationDetailCard = (
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
-                                <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
-                                        sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>聯絡電話:</FormLabel>
-                                    </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
-                                        <Stack direction="row">
-                                            <FormControl variant="outlined" sx={{ width: '25%' }} disabled>
-                                                <OutlinedInput
-                                                    size="small"
-                                                    {...register("countryCode",
-                                                        {
-                                                            value: currentApplicationDetailData.contactTelNo.countryCode,
-                                                        })}
-                                                    id='countryCode'
-                                                    sx={{
-                                                        "& .MuiInputBase-input.Mui-disabled": {
-                                                            WebkitTextFillColor: "#000000",
-                                                            background: "#f8f8f8",
-                                                        },
-                                                    }}
-                                                />
-                                            </FormControl>
-                                            <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
-                                                <OutlinedInput
-                                                    size="small"
-                                                    {...register("phoneNumber",
-                                                        {
-                                                            value: currentApplicationDetailData.contactTelNo.phoneNumber,
-                                                        })}
-                                                    id='phoneNumber'
-                                                    sx={{
-                                                        "& .MuiInputBase-input.Mui-disabled": {
-                                                            WebkitTextFillColor: "#000000",
-                                                            background: "#f8f8f8",
-                                                        },
-                                                    }}
-                                                />
-                                            </FormControl>
-                                        </Stack>
+                            <Grid container direction="row" justifyContent="space-between"
+                                alignItems="center">
+                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
+                                    <Grid container alignItems={"center"}>
+                                        <Grid item xs={12} md={3} lg={3}
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
+                                            <FormLabel>聯絡電話:</FormLabel>
+                                        </Grid>
+
+                                        <Grid item xs={12} md={9} lg={9}>
+                                            <Stack direction="row">
+                                                <FormControl variant="outlined" sx={{ width: '25%' }} disabled>
+                                                    <OutlinedInput
+                                                        size="small"
+                                                        {...register("countryCode",
+                                                            {
+                                                                value: currentApplicationDetailData.contactTelNo.countryCode,
+                                                            })}
+                                                        id='countryCode'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
+                                                    />
+                                                </FormControl>
+                                                <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
+                                                    <OutlinedInput
+                                                        size="small"
+                                                        {...register("phoneNumber",
+                                                            {
+                                                                value: currentApplicationDetailData.contactTelNo.phoneNumber,
+                                                            })}
+                                                        id='phoneNumber'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
+                                                    />
+                                                </FormControl>
+                                            </Stack>
+                                        </Grid>
                                     </Grid>
                                 </Grid>
+                                {
+                                    fee > 0 ?
+                                        <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                                            <Grid container alignItems={"center"}>
+                                                <Grid item xs={12} md={3} lg={3}
+                                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                                    <FormLabel>價錢:</FormLabel>
+                                                </Grid>
+
+                                                <Grid item xs={12} md={9} lg={9}>
+                                                    <FormLabel>{FormatUtils.currencyFormat(fee)}</FormLabel>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        :
+                                        <></>
+                                }
+
                             </Grid>
                             <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
                                 <Grid container alignItems={"center"}>
@@ -460,7 +498,7 @@ const ApplicationDetailCard = (
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, paddingTop: 2}}>
+                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, paddingTop: 2 }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
@@ -473,6 +511,21 @@ const ApplicationDetailCard = (
                             </Grid>
                         </Grid>
                     </Grid>
+                    <div>
+                    <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
+                        <DialogTitle></DialogTitle>
+                        <Typography variant="h2" style={{ padding: '16px' }}>確認付款</Typography>
+                        <DialogContent style={{ display: 'flex', }}>
+                            <Stack direction="column" justifyContent="space-between">
+                                總計金額: {FormatUtils.currencyFormat(fee)}
+                            </Stack>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={() => setIsPopUp(false)}>Close</Button>
+                            <Button onClick={() => doPayment()}>確認</Button>
+                        </DialogActions>
+                    </Dialog>
+                </div>
                 </form>
             </MainCard>
     );
diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js
index a927954..c30566f 100644
--- a/src/routes/PublicUserRoutes.js
+++ b/src/routes/PublicUserRoutes.js
@@ -20,6 +20,7 @@ const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpsca
 const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPage')));
 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')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -90,6 +91,10 @@ const PublicDashboard = {
           path: 'paymentPage/fps/ackpage',
           element: <Payment_FPS_Ackpage/>
         },
+        {
+          path: 'paymentPage/search',
+          element: <PaymentSearch_Public/>
+        },
       ]
     },
   ]
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index 3e93e27..e31dd23 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -83,6 +83,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