diff --git a/src/components/cards/AuthFooter.js b/src/components/cards/AuthFooter.js
index 9bcf2bd..304e729 100644
--- a/src/components/cards/AuthFooter.js
+++ b/src/components/cards/AuthFooter.js
@@ -7,7 +7,7 @@ const AuthFooter = () => {
   const matchDownSM = useMediaQuery((theme) => theme.breakpoints.down('sm'));
 
   return (
-    <Container maxWidth= "xl">
+    <Container maxWidth= "xl" sx={{minHeight: '5vh'}}>
       <Stack
         direction={matchDownSM ? 'column' : 'row'}
         justifyContent={matchDownSM ? 'center' : 'flex-start'}
diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
index e4fd310..fbdc562 100644
--- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
+++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
@@ -5,7 +5,7 @@ import {
     Button,
     RadioGroup,
     Dialog, DialogTitle, DialogContent, DialogActions,
-    Stack
+    Stack, Box
 } from '@mui/material';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
@@ -110,8 +110,8 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
 
 
     return (
-            <Grid container>
-                <Grid item xs={12} mb={3}>
+            <Grid container sx={{minHeight: '95vh',backgroundColor:'#ffffff'}} direction="column" alignItems="center">
+                <Grid item xs={12} md={12} width="100%" >
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                             <Typography ml={15} color='#FFF' variant="h4">申請公共啟事</Typography>
@@ -121,110 +121,107 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
                 {/* <Grid item xs={12}>
                     <Typography variant="h5">申請公共啟事</Typography>
                 </Grid> */}
-                <form style={{ width: "100%"}} onSubmit={formik.handleSubmit}>
-
-                <Grid container spacing={1} sx={{minHeight: '80vh'}}>
-                <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={4}></Grid>
-                <Grid item lg={4}>
-                    <Grid container alignItems={"center"}>
-                        <Grid item lg={4}
-                                sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                            目標期數:
-                        </Grid>
-                        <Grid item lg={6}>
-                            <RadioGroup
-                                aria-labelledby="demo-radio-buttons-group-label"
-                                id="issueId"
-                                name="issueId"
-                                defaultValue={formik.values.issueId}
-                            >
-                                {
-                                    selections
-                                }
-                            </RadioGroup>
-                        </Grid>
-                    </Grid>
-                </Grid>
-                <Grid item lg={4}></Grid>
-                <Grid item lg={4}></Grid>
-                <Grid item lg={4}>
-                    <Grid container alignItems={"center"}>
-                        <Grid item lg={4}
-                                sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                            犒件檔案 ({"檔案大小應<10MB"}):
-                        </Grid>
-                        <Grid item lg={4}>
-                            {attachment.name}
-                        </Grid>
-                        <Grid item lg={3}>
-                            <input 
-                                id="uploadFileBtn" 
-                                name="file" 
-                                type="file" 
-                                accept=".doc,.docx,.xls,.xlsx" 
-                                style={{ display: 'none' }}
-                                onChange={(event)=> { 
-                                    readFile(event) 
-                                 }}
-                                />
-                            <label htmlFor="uploadFileBtn">
-                                <Button 
-                                    component="span"
-                                    variant="outlined" 
-                                    size="large"
-                                    >{attachment?"上傳檔案":"重新上傳"}</Button>
-                            </label>
-                        </Grid>
-                    </Grid>
-                </Grid>
-                <Grid item lg={4}></Grid>
-                <Grid item lg={4}></Grid>
-                {FieldUtils.getTextArea({
-                        label:"備註:",
-                        valueName:"remarks",
-                        form: formik
-                    })}
-                <Grid item lg={4}></Grid>
-                
-                <Grid item xs={12}>
-                    <center>
-                        <Button 
-                            variant="contained" 
-                            type="submit"
-                            size="large"
-                            >申請公共啟事</Button>
-                    </center>
-                </Grid>
-                
+                <Grid item xs={12} md={12} width={{md:"60%",xs:"90%"}}>
+                    <Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
+                        <form onSubmit={formik.handleSubmit}>
+                            <Grid container spacing={1} sx={{minHeight: '80vh'}} direction="row" justifyContent="flex-start" alignItems="center">
+                                <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
+                                    {FieldUtils.getTextField({
+                                            label:"聯絡人:",
+                                            valueName:"contactPerson",
+                                            form: formik
+                                        })}
+                                </Grid>
+                                <Grid item  xs={12} md={12}>
+                                    {FieldUtils.getPhoneField({
+                                            label:"聯繫電話:",
+                                            valueName:{
+                                                code: "tel_countryCode",
+                                                num:"phoneNumber"
+                                            },
+                                            form: formik
+                                        })}
+                                </Grid>
+                                <Grid item xs={12} md={12}>
+                                    {FieldUtils.getPhoneField({
+                                            label:"聯繫傳真:",
+                                            valueName:{
+                                                code: "fax_countryCode",
+                                                num:"faxNumber"
+                                            },
+                                            form: formik
+                                        })}
+                                </Grid>
+                                <Grid item xs={12} lg={12}>
+                                    <Grid container alignItems={"center"}>
+                                        <Grid item xs={12} lg={4}
+                                                sx={{display: 'flex', alignItems: 'center'}}>
+                                            目標期數:
+                                        </Grid>
+                                        <Grid item xs={12} lg={6}>
+                                            <RadioGroup
+                                                aria-labelledby="demo-radio-buttons-group-label"
+                                                id="issueId"
+                                                name="issueId"
+                                                defaultValue={formik.values.issueId}
+                                            >
+                                                {
+                                                    selections
+                                                }
+                                            </RadioGroup>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12}>
+                                    <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                                        <Grid item xs={12} lg={4}
+                                                sx={{display: 'flex', alignItems: 'center'}}>
+                                            犒件檔案 ({"檔案大小應<10MB"}):
+                                        </Grid>
+                                        <Grid item xs={12} lg={3}>
+                                            <input 
+                                                id="uploadFileBtn" 
+                                                name="file" 
+                                                type="file" 
+                                                accept=".doc,.docx,.xls,.xlsx" 
+                                                style={{ display: 'none' }}
+                                                onChange={(event)=> { 
+                                                    readFile(event) 
+                                                }}
+                                                />
+                                            <label htmlFor="uploadFileBtn">
+                                                <Button 
+                                                    component="span"
+                                                    variant="outlined" 
+                                                    size="large"
+                                                    >{attachment?"上傳檔案":"重新上傳"}</Button>
+                                            </label>
+                                        </Grid>
+                                        <Grid item xs={12} lg={4}>
+                                            {attachment.name}
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12}>
+                                    {FieldUtils.getTextArea({
+                                            label:"備註:",
+                                            valueName:"remarks",
+                                            form: formik
+                                    })}
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <center>
+                                        <Button 
+                                            variant="contained" 
+                                            type="submit"
+                                            size="large"
+                                            >申請公共啟事</Button>
+                                    </center>
+                                </Grid>
+                            </Grid>
+                        </form>
+                    </Box>
                 </Grid>
-                </form>
                 <div>
                     <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
                         <DialogTitle>注意</DialogTitle>
diff --git a/src/utils/FieldUtils.js b/src/utils/FieldUtils.js
index c683e03..fb43853 100644
--- a/src/utils/FieldUtils.js
+++ b/src/utils/FieldUtils.js
@@ -1,6 +1,6 @@
 
 import {
-    Grid, TextField
+    Grid, TextField, Stack
 } from '@mui/material';
 
 import Combo from "./Combo";
@@ -29,73 +29,68 @@ export const getDateField = ({ label, valueName, form, disabled }) => {
 }
 
 export const getTextField = ({ label, valueName, form, disabled }) => {
-    return <Grid item xs={12} lg={4} >
-        <Grid container alignItems={"center"}>
-            <Grid item lg={4}
-                sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
-                {label}
-            </Grid>
-            <Grid item lg={6}>
-                {initField({
-                    type: "text",
-                    valueName: valueName,
-                    form: form,
-                    disabled: disabled
-                })}
-            </Grid>
-        </Grid>
-    </Grid>;
+    return <Grid container alignItems={"center"}>
+                <Grid item xs={12} md={3} lg={3}
+                    sx={{display: 'flex', alignItems: 'center' }}>
+                    {label}
+                </Grid>
+                <Grid item xs={12} md={6} lg={6}>
+                    {initField({
+                        type: "text",
+                        valueName: valueName,
+                        form: form,
+                        disabled: disabled
+                    })}
+                </Grid>
+            </Grid>;
 }
 
 export const getTextArea = ({ label, valueName, form, disabled, ...props }) => {
-    return <Grid item xs={12} lg={4} >
-        <Grid container alignItems={"center"}>
-            <Grid item lg={4}
-                sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
-                {label}
-            </Grid>
-            <Grid item lg={6}>
-                {initField({
-                    type: "text",
-                    valueName: valueName,
-                    form: form,
-                    disabled: disabled,
-                    multiline: true,
-                    row: 10,
-                    minRows: 4,
-                    maxRows: 4,
-                    props
-                })}
-            </Grid>
-        </Grid>
-    </Grid>;
+    return <Grid container alignItems={"center"}>
+                <Grid item xs={12} md={3} lg={3}
+                    sx={{display: 'flex', alignItems: 'center' }}>
+                    {label}
+                </Grid>
+                <Grid item xs={12} md={6} lg={6}>
+                    {initField({
+                        type: "text",
+                        valueName: valueName,
+                        form: form,
+                        disabled: disabled,
+                        multiline: true,
+                        row: 10,
+                        minRows: 4,
+                        maxRows: 4,
+                        props
+                    })}
+                </Grid>
+            </Grid>;
 }
 
 export const getPhoneField = ({ label, valueName, form, disabled }) => {
-    return <Grid item lg={4}>
-        <Grid container alignItems={"center"}>
-            <Grid item lg={4}
-                sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
-                {label}
-            </Grid>
-            <Grid item xs={2}>
-                {initField({
-                    type: "tel",
-                    valueName: valueName.code,
-                    form: form,
-                    disabled: disabled
-                })}
-            </Grid>
-            <Grid item xs={4}>
-                {initField({
-                    type: "tel",
-                    valueName: valueName.num,
-                    form: form,
-                    disabled: disabled
-                })}
-            </Grid>
-        </Grid>
-    </Grid>;
+    return <Grid container alignItems={"center"}>
+                <Grid item xs={12} md={3} lg={3}
+                    sx={{display: 'flex', alignItems: 'center' }}>
+                    {label}
+                </Grid>
+                <Grid item xs={12} md={9} lg={9}>
+                    <Stack direction="row">
+                        {initField({
+                            type: "tel",
+                            valueName: valueName.code,
+                            form: form,
+                            disabled: disabled,
+                            width:'25%'
+                        })}
+                        {initField({
+                        type: "tel",
+                        valueName: valueName.num,
+                        form: form,
+                        disabled: disabled
+                    })}
+                    </Stack>
+                </Grid>
+            </Grid>;
 }
 
 
@@ -183,7 +178,7 @@ export const getComboField = ({ label, dataList, valueName, form, disabled, getO
     </Grid>;
 }
 
-export const initField = ({ type, valueName, form, disabled, multiline, placeholder, inputProps, ...props }) => {
+export const initField = ({ type, valueName, form, disabled, multiline, placeholder, inputProps,width, ...props }) => {
     let err = Boolean(form.errors[valueName]);
 
     return <TextField
@@ -204,6 +199,7 @@ export const initField = ({ type, valueName, form, disabled, multiline, placehol
                 WebkitTextFillColor: "#000000",
                 background: "#f8f8f8",
             },
+            width:width?width:'100%'
         }}
         {...props}
     />