diff --git a/src/pages/PublicNotice/ApplyForm/index.js b/src/pages/PublicNotice/ApplyForm/index.js
new file mode 100644
index 0000000..9e7741e
--- /dev/null
+++ b/src/pages/PublicNotice/ApplyForm/index.js
@@ -0,0 +1,177 @@
+// material-ui
+import {
+    Grid, 
+    Typography, 
+    Button
+} from '@mui/material';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
+import * as React from "react";
+import * as HttpUtils from "../../../utils/HttpUtils";
+import * as UrlUtils from "../../../utils/ApiPathConst";
+import * as FieldUtils from "../../../utils/FieldUtils";
+
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const PublicNoticeApplyForm = () => {
+    const [userData, setUserData]  = React.useState([]);
+    const [isLoading, setLoding] = React.useState(true);
+    const [attachment, setAttachment]  = React.useState({});
+
+    const formik = useFormik({
+        enableReinitialize:true,
+        initialValues:userData,
+        validationSchema:yup.object().shape({
+            group: yup.string().max(255),
+            groupTitle: yup.string().max(255),
+            groupNo: yup.string().max(255),
+            issueId: yup.string().max(255).nullable(),
+            contactPerson: yup.string().max(40).nullable(),
+            tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
+            fax_countryCode: yup.string().min(3,'請輸入3位數字'),
+            phoneNumber: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'),
+            faxNumber: yup.string().min(8,'請輸入8位數字').required('請輸入8位數字'),
+            remarks: yup.string().max(255).nullable(),
+        }),
+        onSubmit:values=>{
+            console.log(values);
+            HttpUtils.post({
+                url: UrlUtils.POST_PUBLIC_NOTICE_SAVE,
+                params: {
+                    id: 0,
+                    group: values.chName,
+                    groupTitle: values.groupTitle,
+                    groupNo: values.groupNo,
+                    issueId: values.issueId,
+                    contactPerson: values.contactPerson,
+                    contactTelNo: {
+                        countryCode: values.tel_countryCode,
+                        phoneNumber: values.phoneNumber
+                    },
+                    contactFaxNo:{
+                        countryCode: values.fax_countryCode,
+                        faxNumber: values.faxNumber
+                    },
+                    remarks:values.remarks,
+                    file: attachment
+                },
+                onSuccess: function(){
+                        loadDataFun();
+                }
+            });
+        }
+    });
+
+
+
+    React.useEffect(()=>{
+        loadUserData();
+    },[]);
+
+    const loadUserData = ()=>{
+        setLoding(true);
+        HttpUtils.get({
+            url: `${UrlUtils.GET_PUBLIC_NOTICE_getApplyUser}`,
+            onSuccess: function(response){
+                response["tel_countryCode"] = response?.contactTelNo?.countryCode;
+                response["phoneNumber"] = response?.contactTelNo?.phoneNumber;
+                response["fax_countryCode"] = response?.contactFaxNo?.countryCode;
+                response["faxNumber"] = response?.contactFaxNo?.faxNumber;
+                setUserData(response);
+            }
+        });
+    };
+
+    React.useEffect(() => {
+       setLoding(false);
+    }, [userData]);
+
+    // const onUploadClick=()=>{
+    //     document.getElementById('uploadFileBtn').click();
+    // }
+
+    const readFile=(event)=>{
+        setAttachment(event.target.files[0]);
+    }
+
+    return (
+        isLoading ?
+            <LoadingComponent/>
+            :
+            <Grid container style={{ padding: 24}} rowSpacing={4.5} columnSpacing={2.75}>
+                <Grid item xs={12}>
+                    <Typography variant="h5">申請公共啟事</Typography>
+                </Grid>
+                <form style={{ width: "100%"}} onSubmit={formik.handleSubmit}  >
+
+                <Grid container spacing={1}>
+                <Grid item lg={4}></Grid>
+                {FieldUtils.getTextField({
+                        label:"聯絡人:",
+                        valueName:"contactPerson",
+                        form: formik
+                    })}
+                <Grid item lg={4}></Grid>
+                <Grid item lg={4}></Grid>
+                {FieldUtils.getPhoneField({
+                        label:"聯繫電話:",
+                        valueName:{
+                            code: "tel_countryCode",
+                            num:"phoneNumber"
+                        },
+                        form: formik
+                    })}
+                <Grid item lg={4}></Grid>
+                <Grid item lg={4}></Grid>
+                {FieldUtils.getPhoneField({
+                        label:"聯繫傳真:",
+                        valueName:{
+                            code: "fax_countryCode",
+                            num:"faxNumber"
+                        },
+                        form: formik
+                    })}
+                <Grid item lg={4}></Grid>
+                <Grid item lg={12}>
+                    <center>
+                        <input 
+                            id="uploadFileBtn" 
+                            name="file" 
+                            type="file" 
+                            accept="image/png, image/jpeg" 
+                            onChange={(event)=> { 
+                                readFile(event) 
+                           }}
+                            />
+                        {/* <Button 
+                            variant="contained" 
+                            size="large"
+                            onClick={()=>{
+                                onUploadClick();
+                            }}
+                            >上傳文件</Button> */}
+                    </center>
+                </Grid>
+                <Grid item lg={12}>
+                    <center>
+                        <Button 
+                            variant="contained" 
+                            type="submit"
+                            size="large"
+                            >申請公共啟事</Button>
+                    </center>
+                </Grid>
+                
+                </Grid>
+                </form>
+            </Grid>
+    );
+};
+
+
+export default PublicNoticeApplyForm;
diff --git a/src/pages/PublicNotice/ListPanel/InProgressTab.js b/src/pages/PublicNotice/ListPanel/InProgressTab.js
new file mode 100644
index 0000000..76c3c8e
--- /dev/null
+++ b/src/pages/PublicNotice/ListPanel/InProgressTab.js
@@ -0,0 +1,85 @@
+// material-ui
+import * as React from 'react';
+import {
+    DataGrid,
+    GridActionsCellItem,
+} from "@mui/x-data-grid";
+import * as Icon from '../../../utils/IconUtils';
+import * as DateUtils from "../../../utils/DateUtils"
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SubmittedTab({rows}) {
+    const [rowModesModel] = React.useState({});
+
+    const columns = [
+        {
+            id: 'appNo',
+            field: 'appNo',
+            headerName: '申請編號',
+            flex: 1,
+        },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: '提交日期',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'remarks',
+            field: 'remarks',
+            headerName: '我的備註',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: '狀態',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            headerName: '',
+            width: 50,
+            cellClassName: 'actions',
+            getActions: (params) => {
+                return [
+                    <GridActionsCellItem
+                        key="OutSave"
+                        icon={<Icon.Download/>}
+                        label="查看詳細"
+                        className="textPrimary"
+                        onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)}
+                        color="primary"
+                    />]
+            },
+        }
+    ];
+
+    return (
+        <div style={{height: 400, width: '100%'}}>
+            <DataGrid
+                rows={rows}
+                columns={columns}
+                editMode="row"
+                rowModesModel={rowModesModel}
+                initialState={{
+                    pagination: {
+                        paginationModel: {page: 0, pageSize: 5},
+                    },
+                }}
+                pageSizeOptions={[5, 10]}
+                autoHeight = {true}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
new file mode 100644
index 0000000..e54e691
--- /dev/null
+++ b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
@@ -0,0 +1,93 @@
+// material-ui
+import * as React from 'react';
+import {
+    DataGrid,
+    GridActionsCellItem,
+} from "@mui/x-data-grid";
+import { 
+    Button
+} from '@mui/material';
+import * as Icon from 'utils/IconUtils';
+import * as DateUtils from "utils/DateUtils"
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SubmittedTab({rows}) {
+    const [rowModesModel] = React.useState({});
+
+    const columns = [
+        {
+            id: 'appNo',
+            field: 'appNo',
+            headerName: '申請編號',
+            flex: 1,
+        },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: '提交日期',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'remarks',
+            field: 'remarks',
+            headerName: '我的備註',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: '狀態',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            headerName: '',
+            width: 50,
+            cellClassName: 'actions',
+            getActions: (params) => {
+                return [
+                    <GridActionsCellItem
+                        key="OutSave"
+                        icon={<Icon.Download/>}
+                        label="查看詳細"
+                        className="textPrimary"
+                        onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)}
+                        color="primary"
+                    />]
+            },
+        }
+    ];
+
+    const onPaymentClick=()=>{
+        
+    }
+
+    return (
+        <div style={{height: 400, width: '100%'}}>
+            <DataGrid
+                rows={rows}
+                columns={columns}
+                editMode="row"
+                rowModesModel={rowModesModel}
+                initialState={{
+                    pagination: {
+                        paginationModel: {page: 0, pageSize: 5},
+                    },
+                }}
+                pageSizeOptions={[5, 10]}
+                autoHeight = {true}
+            />
+            <Button variant="contained" onClick={()=>{onPaymentClick()}}>付款</Button>
+        </div>
+    );
+}
diff --git a/src/pages/PublicNotice/ListPanel/PendingPublishTab.js b/src/pages/PublicNotice/ListPanel/PendingPublishTab.js
new file mode 100644
index 0000000..70c60b2
--- /dev/null
+++ b/src/pages/PublicNotice/ListPanel/PendingPublishTab.js
@@ -0,0 +1,85 @@
+// material-ui
+import * as React from 'react';
+import {
+    DataGrid,
+    GridActionsCellItem,
+} from "@mui/x-data-grid";
+import * as Icon from 'utils/IconUtils';
+import * as DateUtils from "utils/DateUtils"
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SubmittedTab({rows}) {
+    const [rowModesModel] = React.useState({});
+
+    const columns = [
+        {
+            id: 'appNo',
+            field: 'appNo',
+            headerName: '申請編號',
+            flex: 1,
+        },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: '提交日期',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'remarks',
+            field: 'remarks',
+            headerName: '我的備註',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: '狀態',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            headerName: '',
+            width: 50,
+            cellClassName: 'actions',
+            getActions: (params) => {
+                return [
+                    <GridActionsCellItem
+                        key="OutSave"
+                        icon={<Icon.Download/>}
+                        label="查看詳細"
+                        className="textPrimary"
+                        onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)}
+                        color="primary"
+                    />]
+            },
+        }
+    ];
+
+    return (
+        <div style={{height: 400, width: '100%'}}>
+            <DataGrid
+                rows={rows}
+                columns={columns}
+                editMode="row"
+                rowModesModel={rowModesModel}
+                initialState={{
+                    pagination: {
+                        paginationModel: {page: 0, pageSize: 5},
+                    },
+                }}
+                pageSizeOptions={[5, 10]}
+                autoHeight = {true}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/PublicNotice/ListPanel/SearchTab.js b/src/pages/PublicNotice/ListPanel/SearchTab.js
new file mode 100644
index 0000000..9119fa1
--- /dev/null
+++ b/src/pages/PublicNotice/ListPanel/SearchTab.js
@@ -0,0 +1,107 @@
+// material-ui
+import * as React from 'react';
+import {
+    OutlinedInput,
+    Button
+} from '@mui/material';
+import {
+    DataGrid,
+    GridActionsCellItem,
+} from "@mui/x-data-grid";
+import * as Icon from '../../../utils/IconUtils';
+import * as DateUtils from "../../../utils/DateUtils"
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SubmittedTab({rows}) {
+    const [rowModesModel] = React.useState({});
+
+    const columns = [
+        {
+            id: 'appNo',
+            field: 'appNo',
+            headerName: '申請編號',
+            flex: 1,
+        },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: '提交日期',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'remarks',
+            field: 'remarks',
+            headerName: '我的備註',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: '狀態',
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            headerName: '',
+            width: 50,
+            cellClassName: 'actions',
+            getActions: (params) => {
+                return [
+                    <GridActionsCellItem
+                        key="OutSave"
+                        icon={<Icon.Download/>}
+                        label="查看詳細"
+                        className="textPrimary"
+                        onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)}
+                        color="primary"
+                    />]
+            },
+        }
+    ];
+
+    const doSearch=()=>{
+
+    }
+
+    return (
+        <div style={{height: 400, width: '100%'}}>
+
+<center>
+        <div>
+        <OutlinedInput
+                style={{width: 400}}
+                id="chName-signup"
+                type="text"
+                name="chName"
+                placeholder="搜尋..."
+                
+            />
+            <Button variant="contained" onClick={()=>{doSearch()}}>搜尋</Button>
+            </div>
+            </center>
+            <DataGrid
+                rows={rows}
+                columns={columns}
+                editMode="row"
+                rowModesModel={rowModesModel}
+                initialState={{
+                    pagination: {
+                        paginationModel: {page: 0, pageSize: 5},
+                    },
+                }}
+                pageSizeOptions={[5, 10]}
+                autoHeight = {true}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/PublicNotice/SubmittedTab.js b/src/pages/PublicNotice/ListPanel/SubmittedTab.js
similarity index 95%
rename from src/pages/PublicNotice/SubmittedTab.js
rename to src/pages/PublicNotice/ListPanel/SubmittedTab.js
index 87f7aea..76c3c8e 100644
--- a/src/pages/PublicNotice/SubmittedTab.js
+++ b/src/pages/PublicNotice/ListPanel/SubmittedTab.js
@@ -4,8 +4,8 @@ import {
     DataGrid,
     GridActionsCellItem,
 } from "@mui/x-data-grid";
-import * as Icon from '../../utils/IconUtils';
-import * as DateUtils from "../../utils/DateUtils"
+import * as Icon from '../../../utils/IconUtils';
+import * as DateUtils from "../../../utils/DateUtils"
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({rows}) {
@@ -68,7 +68,6 @@ export default function SubmittedTab({rows}) {
     return (
         <div style={{height: 400, width: '100%'}}>
             <DataGrid
-                sx={sx}
                 rows={rows}
                 columns={columns}
                 editMode="row"
diff --git a/src/pages/PublicNotice/ListPanel/index.js b/src/pages/PublicNotice/ListPanel/index.js
new file mode 100644
index 0000000..4a0e1a1
--- /dev/null
+++ b/src/pages/PublicNotice/ListPanel/index.js
@@ -0,0 +1,132 @@
+// material-ui
+import {
+    Grid, 
+    Typography, 
+    Tab, 
+    Box,
+    Button
+} from '@mui/material';
+
+import {TabPanel, TabContext, TabList } from '@mui/lab';
+import {useEffect, useState} from "react";
+import {useNavigate} from "react-router-dom";
+import * as React from "react";
+import * as HttpUtils from "../../../utils/HttpUtils";
+import * as UrlUtils from "../../../utils/ApiPathConst";
+
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+ const SubmittedTab = Loadable(lazy(() => import('./SubmittedTab')));
+ const InProgressTab = Loadable(lazy(() => import('./InProgressTab')));
+ const PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab')));
+ const PendingPublishTab = Loadable(lazy(() => import('./PendingPublishTab')));
+ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+ const SearchTab = Loadable(lazy(() => import('./SearchTab')));
+
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const PublicNotice = () => {
+    const [submittedList, setSubmittedList]  = useState([]);
+     const [inProgressList, setInProgressList]  = useState([]);
+     const [pendingPaymentList, setPendingPaymentList]  = useState([]);
+     const [pendingPublishList, setPendingPublishList]  = useState([]);
+    const [isLoading, setLoding] = useState(true);
+    const [selectedTab, setSelectedTab] = useState("1");
+    const navigate=useNavigate();
+
+
+    useEffect(()=>{
+        loadData();
+    },[]);
+
+    const reloadPage=()=>{
+        window.location.reload(false);
+    }
+
+    const loadData = ()=>{
+        setLoding(true);
+        HttpUtils.get({
+            url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST}`,
+            onSuccess: function(response){
+                setSubmittedList(response.data["submitted"]);
+                setInProgressList(response.data["inProgress"]);
+                setPendingPaymentList(response.data["pendingPayment"]);
+                setPendingPublishList(response.data["pendingPublish"]);
+            }
+        });
+    };
+
+    useEffect(() => {
+       setLoding(false);
+    }, [submittedList]);
+
+    const handleChange = (event, newValue)=>{
+        setSelectedTab(newValue);
+    }
+
+    const onBtnClick=()=>{
+        navigate('/publicNotice/apply')
+    }
+
+    return (
+        isLoading ?
+            <LoadingComponent/>
+            :
+            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
+                <Grid item xs={12} sx={{mb: -2.25}}>
+                    <Typography variant="h5">我的公共啟事</Typography>
+                </Grid>
+                <Grid item xs={12} sx={{mb: -2.25}}>
+                    <Button variant="contained" onClick={()=>{onBtnClick()}}>申請公共啟事</Button>
+                </Grid>
+                {/*col 2*/}
+                <Grid item xs={12}>
+                <TabContext value={selectedTab}>
+                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                    <TabList onChange={handleChange} aria-label="lab API tabs example">
+                    <Tab label="已提交" value="1" />
+                    <Tab label="處理中" value="2" />
+                    <Tab label="待付款" value="3" />
+                    <Tab label="待發佈" value="4" />
+                    <Tab label="搜尋申請記錄" value="5" />
+                    </TabList>
+                </Box>
+                <TabPanel value="1">
+                    <SubmittedTab
+                        rows={submittedList}
+                        reloadFunction={reloadPage}
+                    />
+                </TabPanel>
+                <TabPanel value="2">
+                    <InProgressTab
+                        rows={inProgressList}
+                        reloadFunction={reloadPage}
+                    />
+                </TabPanel>
+                <TabPanel value="3">
+                    <PendingPaymentTab
+                        rows={pendingPaymentList}
+                        reloadFunction={reloadPage}
+                    />
+                </TabPanel>
+                <TabPanel value="4">
+                    <PendingPublishTab
+                        rows={pendingPublishList}
+                        reloadFunction={reloadPage}
+                    />
+                </TabPanel>
+                <TabPanel value="5">
+                    <SearchTab
+                        rows={pendingPublishList}
+                        reloadFunction={reloadPage}
+                    />
+                </TabPanel>
+                </TabContext>
+                </Grid>
+            </Grid>
+    );
+};
+
+
+export default PublicNotice;
diff --git a/src/pages/PublicNotice/index.js b/src/pages/PublicNotice/index.js
deleted file mode 100644
index 4cee95b..0000000
--- a/src/pages/PublicNotice/index.js
+++ /dev/null
@@ -1,166 +0,0 @@
-// material-ui
-import {
-    // Grid, 
-     Typography, 
-    Tabs,
-    Tab, 
-    Box
-} from '@mui/material';
-// import {TabPanel, TabContext, TabList } from '@mui/lab';
-// import {useEffect, useState} from "react";
-import * as React from "react";
-// import * as HttpUtils from "../../utils/HttpUtils";
-// import * as UrlUtils from "../../utils/ApiPathConst";
-
-// import Loadable from 'components/Loadable';
-// import { lazy } from 'react';
-// const SubmittedTab = Loadable(lazy(() => import('./SubmittedTab')));
-// const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
-
-
-// ==============================|| DASHBOARD - DEFAULT ||============================== //
-function a11yProps(index) {
-    return {
-      id: `simple-tab-${index}`,
-      'aria-controls': `simple-tabpanel-${index}`,
-    };
-  }
-  
-function CustomTabPanel(props) {
-    const { children, value, index, ...other } = props;
-  
-    return (
-      <div
-        role="tabpanel"
-        hidden={value !== index}
-        id={`simple-tabpanel-${index}`}
-        aria-labelledby={`simple-tab-${index}`}
-        {...other}
-      >
-        {value === index && (
-          <Box sx={{ p: 3 }}>
-            <Typography>{children}</Typography>
-          </Box>
-        )}
-      </div>
-    );
-  }
-
- export default function BasicTabs() {
-    const [value, setValue] = React.useState(0);
-  
-    const handleChange = (event, newValue) => {
-      setValue(newValue);
-    };
-  
-    return (
-        <>
-        <Box sx={{ p: 3 }}>
-            <Typography>123</Typography>
-        </Box>
-        
-      <Box sx={{ width: '100%' }}>
-        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-          <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
-            <Tab label="Item One" {...a11yProps(0)} />
-            <Tab label="Item Two" {...a11yProps(1)} />
-            <Tab label="Item Three" {...a11yProps(2)} />
-          </Tabs>
-        </Box>
-        <CustomTabPanel value={value} index={0}>
-          Item One
-        </CustomTabPanel>
-        <CustomTabPanel value={value} index={1}>
-          Item Two
-        </CustomTabPanel>
-        <CustomTabPanel value={value} index={2}>
-          Item Three
-        </CustomTabPanel>
-      </Box>
-      </>
-    );
-  }
-
-// const PublicNotice = () => {
-//     const [submittedList, setSubmittedList]  = useState([]);
-//     // const [inProgressList, setInProgressList]  = useState([]);
-//     // const [pendingPaymentList, setPendingPaymentList]  = useState([]);
-//     // const [pendingPublishList, setPendingPublishList]  = useState([]);
-//     const [isLoading, setLoding] = useState(true);
-//     const [selectedTab, setSelectedTab] = useState("1");
-
-
-//     useEffect(()=>{
-//         loadData();
-//     },[]);
-
-//     const reloadPage=()=>{
-//         window.location.reload(false);
-//     }
-
-//     const loadData = ()=>{
-//         setLoding(true);
-//         HttpUtils.get({
-//             url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST}`,
-//             onSuccess: function(response){
-//                 setSubmittedList(response.data["submitted"]);
-//                 // setInProgressList(response.data["inProgress"]);
-//                 // setPendingPaymentList(response.data["pendingPayment"]);
-//                 // setPendingPublishList(response.data["pendingPublish"]);
-//             }
-//         });
-//     };
-
-
-//     useEffect(() => {
-//        setLoding(false);
-//     }, [submittedList]);
-
-//     const handleChange = (event, newValue)=>{
-//         setSelectedTab(newValue);
-//     }
-
-//     return (
-//         isLoading ?
-//             <LoadingComponent/>
-//             :
-//             <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-//                 <Grid item xs={12} sx={{mb: -2.25}}>
-//                     <Typography variant="h5">我的公共啟事</Typography>
-//                 </Grid>
-//                 {/*col 2*/}
-//                 <Grid item xs={12}>
-//                 <TabContext value={selectedTab}>
-//                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-//                     <TabList onChange={handleChange} aria-label="lab API tabs example">
-//                     <Tab label="已提交" value="1" />
-//                     <Tab label="處理中" value="2" />
-//                     <Tab label="待付款" value="3" />
-//                     <Tab label="待發佈" value="4" />
-//                     <Tab label="搜尋申請記錄" value="5" />
-//                     </TabList>
-//                 </Box>
-//                 <TabPanel value="1">
-//                     <SubmittedTab
-//                         rows={submittedList}
-//                         reloadFunction={reloadPage}
-//                     />
-//                 </TabPanel>
-//                 <TabPanel value="2">
-//                 TODO
-//                 </TabPanel>
-//                 <TabPanel value="3">
-//                 TODO
-//                 </TabPanel>
-//                 <TabPanel value="4">
-//                 TODO
-//                 </TabPanel>
-//                 <TabPanel value="5">TODO</TabPanel>
-//                 </TabContext>
-//                 </Grid>
-//             </Grid>
-//     );
-// };
-
-
-// export default PublicNotice;
diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js
index a4343be..99bdae7 100644
--- a/src/routes/PublicUserRoutes.js
+++ b/src/routes/PublicUserRoutes.js
@@ -8,7 +8,8 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
 // render - dashboard
 const DashboardDefault = Loadable(lazy(() => import('pages/publicDashboard')));
 const ManageOrgUser = Loadable(lazy(() => import('pages/ManageOrgUserPage')));
-const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice')));
+const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice/ListPanel')));
+const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/ApplyForm')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -34,6 +35,10 @@ const PublicDashboard = {
         {
           path: 'publicNotice',
           element: <PublicNotice/>
+        },
+        {
+          path: 'publicNotice/apply',
+          element: <PublicNoticeApplyForm/>
         }
       ]
     },
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index 3280202..a98a190 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -49,6 +49,8 @@ export const GET_SET_UN_PRIMARY_USER = apiPath+'/user/un-primary';
 
 export const GET_PUBLIC_NOTICE_LIST = apiPath+'/application/list';
 export const GET_PUBLIC_NOTICE_LIST_ListByStatus = apiPath+'/application/status-list';
+export const GET_PUBLIC_NOTICE_getApplyUser = apiPath+'/application/get-apply-user';
+export const POST_PUBLIC_NOTICE_SAVE = apiPath+'/application/save';
 
 //GLD User
 export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry';
diff --git a/src/utils/FieldUtils.js b/src/utils/FieldUtils.js
index 49418bb..7ed1c84 100644
--- a/src/utils/FieldUtils.js
+++ b/src/utils/FieldUtils.js
@@ -177,4 +177,4 @@ export const initField=({type, valueName, form, disabled, placeholder, inputProp
             },
           }}
     />
-}
\ No newline at end of file
+}
diff --git a/src/utils/HttpUtils.js b/src/utils/HttpUtils.js
index db616f7..cd5b093 100644
--- a/src/utils/HttpUtils.js
+++ b/src/utils/HttpUtils.js
@@ -20,12 +20,14 @@ export const put = ({url,params, onSuccess, onFail, onError}) =>{
     });
 };
 
-export const post = ({url, params, onSuccess, onFail, onError}) =>{
+export const post = ({url, params, onSuccess, onFail, onError, headers}) =>{
+    headers = headers?headers:{
+        "Content-Type":"application/json"
+    };
+    
     axios.post(url,params,
         {
-            headers: {
-                "Content-Type":"application/json"
-            }
+            headers:headers
         }).then(
         (response)=>{onResponse(response, onSuccess, onFail);}
     ).catch(error => {