diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index d3f39d1..7a62b2e 100644
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -115,7 +115,7 @@ function Header(props) {
         <Link className="dashboard" to='/dashboard'>主頁</Link>
       </li>
       <li>
-        <Link className="myDocumet" to='/dashboard'>我的公共啟事</Link>
+        <Link className="myDocumet" to='/publicNotice'>我的公共啟事</Link>
       </li>
       <li>
         <Link className="documentRecord" to='/dashboard'>校對記錄</Link>
diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
index 9068671..8675276 100644
--- a/src/layout/MainLayout/index.js
+++ b/src/layout/MainLayout/index.js
@@ -58,11 +58,11 @@ const MainLayout = () => {
     <Box sx={{ display: 'flex', width: '100%', flexDirection: "column", paddingTop: { xs: "5px", sm: "43px" }}}>
       <Header/>
       {/* <Drawer open={open} handleDrawerToggle={handleDrawerToggle} /> */}
-      <div style={{ width: '100%', flexGrow: 1, p: { xs: 2, sm: 3 } }}>
+      <Box style={{ width: '100%', flexGrow: 1 } } sx={{ paddingTop: "43px" }}>
         {/* <Toolbar /> */}
         {/* <Breadcrumbs navigation={navigation} title /> */}
         <Outlet />
-      </div>
+      </Box>
       <Box sx={{borderTop: "3px solid #0C489E"}}>
          <Footer/>
       </Box>
diff --git a/src/pages/PublicNotice/SubmittedTab.js b/src/pages/PublicNotice/SubmittedTab.js
new file mode 100644
index 0000000..87f7aea
--- /dev/null
+++ b/src/pages/PublicNotice/SubmittedTab.js
@@ -0,0 +1,86 @@
+// 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
+                sx={sx}
+                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/index.js b/src/pages/PublicNotice/index.js
new file mode 100644
index 0000000..4cee95b
--- /dev/null
+++ b/src/pages/PublicNotice/index.js
@@ -0,0 +1,166 @@
+// 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/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js b/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
index 6d3f172..b2fbb4e 100644
--- a/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
+++ b/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
@@ -134,19 +134,28 @@ export default function UserTable_Individual({recordList}) {
 
     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 
-            />
+
+                    <DataGrid
+                        rows={rows}
+                        columns={columns}
+                        editMode="row"
+                        rowModesModel={rowModesModel}
+                        initialState={{
+                            pagination: {
+                                paginationModel: {page: 0, pageSize: 5},
+                            },
+                        }}
+                        pageSizeOptions={[5, 10]}
+                        autoHeight
+                        sx={{
+                            boxShadow: 1,
+                            border: 1,
+                            borderColor: '#DDD',
+                            '& .super-app-theme--header': {
+                                backgroundColor: '#EEE',
+                            },
+                        }}
+                    />
         </div>
     );
 }
diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js
index 41ca198..a4343be 100644
--- a/src/routes/PublicUserRoutes.js
+++ b/src/routes/PublicUserRoutes.js
@@ -8,6 +8,7 @@ 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')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -29,6 +30,10 @@ const PublicDashboard = {
         {
           path: 'setting/manageUser',
           element: <ManageOrgUser/>
+        },
+        {
+          path: 'publicNotice',
+          element: <PublicNotice/>
         }
       ]
     },
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index 2dc6072..3280202 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -47,6 +47,9 @@ export const GET_PUBLIC_ORG_USER_LIST = apiPath+'/user/listOrg';
 export const GET_SET_PRIMARY_USER = apiPath+'/user/primary';
 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';
+
 //GLD User
 export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry';
 export const DELETE_USER = apiPath+'/user';
diff --git a/src/utils/SelectBase.js b/src/utils/SelectBase.js
new file mode 100644
index 0000000..385e058
--- /dev/null
+++ b/src/utils/SelectBase.js
@@ -0,0 +1,63 @@
+import {
+ Autocomplete, TextField
+} from '@mui/material';
+import * as React from 'react';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+export default function Combo ({valueName, disabled, form, dataList, filterOptions, getOptionLabel, isOptionEqualToValue, onInputChange, onChange, ...props}){
+    const [value, setValue] = React.useState(form.values[valueName]);
+    const [inputValue, setInputValue] = React.useState("");
+
+    return (
+        <Autocomplete
+            {...props}
+            disablePortal
+            fullWidth
+            id={valueName}
+            name={valueName}
+            disabled={disabled}
+            value={value}
+            inputValue={inputValue}
+            filterOptions={filterOptions}
+            options={dataList}
+            getOptionLabel={getOptionLabel}
+            isOptionEqualToValue={(option, newValue)=>{
+                if(isOptionEqualToValue)
+                    isOptionEqualToValue(option,newValue, setValue,setInputValue )
+            }}
+            onInputChange={(event, newValue) => {
+                setInputValue(newValue);
+                if(onInputChange){
+                    onInputChange(event,newValue, setInputValue)
+                }
+            }}
+            onChange={(event, newValue) => {
+                setValue(newValue);
+                if (!onChange){
+                    form.setFieldValue(valueName, newValue);
+                }else{
+                    onChange(event, newValue);
+                }
+            }}
+            sx={{
+                "& .MuiInputBase-root": { 
+                    height: "41px", 
+                    padding: "0px 0px 0px 8px" 
+                },
+                "& .MuiAutocomplete-endAdornment": { 
+                    top: "auto" 
+                },
+                "& .MuiInputBase-input.Mui-disabled": {
+                    WebkitTextFillColor: "#000000",
+                    background: "#f8f8f8",
+                },
+            }}
+            renderInput={(params) => <TextField {...params} sx={{
+                "& .MuiInputBase-input.Mui-disabled": {
+                  WebkitTextFillColor: "#000000",
+                  background: "#f8f8f8",
+                },
+              }}/>}
+        />
+    );
+}
\ No newline at end of file