diff --git a/src/components/FiDataGrid.js b/src/components/FiDataGrid.js
index 1d82b7b..cbfe52e 100644
--- a/src/components/FiDataGrid.js
+++ b/src/components/FiDataGrid.js
@@ -20,18 +20,18 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
     const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true);
     const [_sx, set_sx] = React.useState({
         padding: "4 2 4 2",
-        boxShadow: 1,
-        border: 1,
-        borderColor: '#DDD',
+        // boxShadow: 1,
+        // border: 1,
+        // borderColor: '#DDD',
         '& .MuiDataGrid-cell': {
             borderTop: 1,
             borderBottom: 1,
-            borderColor: "#EEE"
+            borderColor: "#EEE",
         },
         '& .MuiDataGrid-footerContainer': {
             border: 1,
             borderColor: "#EEE"
-        }
+        },
     });
 
 
@@ -122,7 +122,6 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
             autoHeight={_autoHeight}
             hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
             sx={_sx}
-
         />
     );
 }
diff --git a/src/components/MainCard.js b/src/components/MainCard.js
index 7880c12..790f131 100644
--- a/src/components/MainCard.js
+++ b/src/components/MainCard.js
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 // material-ui
 import { useTheme } from '@mui/material/styles';
-import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
+import { Card, CardContent, CardHeader, Divider, Typography, Grid } from '@mui/material';
 
 // project import
 import Highlighter from './third-party/Highlighter';
@@ -39,47 +39,59 @@ const MainCard = forwardRef(
     boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow;
 
     return (
-      <Card
-        elevation={elevation || 0}
-        ref={ref}
-        {...others}
-        sx={{
-          border: border ? '1px solid' : 'none',
-          borderRadius: 2,
-          borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
-          boxShadow: boxShadow && (!border || theme.palette.mode === 'dark') ? shadow || theme.customShadows.z1 : 'inherit',
-          ':hover': {
-            boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit'
-          },
-          '& pre': {
-            m: 0,
-            p: '16px !important',
-            fontFamily: theme.typography.fontFamily,
-            fontSize: '0.75rem'
-          },
-          ...sx
-        }}
+      <Grid container direction="column"
+        // alignItems="center"
+        // justify="center"
       >
-        {/* card header and action */}
-        {!darkTitle && title && (
-          <CardHeader sx={headerSX} titleTypographyProps={{ variant: 'subtitle1' }} title={title} action={secondary} />
-        )}
-        {darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h3">{title}</Typography>} action={secondary} />}
+        <Card
+          elevation={elevation || 0}
+          ref={ref}
+          {...others}
+          sx={{
+            alignItems: "center",
+            border: border ? '1px solid' : 'none',
+            borderRadius: 2,
+            borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
+            boxShadow: boxShadow && (!border || theme.palette.mode === 'dark') ? shadow || theme.customShadows.z1 : 'inherit',
+            ':hover': {
+              boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit'
+            },
+            '& pre': {
+              m: 0,
+              p: '16px !important',
+              fontFamily: theme.typography.fontFamily,
+              fontSize: '0.75rem'
+            },
+            maxWidth: { xs: 700, sm: 900, md: 1000, lg: 1300, xl: 1900 },
+            // minWidth: { xs: 600, sm: 800, md: 900, lg: 1000, xl: 1000 },
+            margin: { xs: 2.5, md: 3 },
+            // '& > *': {
+            //   flexGrow: 1,
+            //   flexBasis: '50%'
+            // },
+            ...sx
+          }}
+        >
+          {/* card header and action */}
+          {!darkTitle && title && (
+            <CardHeader sx={headerSX} titleTypographyProps={{ variant: 'subtitle1' }} title={title} action={secondary} />
+          )}
+          {darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h3">{title}</Typography>} action={secondary} />}
 
-        {/* card content */}
-        {content && <CardContent sx={contentSX}>{children}</CardContent>}
-        {!content && children}
+          {/* card content */}
+          {content && <CardContent sx={contentSX}>{children}</CardContent>}
+          {!content && children}
 
-        {/* card footer - clipboard & highlighter  */}
-        {codeHighlight && (
-          <>
-            <Divider sx={{ borderStyle: 'dashed' }} />
-            <Highlighter codeHighlight={codeHighlight} main>
-              {children}
-            </Highlighter>
-          </>
-        )}
-      </Card>
+          {/* card footer - clipboard & highlighter  */}
+          {codeHighlight && (
+            <>
+              <Divider sx={{ borderStyle: 'dashed' }} />
+              <Highlighter codeHighlight={codeHighlight} main>
+                {children}
+              </Highlighter>
+            </>
+          )}
+        </Card></Grid>
     );
   }
 );
diff --git a/src/pages/Proof/Create_FromApp/ApplicationDetails.js b/src/pages/Proof/Create_FromApp/ApplicationDetails.js
index cbedec8..7242b09 100644
--- a/src/pages/Proof/Create_FromApp/ApplicationDetails.js
+++ b/src/pages/Proof/Create_FromApp/ApplicationDetails.js
@@ -59,7 +59,7 @@ const SearchPublicNoticeForm = ({ formData }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                        <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
                             Application Details
                         </Typography>
                     </Grid>
@@ -72,12 +72,13 @@ const SearchPublicNoticeForm = ({ formData }) => {
                             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>Application No:</FormLabel>
+                                    <Grid item xs={12} md={4} lg={4}
+                                        // sx={{ display: 'flex', alignItems: 'center' }}
+                                        >
+                                        <FormLabel><Typography variant="h5">Application No:</Typography></FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={8} lg={8}>
                                         <DisplayField
                                             name='appNo'
                                         />
@@ -90,34 +91,34 @@ const SearchPublicNoticeForm = ({ formData }) => {
                             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}
+                                    <Grid item xs={12} md={4} lg={4}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Applicant:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={8} lg={8}>
                                         <DisplayField
                                             name={formik.values?.orgId ? 'enCompanyName' : 'contactPerson'}
                                         />
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={4} lg={4}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Contact Phone:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={8} lg={8}>
                                         <Stack direction="row">
                                             <DisplayField
                                                 name='tel_countryCode'
-                                                width='25%'
+                                                width='35%'
                                             />
                                             <DisplayField
                                                 name='phoneNumber'
-                                                width='75%'
+                                                width='65%'
                                             />
                                         </Stack>
                                     </Grid>
@@ -128,34 +129,34 @@ const SearchPublicNoticeForm = ({ formData }) => {
                             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}
+                                    <Grid item xs={12} md={4} lg={4}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Contect Person:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Contact Person:</Typography></FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={8} lg={8}>
                                         <DisplayField
                                             name='contactPerson'
                                         />
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={4} lg={4}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Contact Fax:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Contact Fax:</Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={8} lg={8}>
                                         <Stack direction="row">
                                             <DisplayField
                                                 name='fax_countryCode'
-                                                width='25%'
+                                                width='35%'
                                             />
                                             <DisplayField
                                                 name='faxNumber'
-                                                width='75%'
+                                                width='65%'
                                             />
                                         </Stack>
                                     </Grid>
diff --git a/src/pages/Proof/Create_FromApp/GazetteDetails.js b/src/pages/Proof/Create_FromApp/GazetteDetails.js
index dafbbf7..9bc0319 100644
--- a/src/pages/Proof/Create_FromApp/GazetteDetails.js
+++ b/src/pages/Proof/Create_FromApp/GazetteDetails.js
@@ -26,7 +26,6 @@ const GazetteDetails = ({ formData }) => {
         initialValues: data,
     });
 
-
     const DisplayField = ({ name, width }) => {
         return <TextField
             fullWidth
@@ -54,49 +53,48 @@ const GazetteDetails = ({ formData }) => {
         <MainCard xs={12} md={12} lg={12}
             border={false}
             content={false}
-            style={{ height: '100%'}}
-            >
+            style={{ height: '100%' }}
+        >
 
-            <form style={{ height: '100%'}}>
+            <form style={{ height: '100%' }}>
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                        <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
                             Gazette Details
                         </Typography>
                     </Grid>
                 </CardContent>
 
                 {/*row 2*/}
-                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} style={{ height: '100%'}}>
+                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} style={{ height: '100%' }}>
                     <Grid item xs={12} md={12}>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={4} lg={4}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Issue Number:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Issue Number:</Typography></FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={8} lg={8}>
                                         <DisplayField
                                             name="issueNoStr"
-
                                         />
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={4} lg={4}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Gazette Code:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={8} lg={8}>
                                         <DisplayField
-                                            name="groupNo"
+                                            name="issueDate"
 
                                         />
                                     </Grid>
@@ -105,29 +103,28 @@ const GazetteDetails = ({ formData }) => {
                         </Grid>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={4} lg={4}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Issue Date:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Gazette Code:</Typography></FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={8} lg={8}>
                                         <DisplayField
-                                            name="issueDate"
-
+                                            name="groupNo"
                                         />
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={4} lg={4}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Group Title:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Group Title:</Typography></FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={8} lg={8}>
                                         <DisplayField
                                             name="groupTitle"
                                         />
diff --git a/src/pages/Proof/Create_FromApp/ProofForm.js b/src/pages/Proof/Create_FromApp/ProofForm.js
index fe51f41..d503d12 100644
--- a/src/pages/Proof/Create_FromApp/ProofForm.js
+++ b/src/pages/Proof/Create_FromApp/ProofForm.js
@@ -150,9 +150,6 @@ const FormPanel = ({ formData }) => {
         }
     }
 
-
-
-
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
@@ -162,7 +159,7 @@ const FormPanel = ({ formData }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                        <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
                             Proof
                         </Typography>
                     </Grid>
@@ -188,7 +185,9 @@ const FormPanel = ({ formData }) => {
                                 variant="contained"
                                 size="large"
                                 disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)}
-                            > Upload Files</Button>
+                            >
+                                <Typography variant="h5">Upload Files</Typography>
+                            </Button>
                         </label>
                     </Grid>
 
@@ -199,8 +198,8 @@ const FormPanel = ({ formData }) => {
 
                     {
                         wait ?
-                            <Grid item xs={12} md={12}>
-                                <Typography variant="h3" style={{color: "blue" }}>Calculating, please wait ...</Typography>
+                            <Grid item xs={12} md={12} sx={{ mt: 1.5, mb: 1.5 }}>
+                                <Typography variant="h3" style={{ color: "blue" }}>Calculating, please wait ...</Typography>
                             </Grid>
                             :
                             <Grid item xs={12} md={12}>
@@ -212,7 +211,7 @@ const FormPanel = ({ formData }) => {
                                         textTransform: 'capitalize',
                                         alignItems: 'end'
                                     }}>
-                                    Calculate
+                                    <Typography variant="h5">Calculate</Typography>
                                 </Button>
                             </Grid>
                     }
@@ -246,13 +245,13 @@ const FormPanel = ({ formData }) => {
                                         }
                                     />
                                     <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
-                                        pages
+                                        <Typography variant="h5">pages</Typography>
                                     </FormLabel>
                                     <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
-                                        x
+                                        <Typography variant="h5">x</Typography>
                                     </FormLabel>
                                     <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
-                                        ${formik.values.price ? formik.values.price : "6,552"}
+                                        <Typography variant="h5">${formik.values.price ? formik.values.price : "6,552"}</Typography>
                                     </FormLabel>
                                 </Stack>
                             </Grid>
@@ -282,11 +281,11 @@ const FormPanel = ({ formData }) => {
                                         }
                                     />
                                     <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
-                                        cm
+                                        <Typography variant="h5">cm</Typography>
                                     </FormLabel>
 
                                     <FormLabel sx={{ paddingLeft: 2, paddingRight: 4, textAlign: "center" }}>
-                                        x
+                                        <Typography variant="h5">x</Typography>
                                     </FormLabel>
 
                                     <Autocomplete
@@ -325,10 +324,10 @@ const FormPanel = ({ formData }) => {
                     <Grid item xs={12} md={12}>
                         <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>
                             <FormLabel sx={{ paddingRight: 2, textAlign: "center" }}>
-                                Necessary fee:
+                                <Typography variant="h5">Necessary fee:</Typography>
                             </FormLabel>
                             <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
-                                $
+                                <Typography variant="h5">$</Typography>
                             </FormLabel>
                             <TextField
                                 fullWidth
@@ -363,7 +362,7 @@ const FormPanel = ({ formData }) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            Save
+                            <Typography variant="h5">Save</Typography>
                         </Button>
                     </Grid>
 
@@ -373,12 +372,12 @@ const FormPanel = ({ formData }) => {
             </form>
             <div>
                 <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
-                    <DialogTitle>Warning</DialogTitle>
+                    <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
-                        <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
+                        <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}>OK</Button>
+                        <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">OK</Typography></Button>
                     </DialogActions>
                 </Dialog>
             </div>
diff --git a/src/pages/Proof/Create_FromApp/index.js b/src/pages/Proof/Create_FromApp/index.js
index c04f89f..4e83ccd 100644
--- a/src/pages/Proof/Create_FromApp/index.js
+++ b/src/pages/Proof/Create_FromApp/index.js
@@ -20,7 +20,7 @@ const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
     height: '100%',
-    backgroundSize:'contain',
+    backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundColor: '#0C489E',
     backgroundPosition: 'right'
@@ -69,23 +69,28 @@ const Index = () => {
             <LoadingComponent />
             :
 
-            <Grid container sx={{ minHeight: '85vh', backgroundColor: '#eee' }} direction="column" spacing={1} >
+            <Grid container sx={{ minHeight: '85vh', backgroundColor: "backgroundColor.default" }} direction="column" spacing={1} >
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">Create Proof</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
                 <MainCard
                     elevation={0}
                     border={false}
-                    content={false}>
-                        <Grid item xs={12}>
-                <div style={BackgroundHead}>
-                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4">Create Proof</Typography>
-                    </Stack>
-                </div>
-            </Grid>
+                    content={false}
+                    sx={{
+                        backgroundColor: "backgroundColor.default"
+                    }}
+                >
+
                     {/*row 1*/}
                     <Grid item xs={12} md={12} lg={12}>
                         <Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={1}>
                             <Grid item xs={12} md={12} lg={8}>
-                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <Box xs={12} ml={4} mt={3} sx={{ pb: 8.5, pt: 1, borderRadius: '10px', backgroundColor: "#fff" }}>
                                     <ApplicationDetails
                                         formData={record}
                                         style={{
@@ -96,8 +101,8 @@ const Index = () => {
                                     />
                                 </Box>
                             </Grid>
-                            <Grid item xs={12} md={12} lg={4} >
-                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                            <Grid item xs={12} md={12} lg={3.85}>
+                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: "#fff" }}>
                                     <GazetteDetails
                                         formData={record}
                                         style={{
@@ -111,18 +116,18 @@ const Index = () => {
                         </Grid>
                     </Grid>
                     {/*row 2*/}
-                    <Grid item xs={12} md={12} lg={12}>
+                    <Grid item xs={12} md={12} lg={12} sx={{ ml: 1 }}>
                         <MainCard elevation={0}
                             border={false}
                             content={false}
+                            backgroundColor={"backgroundColor.default"}
                         >
-                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
-
-                            <ProofForm
-                                formData={record}
-                            />
+                            <Box xs={12} ml={4} mt={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: "#fff" }}>
+                                <ProofForm
+                                    formData={record}
+                                />
                             </Box>
-                            <br/>
+                            <br />
                         </MainCard>
                     </Grid>
                 </MainCard>
diff --git a/src/pages/Proof/Reply_GLD/ApplicationDetails.js b/src/pages/Proof/Reply_GLD/ApplicationDetails.js
index 6e1c1c2..5f8806c 100644
--- a/src/pages/Proof/Reply_GLD/ApplicationDetails.js
+++ b/src/pages/Proof/Reply_GLD/ApplicationDetails.js
@@ -16,7 +16,10 @@ const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import FileList from "components/FileList"
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
+const ApplicationDetailCard = ({ 
+    formData, 
+    // setBackButtonPos 
+}) => {
 
     const params = useParams();
 
@@ -64,9 +67,9 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
         });
     }
     
-    React.useEffect(()=>{
-        if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 2}px`)
-    },[document.getElementById("applicationDetailsMainCard")])
+    // React.useEffect(()=>{
+        // if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 3}px`)
+    // },[document.getElementById("applicationDetailsMainCard")])
 
     return (
         <MainCard
@@ -74,7 +77,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
             border={false}
             content={false}
         >
-            <Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
+            <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                 Public Notice: Proofreading Reply
             </Typography>
             <form>
@@ -86,7 +89,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>App No.:</FormLabel>
+                                        <FormLabel><Typography variant="h5">App No.:</Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
@@ -98,7 +101,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
                                 <Grid container alignItems={"left"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Status:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Status:</Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
@@ -115,7 +118,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Applicant:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
@@ -133,7 +136,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Issue No:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Issue No:</Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
@@ -148,7 +151,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Contact Person:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Contact Person:</Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
@@ -161,7 +164,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Issue Date:</FormLabel>
+                                        <FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
@@ -194,7 +197,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
                             <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <Typography>Print file：</Typography>
+                                        <Typography variant="h5">Print file：</Typography>
                                     </Grid>
                                 </Grid>
                                 <FileList
@@ -213,25 +216,25 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={12} lg={12}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <Typography>Deadline for payment and reply：</Typography>
+                                        <Typography variant="h5">Deadline for payment and reply：</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
-                                        <Typography>{DateUtils.dateStr(data.returnBeforeDate)} Before 2:00 PM</Typography>
+                                        <Typography variant="h5">{DateUtils.dateStr(data.returnBeforeDate)} Before 2:00 PM</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
-                                        <Typography>Fee:</Typography>
+                                        <Typography variant="h5">Fee:</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
-                                        <Typography style={{ color: "blue", fontWeight: "bold", }}>{currencyFormat(data.fee)}</Typography>
+                                        <Typography variant="h5" style={{ color: "blue", fontWeight: "bold", }}>{currencyFormat(data.fee)}</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                         {
                                             formik.values.groupType == "A"
                                                 ?
-                                                <Typography>( {data.noOfPages} page x $6,552 )</Typography>
+                                                <Typography variant="h5">( {data.noOfPages} page x $6,552 )</Typography>
                                                 :
-                                                <Typography>( {data.length} cm x {data.colCount == 2 ? "$364 Double Column" : "$182 Single Column"} )</Typography>
+                                                <Typography variant="h5">( {data.length} cm x {data.colCount == 2 ? "$364 Double Column" : "$182 Single Column"} )</Typography>
                                         }
                                     </Grid>
                                 </Grid>
diff --git a/src/pages/Proof/Reply_GLD/ProofForm.js b/src/pages/Proof/Reply_GLD/ProofForm.js
index 0164783..a051e00 100644
--- a/src/pages/Proof/Reply_GLD/ProofForm.js
+++ b/src/pages/Proof/Reply_GLD/ProofForm.js
@@ -48,7 +48,7 @@ const FormPanel = ({ formData }) => {
             border={false}
             content={false}>
 
-            <Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
+            <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                 Public Notice: Proofreading Reply
             </Typography>
 
@@ -58,10 +58,10 @@ const FormPanel = ({ formData }) => {
                     formik.values.replyDate ?
                         <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
                             <Grid item xs={12} md={12} textAlign="left">
-                                Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)}
+                                <Typography variant="h5">Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)}</Typography>
                             </Grid>
                             <Grid item xs={12} md={12} textAlign="left">
-                                Reply: {formik.values.action ? (<span style={{color:'green'}}>Ready for printing (correct manuscript).</span>) : (<span style={{color:'red'}}>Not ready for printing (requires modification).</span>)}
+                                <Typography variant="h5">Reply: {formik.values.action ? (<span style={{ color: 'green' }}>Ready for printing (correct manuscript).</span>) : (<span style={{ color: 'red' }}>Not ready for printing (requires modification).</span>)}</Typography>
                             </Grid>
                             {
                                 formik.values.action ?
@@ -87,13 +87,13 @@ const FormPanel = ({ formData }) => {
                             isOverTime() ?
                                 <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
                                     <Grid item xs={12} md={12} textAlign="left">
-                                        The response timed out, please apply again.
+                                        <Typography variant="h5">The response timed out, please apply again.</Typography>
                                     </Grid>
                                 </Grid>
                                 :
                                 <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
                                     <Grid item xs={12} md={12} textAlign="left">
-                                        Wait for reply.
+                                        <Typography variant="h5">Wait for reply.</Typography>
                                     </Grid>
                                 </Grid>
                         )
diff --git a/src/pages/Proof/Reply_GLD/index.js b/src/pages/Proof/Reply_GLD/index.js
index 5106a94..7e64451 100644
--- a/src/pages/Proof/Reply_GLD/index.js
+++ b/src/pages/Proof/Reply_GLD/index.js
@@ -92,12 +92,12 @@ const Index = () => {
     //     }
     // })
 
-    const [backButtonPos, setBackButtonPos] = React.useState()
-    const backButtonRef = React.useRef()
-    React.useLayoutEffect(()=>{
+    // const [backButtonPos, setBackButtonPos] = React.useState()
+    // const backButtonRef = React.useRef()
+    // React.useLayoutEffect(()=>{
         // console.log(applicationDetailsRef.current?.getBoundingClientRect())
-        if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}`
-    },[backButtonPos])
+    //     if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}`
+    // },[backButtonPos])
 
     // React.useEffect(()=>{
     //     if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonLeftPos}`
@@ -108,7 +108,7 @@ const Index = () => {
             <LoadingComponent />
             :
             (
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                    <Grid container sx={{ minHeight: '110vh', backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
                         <Grid item xs={12} width="100%">
                             <div style={BackgroundHead} width="100%">
                                 <Stack direction="row" height='70px'>
@@ -117,19 +117,19 @@ const Index = () => {
                             </div>
                         </Grid>
                         <Grid item xs={12} width="100%">
-                            <Button ref={backButtonRef} sx={{ml: backButtonPos, mt:2}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/proof/search")}}>
+                            <Button sx={{ml: 6, mt:2}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/proof/search")}}>
                                 <KeyboardBackspaceOutlinedIcon/>
                                 <Typography variant="h4">Back</Typography>
                             </Button>
                         </Grid>
                         {/*row 1*/}
                         <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
+                            <Grid container justifyContent="flex-start" alignItems="center" direction="column">
                                 <center>
-                                    <Grid item xs={12} md={12} sx={{ pt: 2 }}>
-                                        <Box  xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
+                                    <Grid item xs={12} md={12} sx={{ pt: 2, ml: 6, mr: 6, }}>
+                                        <Box xs={12} md={12} sx={{ p: 4, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                                             <ApplicationDetails
-                                                setBackButtonPos={setBackButtonPos}
+                                                // setBackButtonPos={setBackButtonPos}
                                                 formData={record}
                                                 style={{
                                                     display: "flex",
@@ -139,8 +139,8 @@ const Index = () => {
                                             />
                                         </Box>
                                     </Grid>
-                                    <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }}>
-                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
+                                    <Grid item xs={12} md={12} sx={{ pt: 3, pb: 2, ml: 6, mr: 6, }}>
+                                        <Box xs={12} md={12} sx={{ p: 4, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                                             <ProofForm
                                                 formData={record}
                                             />
diff --git a/src/pages/Proof/Search_GLD/DataGrid.js b/src/pages/Proof/Search_GLD/DataGrid.js
index 7c4949d..c60cc54 100644
--- a/src/pages/Proof/Search_GLD/DataGrid.js
+++ b/src/pages/Proof/Search_GLD/DataGrid.js
@@ -1,11 +1,12 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button
+    Button,
+    Box
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
-import {useNavigate} from "react-router-dom";
-import {FiDataGrid} from "components/FiDataGrid";
+import { useNavigate } from "react-router-dom";
+import { FiDataGrid } from "components/FiDataGrid";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -17,7 +18,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }, [recordList]);
 
     const handleEditClick = (params) => () => {
-        navigate('/proof/reply/'+ params.row.id);
+        navigate('/proof/reply/' + params.row.id);
     };
 
 
@@ -35,16 +36,16 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'appId',
             field: 'appId',
             headerName: 'Application No./ Gazette Code/ Gazette Issue',
-            flex: 1,
+            flex: 1.5,
             renderCell: (params) => {
                 let appNo = params.row.appNo;
                 let code = params.row.groupNo;
                 let isssue = params.row.issueYear
-                +" Vol. "+zeroPad(params.row.issueVolume,3)
-                +", No. "+zeroPad(params.row.issueNo,2)
-                +", "+DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
+                    + " Vol. " + zeroPad(params.row.issueVolume, 3)
+                    + ", No. " + zeroPad(params.row.issueNo, 2)
+                    + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
 
-                return <div style={{margin: 4}}>App No: {appNo}<br/>Gazette Code: {code}<br/>Issue: {isssue}</div>
+                return <div style={{ margin: 4 }}>App No: {appNo}<br />Gazette Code: {code}<br />Issue: {isssue}</div>
             },
         },
         {
@@ -62,7 +63,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: 'Confirmed/Return Date',
             flex: 1,
             valueGetter: (params) => {
-                return params?.value?DateUtils.datetimeStr(params?.value):"";
+                return params?.value ? DateUtils.datetimeStr(params?.value) : "";
             }
         },
         {
@@ -71,7 +72,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: 'Contact Person',
             flex: 1,
             renderCell: (params) => {
-                let company = params.row.enCompanyName!= null ?" ("+(params.row.enCompanyName)+")":"";
+                let company = params.row.enCompanyName != null ? " (" + (params.row.enCompanyName) + ")" : "";
 
                 let phone = JSON.parse(params.row.contactTelNo);
                 let faxNo = JSON.parse(params.row.contactFaxNo);
@@ -99,7 +100,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: 'Gazette Group',
             flex: 1,
             valueGetter: (params) => {
-                return (params?.value)?(params?.value):"";
+                return (params?.value) ? (params?.value) : "";
             }
         },
         {
@@ -108,42 +109,44 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: 'Fee',
             flex: 1,
             valueGetter: (params) => {
-                return (params?.value)?"$ "+currencyFormat(params?.value):"";
+                return (params?.value) ? "$ " + currencyFormat(params?.value) : "";
             }
         },
     ];
 
     function currencyFormat(num) {
         return num.toLocaleString('en-US', {
-            minimumFractionDigits: 2 
-          });
+            minimumFractionDigits: 2
+        });
     }
 
 
     function zeroPad(num, places) {
-        num=num?num:0;
+        num = num ? num : 0;
         var zero = places - num.toString().length + 1;
         return Array(+(zero > 0 && zero)).join("0") + num;
     }
-    
+
     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 style={{ height: '100%', width: '100%' }}>
+            <Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
+                <FiDataGrid
+                    rowHeight={80}
+                    rows={rows}
+                    columns={columns}
+                    initialState={{
+                        pagination: {
+                            paginationModel: { page: 0, pageSize: 5 },
+                        },
+                    }}
+                    onRowDoubleClick={handleRowDoubleClick}
+                    getRowHeight={() => 'auto'}
+                />
+            </Box>
         </div>
     );
 }
diff --git a/src/pages/Proof/Search_GLD/SearchForm.js b/src/pages/Proof/Search_GLD/SearchForm.js
index 1aab6af..3313fa4 100644
--- a/src/pages/Proof/Search_GLD/SearchForm.js
+++ b/src/pages/Proof/Search_GLD/SearchForm.js
@@ -10,11 +10,12 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
+import { Typography } from '../../../../node_modules/@mui/material/index';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issueComboData
-     }) => {
+const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
+}) => {
 
     const [type, setType] = React.useState([]);
     const [status, setStatus] = React.useState(ComboData.proofStatus[0]);
@@ -47,7 +48,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
             contact: data.contact,
             replyed: (status?.type && status?.type != 'all') ? status?.type : "",
             orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "",
-            
+
         };
         applySearch(temp);
     };
@@ -73,16 +74,16 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
         reset();
     }
 
-    function getIssueLabel(data){
-        if(data=={}) return "";
-        return  data.year
-        +" Vol. "+zeroPad(data.volume,3)
-        +", No. "+zeroPad(data.issueNo,2)
-        +", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
+    function getIssueLabel(data) {
+        if (data == {}) return "";
+        return data.year
+            + " Vol. " + zeroPad(data.volume, 3)
+            + ", No. " + zeroPad(data.issueNo, 2)
+            + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
     }
 
     function zeroPad(num, places) {
-        num=num?num:0;
+        num = num ? num : 0;
         var zero = places - num.toString().length + 1;
         return Array(+(zero > 0 && zero)).join("0") + num;
     }
@@ -90,222 +91,227 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
-            content={false}>
+            content={false}
+            sx={{ backgroundColor: 'backgroundColor.default' }}
+        >
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                        Search Form
-                    </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("refNo")}
-                            id='refNo'
-                            label="Proof No."
-                            defaultValue={searchCriteria.refNo}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3 }} width="98%">
+
+                    {/*row 1*/}
+                    <CardContent sx={{ px: 2.5, pt: 3 }}>
+                        <Grid item justifyContent="space-between" alignItems="center">
+                            <Typography variant="h5">Search Form</Typography>
+                        </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("refNo")}
+                                id='refNo'
+                                label="Proof No."
+                                defaultValue={searchCriteria.refNo}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("code")}
+                                id='code'
+                                label="Application / Gazette Code"
+                                defaultValue={searchCriteria.code}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <Autocomplete
+                                {...register("issueId")}
+                                disablePortal
+                                id="issueId"
+                                options={issueCombo}
+                                value={issueSelected}
+                                inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
+                                getOptionLabel={(option) => getIssueLabel(option)}
+                                onChange={(event, newValue) => {
+                                    setIssueSelected(newValue);
+                                }}
+                                renderInput={(params) => (
+                                    <TextField {...params}
+                                        label="Gazette Issue"
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                )}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <Autocomplete
+                                {...register("gazettGroup")}
+                                disablePortal
+                                id="gazettGroup"
+                                options={ComboData.groupTitle}
+                                value={groupSelected}
+                                inputValue={(groupSelected?.label) ? groupSelected?.label : ""}
+                                getOptionLabel={(option) => option.label}
+                                onChange={(event, newValue) => {
+                                    setGroupSelected(newValue);
+                                }}
+                                renderInput={(params) => (
+                                    <TextField {...params}
+                                        label="Gazette Group"
+                                        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="Proof Date (From)"
+                                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="Proof Date(To)"
+                                defaultValue={searchCriteria.dateTo}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("contact")}
+                                id="contact"
+                                label="Contact Person"
+                                defaultValue={searchCriteria.contact}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <Autocomplete
+                                {...register("status")}
+                                disablePortal
+                                id="status"
+                                filterOptions={(options) => options}
+                                options={ComboData.proofStatus}
+                                value={status}
+                                inputValue={status?.label ? status?.label : ""}
+                                onChange={(event, newValue) => {
+                                    if (newValue !== null) {
+                                        setStatus(newValue);
+                                    }
+                                }}
+                                renderInput={(params) => (
+                                    <TextField {...params}
+                                        label="Status"
+                                    />
+                                )}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        {
+                            orgCombo ?
+                                <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                    <Autocomplete
+                                        {...register("orgId")}
+                                        disablePortal={false}
+                                        id="orgId"
+                                        options={orgCombo}
+                                        value={orgSelected}
+                                        inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
+                                        onChange={(event, newValue) => {
+                                            setOrgSelected(newValue);
+                                        }}
+                                        renderInput={(params) => (
+                                            <TextField {...params}
+                                                label="Organization"
+                                                InputLabelProps={{
+                                                    shrink: true
+                                                }}
+                                            />
+                                        )}
+                                    />
+                                </Grid>
+                                : <></>
+                        }
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("code")}
-                            id='code'
-                            label="Application / Gazette Code"
-                            defaultValue={searchCriteria.code}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <Autocomplete
-                            {...register("issueId")}
-                            disablePortal
-                            id="issueId"
-                            options={issueCombo}
-                            value={issueSelected}
-                            inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
-                            getOptionLabel={(option)=>getIssueLabel(option)}
-                            onChange={(event, newValue) => {
-                                setIssueSelected(newValue);
-                            }}
-                            renderInput={(params) => (
-                                <TextField {...params}
-                                    label="Gazette Issue"
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
-                                />
-                            )}
-                        />
-                    </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <Autocomplete
-                            {...register("gazettGroup")}
-                            disablePortal
-                            id="gazettGroup"
-                            options={ComboData.groupTitle}
-                            value={groupSelected}
-                            inputValue={(groupSelected?.label)?groupSelected?.label:""}
-                            getOptionLabel={(option)=>option.label}
-                            onChange={(event, newValue) => {
-                                setGroupSelected(newValue);
-                            }}
-                            renderInput={(params) => (
-                                <TextField {...params}
-                                    label="Gazette Group"
-                                    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="Proof Date (From)"
-                            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="Proof Date(To)"
-                            defaultValue={searchCriteria.dateTo}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("contact")}
-                            id="contact"
-                            label="Contact Person"
-                            defaultValue={searchCriteria.contact}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <Autocomplete
-                            {...register("status")}
-                            disablePortal
-                            id="status"
-                            filterOptions={(options) => options}
-                            options={ComboData.proofStatus}
-                            value={status}
-                            inputValue={status?.label?status?.label:""}
-                            onChange={(event, newValue) => {
-                                if (newValue !== null) {
-                                    setStatus(newValue);
-                                }
-                            }}
-                            renderInput={(params) => (
-                                <TextField {...params}
-                                    label="Status"
-                                />
-                            )}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    {
-                        orgCombo ?
-                            <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                                <Autocomplete
-                                    {...register("orgId")}
-                                    disablePortal
-                                    id="orgId"
-                                    options={orgCombo}
-                                    value={orgSelected}
-                                    inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
-                                    onChange={(event, newValue) => {
-                                        setOrgSelected(newValue);
-                                    }}
-                                    renderInput={(params) => (
-                                        <TextField {...params}
-                                            label="Organization"
-                                            InputLabelProps={{
-                                                shrink: true
-                                            }}
-                                        />
-                                    )}
-                                />
-                            </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'
-                            }}>
-                            Clear
-                        </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'
-                            }}>
-                            Submit
-                        </Button>
+                    {/*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'
+                                }}>
+                                <Typography variant="h5">Clear</Typography>
+                            </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'
+                                }}>
+                                <Typography variant="h5">Submit</Typography>
+                            </Button>
+                        </Grid>
                     </Grid>
                 </Grid>
             </form>
diff --git a/src/pages/Proof/Search_GLD/index.js b/src/pages/Proof/Search_GLD/index.js
index dde3b21..f82694c 100644
--- a/src/pages/Proof/Search_GLD/index.js
+++ b/src/pages/Proof/Search_GLD/index.js
@@ -20,7 +20,7 @@ const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
     height: '100%',
-    backgroundSize:'contain',
+    backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundColor: '#0C489E',
     backgroundPosition: 'right'
@@ -30,12 +30,12 @@ const BackgroundHead = {
 
 const UserSearchPage_Individual = () => {
 
-    const [record,setRecord] = React.useState([]);
-    const [orgCombo,setOrgCombo] = React.useState([]);
-    const [issueCombo,setIssueCombo] = React.useState([]);
+    const [record, setRecord] = React.useState([]);
+    const [orgCombo, setOrgCombo] = React.useState([]);
+    const [issueCombo, setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
         dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 
@@ -53,36 +53,36 @@ const UserSearchPage_Individual = () => {
         getUserList();
     }, [searchCriteria]);
 
-    function getUserList(){
+    function getUserList() {
         HttpUtils.get({
             url: UrlUtils.LIST_PROOF,
             params: searchCriteria,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 setRecord(responseData);
             }
         });
     }
 
-    function getOrgCombo(){
+    function getOrgCombo() {
         HttpUtils.get({
             url: UrlUtils.GET_ORG_COMBO,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 let combo = responseData;
                 setOrgCombo(combo);
             }
         });
     }
 
-    function getIssueCombo(){
+    function getIssueCombo() {
         HttpUtils.get({
             url: UrlUtils.GET_ISSUE_COMBO,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 let combo = responseData;
                 setIssueCombo(combo);
             }
         });
     }
-    
+
 
     function applySearch(input) {
         setSearchCriteria(input);
@@ -90,9 +90,10 @@ const UserSearchPage_Individual = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
+            <Grid container sx={{ minHeight: '85vh', backgroundColor: 'backgroundColor.default' }} direction="column"
+            >
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -102,18 +103,19 @@ const UserSearchPage_Individual = () => {
                 </Grid>
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12}>
-                    <SearchForm 
-                    applySearch={applySearch}
-                    orgComboData={orgCombo}
-                    issueComboData={issueCombo}
-                    searchCriteria={searchCriteria}
+                    <SearchForm
+                        applySearch={applySearch}
+                        orgComboData={orgCombo}
+                        issueComboData={issueCombo}
+                        searchCriteria={searchCriteria}
                     />
                 </Grid>
                 {/*row 2*/}
-                <Grid item xs={12} md={12} lg={12}>
+
+                <Grid item xs={12} md={12} lg={12} sx={{ ml: 2, mr: 2 }}>
                     <MainCard elevation={0}
-                            border={false}
-                            content={false}
+                        border={false}
+                        content={false}
                     >
                         <EventTable
                             recordList={record}
diff --git a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
index a1fd60f..03ad99a 100644
--- a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
+++ b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
@@ -103,7 +103,7 @@ const ApplicationDetailCard = (
         if (applicationDetailData.data.groupNo) {
             window.open("/proof/create/" + currentApplicationDetailData.id, "_blank", "noreferrer");
             window.addEventListener("focus", onFocus)
-        }else{
+        } else {
             setWarningText("Please generate Gazette Code before Create Proof.");
             setIsWarningPopUp(true);
         }
@@ -143,7 +143,7 @@ const ApplicationDetailCard = (
                                             alignItems: 'end'
                                         }}>
                                         <EditNoteIcon />
-                                        <Typography ml={1}> Create Proof</Typography>
+                                        <Typography ml={1} variant="h5"> Create Proof</Typography>
                                     </Button> :
                                     null
                                 }
@@ -166,7 +166,7 @@ const ApplicationDetailCard = (
                                             color="orange"
                                         >
                                             <ReplayIcon />
-                                            <Typography ml={1}> Re-submit</Typography>
+                                            <Typography ml={1} variant="h5"> Re-submit</Typography>
                                         </Button>
                                         <Button
                                             // size="large"
@@ -178,7 +178,7 @@ const ApplicationDetailCard = (
                                                 alignItems: 'end',
                                             }}>
                                             <CloseIcon />
-                                            <Typography ml={1}>Not accepted</Typography>
+                                            <Typography ml={1} variant="h5">Not accepted</Typography>
                                         </Button>
                                     </> :
                                     currentApplicationDetailData.status == "paid" ?
@@ -193,7 +193,7 @@ const ApplicationDetailCard = (
                                                     backgroundColor: '#52b202'
                                                 }}>
                                                 <DoneIcon />
-                                                <Typography ml={1}> Complete</Typography>
+                                                <Typography ml={1} variant="h5">Complete</Typography>
                                             </Button>
                                             <Button
                                                 // size="large"
@@ -205,7 +205,7 @@ const ApplicationDetailCard = (
                                                     backgroundColor: '#ffa733'
                                                 }}>
                                                 <CloseIcon />
-                                                <Typography ml={1}> Withdraw</Typography>
+                                                <Typography ml={1} variant="h5">Withdraw</Typography>
                                             </Button>
                                         </> : null
                                 }
@@ -213,7 +213,7 @@ const ApplicationDetailCard = (
                         </Grid>
                     </Grid> : null
                 }
-                <Typography variant="h5" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                <Typography variant="h4" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}>
                     Application Details
                 </Typography>
                 <form>
@@ -225,7 +225,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel>Application No:</FormLabel>
+                                            <FormLabel><Typography variant="h5">Application No:</Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -253,7 +253,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel>Status:</FormLabel>
+                                            <FormLabel><Typography variant="h5">Status:</Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -270,7 +270,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel>Applicant:</FormLabel>
+                                            <FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -315,7 +315,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel>Contact Phone:</FormLabel>
+                                            <FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={8} lg={8}>
@@ -370,7 +370,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel>Contect Person:</FormLabel>
+                                            <FormLabel><Typography variant="h5">Contect Person:</Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -398,7 +398,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel>Contact Fax:</FormLabel>
+                                            <FormLabel><Typography variant="h5">Contact Fax:</Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={8} lg={8}>
@@ -457,7 +457,7 @@ const ApplicationDetailCard = (
                                             <Grid container direction="row">
                                                 <Grid item xs={12} md={3} lg={3}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
-                                                    <FormLabel>Manuscript File:</FormLabel>
+                                                    <FormLabel><Typography variant="h5">Manuscript File:</Typography></FormLabel>
                                                 </Grid>
                                                 <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <Grid container direction="row" justifyContent="flex-start">
@@ -466,6 +466,7 @@ const ApplicationDetailCard = (
                                                                 <Typography
                                                                     // fullWidth
                                                                     id='fileName'
+                                                                    variant="h5"
                                                                 >
                                                                     {fileDetail.filename}
                                                                 </Typography>
@@ -494,16 +495,16 @@ const ApplicationDetailCard = (
                     </Grid>
                 </form>
                 <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
-                    <DialogTitle>Warning</DialogTitle>
-                    <DialogContent style={{ display: 'flex', }}>
-                        <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}>OK</Button>
-                    </DialogActions>
-                </Dialog>
-            </div>
+                    <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                        <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
+                        <DialogContent style={{ display: 'flex', }}>
+                            <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">OK</Typography></Button>
+                        </DialogActions>
+                    </Dialog>
+                </div>
             </MainCard>
     );
 };
diff --git a/src/pages/PublicNotice/Details_GLD/ClientDetailCard.js b/src/pages/PublicNotice/Details_GLD/ClientDetailCard.js
index 47b3feb..5145ed7 100644
--- a/src/pages/PublicNotice/Details_GLD/ClientDetailCard.js
+++ b/src/pages/PublicNotice/Details_GLD/ClientDetailCard.js
@@ -1,8 +1,8 @@
 // material-ui
 import {
-    FormControl, 
+    FormControl,
     Button,
-    Grid, 
+    Grid,
     // InputAdornment, 
     Typography, FormLabel,
     OutlinedInput,
@@ -10,11 +10,11 @@ import {
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import * as React from "react";
-import {useForm} from "react-hook-form";
+import { useForm } from "react-hook-form";
 import {
     useEffect,
     useState
-    } from "react";
+} from "react";
 // import Checkbox from "@mui/material/Checkbox";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -27,17 +27,17 @@ import HighlightOff from '@mui/icons-material/HighlightOff';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ClientDetailCard = (
-    {   applicationDetailData,
+    { applicationDetailData,
         // isCollectData,
         // updateUserObject,
         // isNewRecord
     }
-    ) => {
+) => {
     // const params = useParams();
     const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
-    const [onReady,setOnReady] = useState(false);
-    const [companyName, setCompanyName] = useState({enCompanyName:"",chCompanyName:""});
-    const {register, 
+    const [onReady, setOnReady] = useState(false);
+    const [companyName, setCompanyName] = useState({ enCompanyName: "", chCompanyName: "" });
+    const { register,
         // getValues
     } = useForm()
     // const navigate = useNavigate()
@@ -46,12 +46,12 @@ const ClientDetailCard = (
         //if user data from parent are not null
         if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) {
             setCurrentApplicationDetailData(applicationDetailData.userData);
-            if (!applicationDetailData.companyName1==null){
+            if (!applicationDetailData.companyName1 == null) {
                 setCompanyName(applicationDetailData.companyName);
-            }else{
-                const companyNameData ={
-                    enCompanyName:applicationDetailData.userData.enCompanyName,
-                    chCompanyName:applicationDetailData.userData.chCompanyName
+            } else {
+                const companyNameData = {
+                    enCompanyName: applicationDetailData.userData.enCompanyName,
+                    chCompanyName: applicationDetailData.userData.chCompanyName
                 }
                 setCompanyName(companyNameData)
             }
@@ -68,12 +68,12 @@ const ClientDetailCard = (
 
     const handleViewClick = () => () => {
         console.log(currentApplicationDetailData)
-        currentApplicationDetailData.type == "ORG"?
-        window.open('/orgUser/'+ currentApplicationDetailData.id, "_blank", "noreferrer"):
-        window.open('/indUser/'+ currentApplicationDetailData.id, "_blank", "noreferrer");
+        currentApplicationDetailData.type == "ORG" ?
+            window.open('/orgUser/' + currentApplicationDetailData.id, "_blank", "noreferrer") :
+            window.open('/indUser/' + currentApplicationDetailData.id, "_blank", "noreferrer");
         window.addEventListener("focus", onFocus)
     };
-    
+
     const onFocus = () => {
         window.removeEventListener("focus", onFocus)
         location.reload();
@@ -91,15 +91,15 @@ const ClientDetailCard = (
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
-                      sx={{xs:"12", md:"7"}}>
+                border={false}
+                content={false}
+                sx={{ xs: "12", md: "7" }}>
                 <Grid container spacing={1} direction="row">
                     <Grid item xs={12} md={7} >
-                        <Stack 
+                        <Stack
                             direction="row"
                             justifyContent="flex-start"
                             alignItems="center"
@@ -114,42 +114,42 @@ const ClientDetailCard = (
                                     textTransform: 'capitalize',
                                     alignItems: 'end',
                                 }}>
-                                <ContentPasteSearchIcon/>
-                                <Typography ml={1} mr={1}> View</Typography>
+                                <ContentPasteSearchIcon />
+                                <Typography variant="h5" ml={1} mr={1}> View</Typography>
                             </Button>
                         </Stack>
                     </Grid>
                 </Grid>
-                <Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
-                        Client Details
+                <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                    Client Details
                 </Typography>
                 <form>
                     <Grid container direction="column" justifyContent="flex-start"
-                                alignItems="flex-start">
+                        alignItems="flex-start">
                         <Grid item xs={12} md={12} lg={12} mb={1}  >
-                                {currentApplicationDetailData.verifiedBy!==null?
-                                    <Stack direction="row">
-                                        <Typography>
-                                            Verified
-                                        </Typography>
-                                        <CheckCircleOutline color="success"/>
-                                    </Stack>:
-                                    <Stack direction="row">
-                                        <Typography>
-                                            Not Verified
-                                        </Typography>
-                                        <HighlightOff color="error"/>
-                                    </Stack>
-                                }
+                            {currentApplicationDetailData.verifiedBy !== null ?
+                                <Stack direction="row">
+                                    <Typography variant="h5">
+                                        Verified
+                                    </Typography>
+                                    <CheckCircleOutline sx={{ mt: 0.5, ml: 0.2 }} color="success" />
+                                </Stack> :
+                                <Stack direction="row">
+                                    <Typography variant="h5">
+                                        Not Verified
+                                    </Typography>
+                                    <HighlightOff sx={{ mt: 0.5, ml: 0.2 }} color="error" />
+                                </Stack>
+                            }
                         </Grid>
                     </Grid>
                     <Grid container direction="column" justifyContent="flex-start"
-                                alignItems="flex-start">
+                        alignItems="flex-start">
                         <Grid item xs={12} md={12} lg={12} mb={1}  >
-                            <FormLabel>Client Type:</FormLabel>
+                            <FormLabel><Typography variant="h5">Client Type:</Typography></FormLabel>
                         </Grid>
-                        <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
-                            <FormControl variant="outlined" sx={{width:'100%'}} disabled>
+                        <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
+                            <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                 <OutlinedInput
                                     size="small"
                                     {...register("type",
@@ -167,99 +167,23 @@ const ClientDetailCard = (
                             </FormControl>
                         </Grid>
                     </Grid>
-                    {currentApplicationDetailData.type==="ORG"?
-                    <>
-                        <Grid container direction="column" justifyContent="flex-start"
-                                    alignItems="flex-start">
-                            <Grid item xs={12} md={12} lg={12} mb={1}   
-                                sx={{display: 'flex', alignItems: 'center'}}>
-                                <FormLabel>Company Name (English):</FormLabel>
-                            </Grid>
-                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}}  >
-                                <FormControl variant="outlined"  sx={{width:'100%'}} disabled >
-                                    <OutlinedInput
-                                        size="small"
-                                        {...register("enCompanyName",
-                                            {
-                                                value: companyName.enCompanyName ,
-                                            })}
-                                        id='enCompanyName'
-                                        sx={{
-                                            "& .MuiInputBase-input.Mui-disabled": {
-                                                WebkitTextFillColor: "#000000",
-                                                background: "#f8f8f8",
-                                            },
-                                        }}
-                                    />
-                                </FormControl>
-                            </Grid>
-                        </Grid>
-                        <Grid container direction="column" justifyContent="flex-start"
-                                    alignItems="flex-start">
-                            <Grid item xs={12} md={12} lg={12} mb={1}   
-                                sx={{display: 'flex', alignItems: 'center'}}>
-                                <FormLabel>Company Name (Chinese):</FormLabel>
-                            </Grid>
-                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}}  >
-                                <FormControl variant="outlined" sx={{width:'100%'}}  disabled >
-                                    <OutlinedInput
-                                        size="small"
-                                        {...register("chCompanyName",
-                                            {
-                                                value: companyName.chCompanyName,
-                                            })}
-                                        id='chCompanyName'
-                                        sx={{
-                                            "& .MuiInputBase-input.Mui-disabled": {
-                                                WebkitTextFillColor: "#000000",
-                                                background: "#f8f8f8",
-                                            },
-                                        }}
-                                    />
-                                </FormControl>
-                            </Grid>
-                        </Grid>
-                        <Grid container direction="column" justifyContent="flex-start"
-                                    alignItems="flex-start">
-                            <Grid item xs={12} md={12} lg={12} mb={1}   
-                                sx={{display: 'flex', alignItems: 'center'}}>
-                                <FormLabel>English Name:</FormLabel>
-                            </Grid>
-                            <Grid item xs={12} md={12} lg={12} mb={1}  sx={{width:'100%'}} >
-                                <FormControl variant="outlined"  sx={{width:'100%'}} disabled >
-                                    <OutlinedInput
-                                        size="small"
-                                        {...register("contactPerson",
-                                            {
-                                                value: currentApplicationDetailData.contactPerson,
-                                            })}
-                                        id='contactPerson'
-                                        sx={{
-                                            "& .MuiInputBase-input.Mui-disabled": {
-                                                WebkitTextFillColor: "#000000",
-                                                background: "#f8f8f8",
-                                            },
-                                        }}
-                                    />
-                                </FormControl>
-                            </Grid>
-                        </Grid>
-                        <Grid container direction="column" justifyContent="flex-start"
-                                    alignItems="flex-start">
-                            <Grid item xs={12} md={12} lg={12} mb={1}   
-                                sx={{display: 'flex', alignItems: 'center'}}>
-                                <FormLabel>Contact Phone:</FormLabel>
-                            </Grid>
-                            <Grid item xs={12} md={12} lg={12} mb={1}   >
-                                <Stack direction="row">
-                                    <FormControl variant="outlined" sx={{width:'40%'}} disabled>
+                    {currentApplicationDetailData.type === "ORG" ?
+                        <>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">Company Name (English):</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
+                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                         <OutlinedInput
                                             size="small"
-                                            {...register("countryCode",
+                                            {...register("enCompanyName",
                                                 {
-                                                    value: currentApplicationDetailData.contactTel.countryCode,
+                                                    value: companyName.enCompanyName,
                                                 })}
-                                            id='countryCode'
+                                            id='enCompanyName'
                                             sx={{
                                                 "& .MuiInputBase-input.Mui-disabled": {
                                                     WebkitTextFillColor: "#000000",
@@ -268,14 +192,23 @@ const ClientDetailCard = (
                                             }}
                                         />
                                     </FormControl>
-                                    <FormControl variant="outlined" sx={{width:'100%'}} disabled>
+                                </Grid>
+                            </Grid>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">Company Name (Chinese):</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
+                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                         <OutlinedInput
                                             size="small"
-                                            {...register("phoneNumber",
+                                            {...register("chCompanyName",
                                                 {
-                                                    value: currentApplicationDetailData.contactTel.phoneNumber,
+                                                    value: companyName.chCompanyName,
                                                 })}
-                                            id='phoneNumber'
+                                            id='chCompanyName'
                                             sx={{
                                                 "& .MuiInputBase-input.Mui-disabled": {
                                                     WebkitTextFillColor: "#000000",
@@ -284,102 +217,118 @@ const ClientDetailCard = (
                                             }}
                                         />
                                     </FormControl>
-                                </Stack>
-                            </Grid>
-                        </Grid>
-                        <Grid container direction="column" justifyContent="flex-start"
-                                    alignItems="flex-start">
-                            <Grid item xs={12} md={12} lg={12} mb={1}   
-                                sx={{display: 'flex', alignItems: 'center'}}>
-                                <FormLabel>Email:</FormLabel>
-                            </Grid>
-                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}}  >
-                                <FormControl variant="outlined"  sx={{width:'100%'}} disabled >
-                                    <OutlinedInput
-                                        size="small"
-                                        {...register("emailBus",
-                                            {
-                                                value: currentApplicationDetailData.emailBus,
-                                            })}
-                                        id='emailBus'
-                                        sx={{
-                                            "& .MuiInputBase-input.Mui-disabled": {
-                                                WebkitTextFillColor: "#000000",
-                                                background: "#f8f8f8",
-                                            },
-                                        }}
-                                    />
-                                </FormControl>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                    </>:
-                    <>
-                        <Grid container direction="column" justifyContent="flex-start"
-                                    alignItems="flex-start">
-                            <Grid item xs={12} md={12} lg={12} mb={1}   
-                                sx={{display: 'flex', alignItems: 'center'}}>
-                                <FormLabel>English Name:</FormLabel>
-                            </Grid>
-                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}}  >
-                                <FormControl variant="outlined"  sx={{width:'100%'}} disabled >
-                                    <OutlinedInput
-                                        size="small"
-                                        {...register("enName",
-                                            {
-                                                value: currentApplicationDetailData.enName,
-                                            })}
-                                        id='enName'
-                                        sx={{
-                                            "& .MuiInputBase-input.Mui-disabled": {
-                                                WebkitTextFillColor: "#000000",
-                                                background: "#f8f8f8",
-                                            },
-                                        }}
-                                    />
-                                </FormControl>
-                            </Grid>
-                        </Grid>
-                        <Grid container direction="column" justifyContent="flex-start"
-                                    alignItems="flex-start">
-                            <Grid item xs={12} md={12} lg={12} mb={1}   
-                                sx={{display: 'flex', alignItems: 'center'}}>
-                                <FormLabel>Chinese Name:</FormLabel>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">English Name:</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
+                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
+                                        <OutlinedInput
+                                            size="small"
+                                            {...register("contactPerson",
+                                                {
+                                                    value: currentApplicationDetailData.contactPerson,
+                                                })}
+                                            id='contactPerson'
+                                            sx={{
+                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                    WebkitTextFillColor: "#000000",
+                                                    background: "#f8f8f8",
+                                                },
+                                            }}
+                                        />
+                                    </FormControl>
+                                </Grid>
                             </Grid>
-                            <Grid item xs={12} md={12} lg={12} mb={1}  sx={{width:'100%'}} >
-                                <FormControl variant="outlined" sx={{width:'100%'}} disabled >
-                                    <OutlinedInput
-                                        size="small"
-                                        {...register("chName",
-                                            {
-                                                value: currentApplicationDetailData.chName,
-                                            })}
-                                        id='chName'
-                                        sx={{
-                                            "& .MuiInputBase-input.Mui-disabled": {
-                                                WebkitTextFillColor: "#000000",
-                                                background: "#f8f8f8",
-                                            },
-                                        }}
-                                    />
-                                </FormControl>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1}   >
+                                    <Stack direction="row">
+                                        <FormControl variant="outlined" sx={{ width: '40%' }} disabled>
+                                            <OutlinedInput
+                                                size="small"
+                                                {...register("countryCode",
+                                                    {
+                                                        value: currentApplicationDetailData.contactTel.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.contactTel.phoneNumber,
+                                                    })}
+                                                id='phoneNumber'
+                                                sx={{
+                                                    "& .MuiInputBase-input.Mui-disabled": {
+                                                        WebkitTextFillColor: "#000000",
+                                                        background: "#f8f8f8",
+                                                    },
+                                                }}
+                                            />
+                                        </FormControl>
+                                    </Stack>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        <Grid container direction="column" justifyContent="flex-start"
-                                    alignItems="flex-start">
-                            <Grid item xs={12} md={12} lg={12} mb={1}   
-                                sx={{display: 'flex', alignItems: 'center'}}>
-                                <FormLabel>Contact Phone:</FormLabel>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">Email:</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
+                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
+                                        <OutlinedInput
+                                            size="small"
+                                            {...register("emailBus",
+                                                {
+                                                    value: currentApplicationDetailData.emailBus,
+                                                })}
+                                            id='emailBus'
+                                            sx={{
+                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                    WebkitTextFillColor: "#000000",
+                                                    background: "#f8f8f8",
+                                                },
+                                            }}
+                                        />
+                                    </FormControl>
+                                </Grid>
                             </Grid>
-                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}}  >
-                                <Stack direction="row">
-                                    <FormControl variant="outlined" sx={{width:'40%'}} disabled>
+                        </> :
+                        <>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">English Name:</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
+                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                         <OutlinedInput
                                             size="small"
-                                            {...register("countryCode",
+                                            {...register("enName",
                                                 {
-                                                    value: currentApplicationDetailData.mobileNumber.countryCode,
+                                                    value: currentApplicationDetailData.enName,
                                                 })}
-                                            id='countryCode'
+                                            id='enName'
                                             sx={{
                                                 "& .MuiInputBase-input.Mui-disabled": {
                                                     WebkitTextFillColor: "#000000",
@@ -388,14 +337,23 @@ const ClientDetailCard = (
                                             }}
                                         />
                                     </FormControl>
-                                    <FormControl variant="outlined" sx={{width:'100%'}} disabled>
+                                </Grid>
+                            </Grid>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">Chinese Name:</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
+                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                         <OutlinedInput
                                             size="small"
-                                            {...register("phoneNumber",
+                                            {...register("chName",
                                                 {
-                                                    value: currentApplicationDetailData.mobileNumber.phoneNumber,
+                                                    value: currentApplicationDetailData.chName,
                                                 })}
-                                            id='phoneNumber'
+                                            id='chName'
                                             sx={{
                                                 "& .MuiInputBase-input.Mui-disabled": {
                                                     WebkitTextFillColor: "#000000",
@@ -404,37 +362,79 @@ const ClientDetailCard = (
                                             }}
                                         />
                                     </FormControl>
-                                </Stack>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        <Grid container direction="column" justifyContent="flex-start"
-                                    alignItems="flex-start">
-                            <Grid item xs={12} md={12} lg={12} mb={1}   
-                                sx={{display: 'flex', alignItems: 'center'}}>
-                                <FormLabel>Email:</FormLabel>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
+                                    <Stack direction="row">
+                                        <FormControl variant="outlined" sx={{ width: '40%' }} disabled>
+                                            <OutlinedInput
+                                                size="small"
+                                                {...register("countryCode",
+                                                    {
+                                                        value: currentApplicationDetailData.mobileNumber.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.mobileNumber.phoneNumber,
+                                                    })}
+                                                id='phoneNumber'
+                                                sx={{
+                                                    "& .MuiInputBase-input.Mui-disabled": {
+                                                        WebkitTextFillColor: "#000000",
+                                                        background: "#f8f8f8",
+                                                    },
+                                                }}
+                                            />
+                                        </FormControl>
+                                    </Stack>
+                                </Grid>
                             </Grid>
-                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
-                                <FormControl variant="outlined" sx={{width:'100%'}} disabled >
-                                    <OutlinedInput
-                                        size="small"
-                                        {...register("emailAddress",
-                                            {
-                                                value: currentApplicationDetailData.emailAddress,
-                                            })}
-                                        id='emailAddress'
-                                        sx={{
-                                            "& .MuiInputBase-input.Mui-disabled": {
-                                                WebkitTextFillColor: "#000000",
-                                                background: "#f8f8f8",
-                                            },
-                                        }}
-                                    />
-                                </FormControl>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">Email:</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
+                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
+                                        <OutlinedInput
+                                            size="small"
+                                            {...register("emailAddress",
+                                                {
+                                                    value: currentApplicationDetailData.emailAddress,
+                                                })}
+                                            id='emailAddress'
+                                            sx={{
+                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                    WebkitTextFillColor: "#000000",
+                                                    background: "#f8f8f8",
+                                                },
+                                            }}
+                                        />
+                                    </FormControl>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                    </>
+                        </>
                     }
-                    
+
                 </form>
             </MainCard>
     );
diff --git a/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js b/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js
index 8ce5f4c..5ad79d0 100644
--- a/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js
+++ b/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js
@@ -124,7 +124,7 @@ const GazetteDetailCard = (
                                         alignItems: 'end'
                                     }}>
                                     <EditNoteIcon />
-                                    <Typography ml={1}> Gen Gazette Code</Typography>
+                                    <Typography variant="h5" ml={1}> Gen Gazette Code</Typography>
                                 </Button>
                             </Stack>
                         </Grid>
@@ -142,7 +142,7 @@ const GazetteDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{display: 'flex', alignItems: 'center'}}>
-                                            <FormLabel>Issue Number:</FormLabel>
+                                            <FormLabel><Typography variant="h5">Issue Number:</Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -171,7 +171,7 @@ const GazetteDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{display: 'flex', alignItems: 'center'}}>
-                                            <FormLabel>Gazette Code:</FormLabel>
+                                            <FormLabel><Typography variant="h5">Gazette Code:</Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -203,7 +203,7 @@ const GazetteDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{display: 'flex', alignItems: 'center'}}>
-                                            <FormLabel>Issue Date:</FormLabel>
+                                            <FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -232,7 +232,7 @@ const GazetteDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{display: 'flex', alignItems: 'center'}}>
-                                            <FormLabel>Group Title:</FormLabel>
+                                            <FormLabel><Typography variant="h5">Group Title:</Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -263,13 +263,13 @@ const GazetteDetailCard = (
                 </form>
                 <div>
                 <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
-                    <DialogTitle>Warning</DialogTitle>
+                    <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
-                        <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
+                        <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}>No</Button>
-                        <Button color="success" onClick={()=>callback()}>Yes</Button>
+                        <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">No</Typography></Button>
+                        <Button color="success" onClick={()=>callback()}><Typography variant="h5">Yes</Typography></Button>
                     </DialogActions>
                 </Dialog>
             </div>
diff --git a/src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js b/src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js
index ba3ae42..2c96ae6 100644
--- a/src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js
+++ b/src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js
@@ -45,25 +45,25 @@ const StatusChangeDialog = (props) => {
     } else {
       setDialogTitle("Action Confirm");
       setPrositiveBtnText("Confirm");
-      let str = "Are you sure you want to "+props.getStatus+" this application?"
+      let str = "Are you sure you want to " + props.getStatus + " this application?"
       return getConfirmContent(str);
     }
   }, [props.getStatus]);
 
   const acceptedHandle = () => () => {
     const getStatus = props.getStatus.status;
-    if(getStatus == "notAccepted"){
-      if(!remarks || remarks=="" )
+    if (getStatus == "notAccepted") {
+      if (!remarks || remarks == "")
         setHelperText("Please enter reason");
     }
-    if(!helperText){
-      props.setReason({"reason": remarks});
-      if (remarks!=null&&remarks!=""){
+    if (!helperText) {
+      props.setReason({ "reason": remarks });
+      if (remarks != null && remarks != "") {
         console.log(remarks)
         // props.setStatusWindowAccepted(true);
       }
     }
-    if(getStatus != "notAccepted"){
+    if (getStatus != "notAccepted") {
       props.setStatusWindowAccepted(true);
     }
   };
@@ -80,9 +80,9 @@ const StatusChangeDialog = (props) => {
 
   const getConfirmContent = (text) => {
     setContent(<Grid container direction="row" justifyContent="center" alignItems="center">
-        <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
-          {text}
-        </FormLabel>
+      <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
+        <Typography variant="h5">{text}</Typography>
+      </FormLabel>
     </Grid>);
   }
 
@@ -98,12 +98,12 @@ const StatusChangeDialog = (props) => {
           inputProps={{ maxLength: 255 }}
           placeholder="Please enter reason"
           helperText={helperText}
-          onChange={(newValues)=>{
+          onChange={(newValues) => {
             setRemarks(newValues.target.value);
             setHelperText("");
           }}
         >
-          </TextField>
+        </TextField>
       </Grid>
     </Grid>
     );
@@ -115,11 +115,11 @@ const StatusChangeDialog = (props) => {
         <Grid container alignItems={"center"}>
           <Grid item xs={12} md={2} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
-            <Typography>Target Issue:</Typography>
+            <Typography variant="h5">Target Issue:</Typography>
           </Grid>
           <Grid item xs={12} md={9} lg={9}>
             <FormLabel>
-              {props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate}
+            <Typography variant="h5">{props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate}</Typography>
             </FormLabel>
           </Grid>
         </Grid>
@@ -128,7 +128,7 @@ const StatusChangeDialog = (props) => {
         <Grid container alignItems={"center"}>
           <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
-            <Typography>Gazette Group:</Typography>
+            <Typography variant="h5">Gazette Group:</Typography>
           </Grid>
           <Grid item xs={12} md={9} lg={9}>
             <Autocomplete
@@ -144,7 +144,8 @@ const StatusChangeDialog = (props) => {
                   setComboInputValue(newValue);
                   props.setSelectedGazetteGroup(newValue);
                   formik.setFieldValue("", "")
-                } else {gazetteGroup
+                } else {
+                  gazetteGroup
                   props.setSelectedGazetteGroupInputType("");
                 }
               }}
@@ -188,12 +189,16 @@ const StatusChangeDialog = (props) => {
       <Stack direction="row" justifyContent="space-around">
         <DialogActions>
           <Button variant="contained" onClick={props.handleClose} autoFocus >
-            Cancel
+            <Typography variant="h5">
+              Cancel
+            </Typography>
           </Button>
         </DialogActions>
         <DialogActions>
           <Button variant="contained" color="success" onClick={acceptedHandle()} autoFocus disabled={Object.keys(props.selectedGazetteGroup).length === 0 && props.getStatus === "genGazetteCode"}>
-            {prositiveBtnText}
+            <Typography variant="h5">
+              {prositiveBtnText}
+            </Typography>
           </Button>
         </DialogActions>
       </Stack>
diff --git a/src/pages/PublicNotice/Details_GLD/index.js b/src/pages/PublicNotice/Details_GLD/index.js
index 64211ab..237a8ed 100644
--- a/src/pages/PublicNotice/Details_GLD/index.js
+++ b/src/pages/PublicNotice/Details_GLD/index.js
@@ -299,7 +299,7 @@ const PublicNoticeDetail_GLD = () => {
   }, [getUploadStatus]);
 
   return (
-    <Grid container sx={{ maxnHeight: '500vh', backgroundColor: '#ffffff' }} direction="column">
+    <Grid container sx={{ maxHeight: '500vh', backgroundColor: 'backgroundColor.default' }} direction="column">
       <StatusChangeDialog open={open}
         handleClose={handleClose}
         setReason={setReason}
@@ -334,10 +334,10 @@ const PublicNoticeDetail_GLD = () => {
       </Grid>
       <Grid item xs={12} >
         <Grid container direction="row">
-          <Grid item xs={12} md={10}>
+          <Grid item xs={12} md={10} lg={10} xl={10}>
             <Grid container direction="column">
-              <Grid item xs={12} md={10}>
-                <Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
+              <Grid item xs={12} md={10} lg={10} xl={10}>
+                <Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   {isLoading && editMode ?
                     <LoadingComponent /> :
                     <ApplicationDetailCard
@@ -353,8 +353,8 @@ const PublicNoticeDetail_GLD = () => {
                   }
                 </Box>
               </Grid>
-              <Grid item xs={12} md={10}>
-                <Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
+              <Grid item xs={12} md={10} lg={10} xl={10}>
+                <Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   <GazetteDetailCard
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}
@@ -364,8 +364,8 @@ const PublicNoticeDetail_GLD = () => {
                   />
                 </Box>
               </Grid>
-              <Grid item xs={12} md={10}>
-                <Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
+              <Grid item xs={12} md={10} lg={10} xl={10}>
+                <Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   <TabTableDetail
                     applicationDetailData={applicationDetailData}
                     proofList={proofList}
@@ -375,10 +375,10 @@ const PublicNoticeDetail_GLD = () => {
               </Grid>
             </Grid>
           </Grid>
-          <Grid item xs={12} md={2} lg={2}>
+          <Grid item xs={12} md={2} lg={2} xl={2}>
             <Grid container>
               <Grid item xs={12} md={12}>
-                <Box xs={12} md={12} ml={1} mt={3} mr={1} height='800px' sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
+                <Box xs={12} md={12} ml={3} mt={3} mr={1} height='800px' sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   <ClientDetailCard
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}
diff --git a/src/pages/PublicNotice/Details_Public/index.js b/src/pages/PublicNotice/Details_Public/index.js
index 12e11fe..2fa76a5 100644
--- a/src/pages/PublicNotice/Details_Public/index.js
+++ b/src/pages/PublicNotice/Details_Public/index.js
@@ -1,14 +1,15 @@
 import {
   useEffect,
   useState
-  } from "react";
+} from "react";
 
 // material-ui
 import {
   Grid,
   Typography,
   Stack,
-  Box
+  Box,
+  Button
 } from '@mui/material';
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -25,8 +26,9 @@ import {
   GET_PUBLIC_NOTICE_APPLY_DETAIL,
   SET_PUBLIC_NOTICE_STATUS_CANCELLED
 } from "utils/ApiPathConst";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog')));
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
 
 // ==============================|| Body - DEFAULT ||============================== //
 
@@ -46,7 +48,7 @@ const DashboardDefault = () => {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
     height: '100%',
-    backgroundSize:'contain',
+    backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundColor: '#0C489E',
     backgroundPosition: 'right'
@@ -58,23 +60,23 @@ const DashboardDefault = () => {
   }, []);
 
   const loadApplicationDetail = () => {
-    if(params.id > 0 ){
+    if (params.id > 0) {
       axios.get(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`)
-          .then((response) => {
-              if (response.status === 200) {
-                setApplicationDetailData(response.data);
-                setAapNo(response.data.data.appNo);
-              }
-          })
-          .catch(error => {
-              console.log(error);
-              return false;
-          });
+        .then((response) => {
+          if (response.status === 200) {
+            setApplicationDetailData(response.data);
+            setAapNo(response.data.data.appNo);
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          return false;
+        });
     }
   }
 
   useEffect(() => {
-    if(applicationDetailData.data === null){
+    if (applicationDetailData.data === null) {
       navigate('/publicNotice');
     }
   }, [applicationDetailData]);
@@ -86,8 +88,8 @@ const DashboardDefault = () => {
   };
 
   useEffect(() => {
-    if(statusWindowAccepted){
-      if(getStatus == "cancel"){
+    if (statusWindowAccepted) {
+      if (getStatus == "cancel") {
         onCancelledClick()
       }
     }
@@ -95,31 +97,31 @@ const DashboardDefault = () => {
 
   useEffect(() => {
     // console.log(getStatus)
-    if(getStatus!==""){
+    if (getStatus !== "") {
       setOpen(true)
     }
   }, [getStatus]);
 
   const onCancelledClick = () => {
-    if(params.id > 0 ){
-        axios.get(`${SET_PUBLIC_NOTICE_STATUS_CANCELLED}/${params.id}`)
-          .then((response) => {
-              if (response.status === 204) {
-                setOpen(false);
-                handleClose();
-                loadApplicationDetail()
-              }
-          })
-          .catch(error => {
-              console.log(error);
-              return false;
-          });
+    if (params.id > 0) {
+      axios.get(`${SET_PUBLIC_NOTICE_STATUS_CANCELLED}/${params.id}`)
+        .then((response) => {
+          if (response.status === 204) {
+            setOpen(false);
+            handleClose();
+            loadApplicationDetail()
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          return false;
+        });
     }
   };
 
   return (
-    <Grid container sx={{minHeight: '110vh',backgroundColor:'#ffffff'}} direction="column">
-      <StatusChangeDialog open={open} handleClose={handleClose} setStatusWindowAccepted={setStatusWindowAccepted} getStatus={getStatus}/>
+    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#ffffff' }} direction="column">
+      <StatusChangeDialog open={open} handleClose={handleClose} setStatusWindowAccepted={setStatusWindowAccepted} getStatus={getStatus} />
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -128,33 +130,40 @@ const DashboardDefault = () => {
         </div>
       </Grid>
       <Grid item xs={12} >
-          <Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center">
-            <Typography ml={3} mt={3} variant="h4">我的公共啟事 / {appNo}</Typography>
-          </Stack>
+        <Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center">
+          <Typography ml={3} mt={3} variant="h4">我的公共啟事 / {appNo}</Typography>
+        </Stack>
       </Grid>
+
       <Grid item xs={12} md={12}>
         <Grid container direction="column" justifyContent="flex-start" alignItems="center">
+          <Grid item xs={12} width="75%">
+            <Button sx={{ mt: 4 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}>
+              <KeyboardBackspaceOutlinedIcon />
+              <Typography variant="h4">Back</Typography>
+            </Button>
+          </Grid>
           {/* <Grid item xs={12} md={12} > */}
-            {/* <Grid container direction="column" alignItems="center"> */}
-              <Grid item width="75%">
-                <Box xs={12} mt={6} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
-                  <ApplicationDetailCard 
-                    setStatus = {setStatus}
-                    applicationDetailData={applicationDetailData}
-                    // isCollectData={isCollectData}
-                    // isNewRecord={isNewRecord}
-                  />
-                </Box>
-              </Grid>
-              {/* <Grid item xs={12} md={12} width="85%">
+          {/* <Grid container direction="column" alignItems="center"> */}
+          <Grid item width="75%">
+            <Box xs={12} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
+              <ApplicationDetailCard
+                setStatus={setStatus}
+                applicationDetailData={applicationDetailData}
+              // isCollectData={isCollectData}
+              // isNewRecord={isNewRecord}
+              />
+            </Box>
+          </Grid>
+          {/* <Grid item xs={12} md={12} width="85%">
                 <Box xs={12} mt={3}>
                   <TabTableDetail applicationDetailData={applicationDetailData}/>
                 </Box>
               </Grid> */}
-            {/* </Grid> */}
+          {/* </Grid> */}
           {/* </Grid> */}
         </Grid>
-          
+
       </Grid>
     </Grid>
   );
diff --git a/src/pages/PublicNotice/Search_GLD/DataGrid.js b/src/pages/PublicNotice/Search_GLD/DataGrid.js
index f6ad551..994f257 100644
--- a/src/pages/PublicNotice/Search_GLD/DataGrid.js
+++ b/src/pages/PublicNotice/Search_GLD/DataGrid.js
@@ -1,12 +1,13 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button
+    Button,
+    Box
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
-import {useNavigate} from "react-router-dom";
-import {FiDataGrid} from "components/FiDataGrid";
+import { useNavigate } from "react-router-dom";
+import { FiDataGrid } from "components/FiDataGrid";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -18,7 +19,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }, [recordList]);
 
     const handleEditClick = (params) => () => {
-        navigate('/application/'+ params.id);
+        navigate('/application/' + params.id);
     };
 
 
@@ -36,7 +37,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'status',
             field: 'status',
             headerName: 'Status',
-            width: 150,
+            width: 175,
             renderCell: (params) => {
                 return [StatusUtils.getStatusEng(params)]
             },
@@ -56,7 +57,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: 'Contact Person',
             flex: 2,
             renderCell: (params) => {
-                let company = params.row.enCompanyName!= null ?" ("+(params.row.enCompanyName)+")":"";
+                let company = params.row.enCompanyName != null ? " (" + (params.row.enCompanyName) + ")" : "";
 
                 let phone = JSON.parse(params.row.contactTelNo);
                 let faxNo = JSON.parse(params.row.contactFaxNo);
@@ -84,7 +85,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: 'Gazette Group',
             flex: 1,
             valueGetter: (params) => {
-                return (params?.value)?(params?.value):"";
+                return (params?.value) ? (params?.value) : "";
             }
         },
         {
@@ -94,37 +95,39 @@ export default function SearchPublicNoticeTable({ recordList }) {
             flex: 1,
             valueGetter: (params) => {
                 return params.row.issueYear
-                +" Vol. "+zeroPad(params.row.issueVolume,3)
-                +", No. "+zeroPad(params.row.issueNo,2)
-                +", "+DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
+                    + " Vol. " + zeroPad(params.row.issueVolume, 3)
+                    + ", No. " + zeroPad(params.row.issueNo, 2)
+                    + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
             }
         },
     ];
 
     function zeroPad(num, places) {
-        num=num?num:0;
+        num = num ? num : 0;
         var zero = places - num.toString().length + 1;
         return Array(+(zero > 0 && zero)).join("0") + num;
     }
 
     function handleRowDoubleClick(params) {
         // handleEditClick(params)
-        navigate('/application/'+ params.id);
+        navigate('/application/' + params.id);
     }
 
     return (
-        <div style={{ height: 400, width: '100%' }}>
-
-            <FiDataGrid
-                rows={rows}
-                columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 5 },
-                    },
-                }}
-                onRowDoubleClick={handleRowDoubleClick}
-            />
+        <div style={{ height: '100%', width: '100%' }}>
+            <Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
+                <FiDataGrid
+                    rows={rows}
+                    columns={columns}
+                    initialState={{
+                        pagination: {
+                            paginationModel: { page: 0, pageSize: 5 },
+                        },
+                    }}
+                    getRowHeight={() => 'auto'}
+                    onRowDoubleClick={handleRowDoubleClick}
+                />
+            </Box>
         </div>
     );
 }
diff --git a/src/pages/PublicNotice/Search_GLD/SearchForm.js b/src/pages/PublicNotice/Search_GLD/SearchForm.js
index e0af8d2..1cc054a 100644
--- a/src/pages/PublicNotice/Search_GLD/SearchForm.js
+++ b/src/pages/PublicNotice/Search_GLD/SearchForm.js
@@ -3,18 +3,19 @@ import {
     Button,
     CardContent,
     Grid, TextField,
-    Autocomplete
+    Autocomplete,
+    Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import { useForm } from "react-hook-form";
-import * as React  from "react";
+import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issueComboData
-     }) => {
+const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
+}) => {
 
     const [type, setType] = React.useState([]);
     // const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' });
@@ -28,7 +29,6 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
 
-
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
         data.status = selectedLabelsString
@@ -71,16 +71,16 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
         reset();
     }
 
-    function getIssueLabel(data){
-        if(data=={}) return "";
-        return  data.year
-        +" Vol. "+zeroPad(data.volume,3)
-        +", No. "+zeroPad(data.issueNo,2)
-        +", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
+    function getIssueLabel(data) {
+        if (data == {}) return "";
+        return data.year
+            + " Vol. " + zeroPad(data.volume, 3)
+            + ", No. " + zeroPad(data.issueNo, 2)
+            + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
     }
 
     function zeroPad(num, places) {
-        num=num?num:0;
+        num = num ? num : 0;
         var zero = places - num.toString().length + 1;
         return Array(+(zero > 0 && zero)).join("0") + num;
     }
@@ -88,83 +88,87 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
-            content={false}>
+            content={false}
+            sx={{ backgroundColor: 'backgroundColor.default' }}
+        >
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                        Search Form
-                    </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("appNo")}
-                            id='appNo'
-                            label="App No."
-                            defaultValue={searchCriteria.appNo}
-                            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="Submit Date(From)"
-                            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="Submit Date(To)"
-                            defaultValue={searchCriteria.dateTo}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("contact")}
-                            id="contact"
-                            label="Contact Person"
-                            defaultValue={searchCriteria.contact}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3}} width="98%">
+                    {/*row 1*/}
+                    <Grid item xs={12}>
+                        <CardContent sx={{ px: 2.5, pt: 3 }}>
+                            <Grid item justifyContent="space-between" alignItems="center">
+                                <Typography variant="h5">Search Form</Typography>
+                            </Grid>
+                        </CardContent>
                     </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        {/* <Autocomplete
+                    {/*row 2*/}
+                    <Grid container display="flex" alignItems={"center"}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("appNo")}
+                                id='appNo'
+                                label={"App No."}
+                                defaultValue={searchCriteria.appNo}
+                                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={"Submit Date(From)"}
+                                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={"Submit Date(To)"}
+                                defaultValue={searchCriteria.dateTo}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("contact")}
+                                id="contact"
+                                label={"Contact Person"}
+                                defaultValue={searchCriteria.contact}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            {/* <Autocomplete
                             {...register("status")}
                             disablePortal
                             id="status"
@@ -186,134 +190,135 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
                                 shrink: true
                             }}
                         /> */}
-                        <Autocomplete
-                            multiple  
-                            {...register("status")}
-                            id="status"
-                            options={ComboData.publicNoticeStatic_GLD}
-                            value={selectedStatus}  
-                            onChange={(event, newValue) => {
-                                const findAllIndex = newValue.findIndex((ele) => {
-                                    return ele.type === "all"
-                                })
-
-                                if (findAllIndex > -1) {
-                                    setSelectedStatus([newValue[findAllIndex]]);  
-                                    setSelectedLabelsString('all')
-                                } else {
-                                    const selectedLabels = newValue.map(option => option.type);
-                                    const selectedLabelsString = `${selectedLabels.join(',')}`;
-                                    setSelectedStatus(newValue);  
-                                    setSelectedLabelsString(selectedLabelsString);
-                                }
-                            }}
-                            getOptionLabel={(option) => option.label}  
-                            renderInput={(params) => (
-                                <TextField
-                                {...params}
-                                label="Status"
-                                />
-                            )}
-                        />
-                    </Grid>
-
-                    {
-                        orgCombo ?
-                            <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                                <Autocomplete
-                                    {...register("orgId")}
-                                    disablePortal
-                                    id="orgId"
-                                    options={orgCombo}
-                                    value={orgSelected}
-                                    inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
-                                    onChange={(event, newValue) => {
-                                        if (newValue !== null) {
-                                            setOrgSelected(newValue);
-                                        }
-                                    }}
-                                    renderInput={(params) => (
-                                        <TextField {...params}
-                                            label="Organization"
-                                            InputLabelProps={{
-                                                shrink: true
-                                            }}
-                                        />
-                                    )}
-                                />
-                            </Grid>
-                            : <></>
-                    }
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <Autocomplete
-                            {...register("issueId")}
-                            disablePortal
-                            id="issueId"
-                            options={issueCombo}
-                            value={issueSelected}
-                            inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
-                            getOptionLabel={(option)=>getIssueLabel(option)}
-                            onChange={(event, newValue) => {
-                                if (newValue !== null) {
-                                    setIssueSelected(newValue);
-                                }
-                            }}
-                            renderInput={(params) => (
-                                <TextField {...params}
-                                    label="Gazette Issue"
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
-                                />
-                            )}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("groupNo")}
-                            id='groupNo'
-                            label="Gazette Code."
-                            defaultValue={searchCriteria.groupNo}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </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'
-                            }}>
-                            Clear
-                        </Button>
+                            <Autocomplete
+                                multiple
+                                {...register("status")}
+                                id="status"
+                                options={ComboData.publicNoticeStatic_GLD}
+                                value={selectedStatus}
+                                onChange={(event, newValue) => {
+                                    const findAllIndex = newValue.findIndex((ele) => {
+                                        return ele.type === "all"
+                                    })
+
+                                    if (findAllIndex > -1) {
+                                        setSelectedStatus([newValue[findAllIndex]]);
+                                        setSelectedLabelsString('all')
+                                    } else {
+                                        const selectedLabels = newValue.map(option => option.type);
+                                        const selectedLabelsString = `${selectedLabels.join(',')}`;
+                                        setSelectedStatus(newValue);
+                                        setSelectedLabelsString(selectedLabelsString);
+                                    }
+                                }}
+                                getOptionLabel={(option) => option.label}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Status"
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                )}
+                            />
+                        </Grid>
+
+                        {
+                            orgCombo ?
+                                <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                    <Autocomplete
+                                        {...register("orgId")}
+                                        disablePortal
+                                        id="orgId"
+                                        options={orgCombo}
+                                        value={orgSelected}
+                                        inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
+                                        onChange={(event, newValue) => {
+                                            if (newValue !== null) {
+                                                setOrgSelected(newValue);
+                                            }
+                                        }}
+                                        renderInput={(params) => (
+                                            <TextField {...params}
+                                                label="Organization"
+                                                InputLabelProps={{
+                                                    shrink: true
+                                                }}
+                                            />
+                                        )}
+                                    />
+                                </Grid>
+                                : <></>
+                        }
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <Autocomplete
+                                {...register("issueId")}
+                                disablePortal
+                                id="issueId"
+                                options={issueCombo}
+                                value={issueSelected}
+                                inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
+                                getOptionLabel={(option) => getIssueLabel(option)}
+                                onChange={(event, newValue) => {
+                                    if (newValue !== null) {
+                                        setIssueSelected(newValue);
+                                    }
+                                }}
+                                renderInput={(params) => (
+                                    <TextField {...params}
+                                        label="Gazette Issue"
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                )}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("groupNo")}
+                                id='groupNo'
+                                label="Gazette Code."
+                                defaultValue={searchCriteria.groupNo}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            Submit
-                        </Button>
+                    {/*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'
+                                }}>
+                                <Typography variant="h5">Clear</Typography>
+                            </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'
+                                }}>
+                                <Typography variant="h5">Submit</Typography>
+                            </Button>
+                        </Grid>
                     </Grid>
                 </Grid>
             </form>
diff --git a/src/pages/PublicNotice/Search_GLD/index.js b/src/pages/PublicNotice/Search_GLD/index.js
index eace58b..d3e31ee 100644
--- a/src/pages/PublicNotice/Search_GLD/index.js
+++ b/src/pages/PublicNotice/Search_GLD/index.js
@@ -20,7 +20,7 @@ const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
     height: '100%',
-    backgroundSize:'contain',
+    backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundColor: '#0C489E',
     backgroundPosition: 'right'
@@ -30,12 +30,12 @@ const BackgroundHead = {
 
 const UserSearchPage_Individual = () => {
 
-    const [record,setRecord] = React.useState([]);
-    const [orgCombo,setOrgCombo] = React.useState([]);
-    const [issueCombo,setIssueCombo] = React.useState([]);
+    const [record, setRecord] = React.useState([]);
+    const [orgCombo, setOrgCombo] = React.useState([]);
+    const [issueCombo, setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
         dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 
@@ -53,36 +53,36 @@ const UserSearchPage_Individual = () => {
         getUserList();
     }, [searchCriteria]);
 
-    function getUserList(){
+    function getUserList() {
         HttpUtils.get({
             url: UrlUtils.GET_PUBLIC_NOTICE_LIST,
             params: searchCriteria,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 setRecord(responseData);
             }
         });
     }
 
-    function getOrgCombo(){
+    function getOrgCombo() {
         HttpUtils.get({
             url: UrlUtils.GET_ORG_COMBO,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 let combo = responseData;
                 setOrgCombo(combo);
             }
         });
     }
 
-    function getIssueCombo(){
+    function getIssueCombo() {
         HttpUtils.get({
             url: UrlUtils.GET_ISSUE_COMBO,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 let combo = responseData;
                 setIssueCombo(combo);
             }
         });
     }
-    
+
 
     function applySearch(input) {
         setSearchCriteria(input);
@@ -90,9 +90,9 @@ const UserSearchPage_Individual = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
+            <Grid container sx={{ minHeight: '85vh', backgroundColor: 'backgroundColor.default' }} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -102,18 +102,19 @@ const UserSearchPage_Individual = () => {
                 </Grid>
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12}>
-                    <SearchForm 
-                    applySearch={applySearch}
-                    orgComboData={orgCombo}
-                    issueComboData={issueCombo}
-                    searchCriteria={searchCriteria}
+                    <SearchForm
+                        applySearch={applySearch}
+                        orgComboData={orgCombo}
+                        issueComboData={issueCombo}
+                        searchCriteria={searchCriteria}
                     />
                 </Grid>
                 {/*row 2*/}
                 <Grid item xs={12} md={12} lg={12}>
                     <MainCard elevation={0}
-                            border={false}
-                            content={false}
+                        border={false}
+                        content={false}
+                        sx={{ backgroundColor: 'backgroundColor.default' }}
                     >
                         <EventTable
                             recordList={record}
@@ -122,6 +123,5 @@ const UserSearchPage_Individual = () => {
                 </Grid>
             </Grid>
     );
-};
-
+}
 export default UserSearchPage_Individual;
diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index 50f33d3..e73c819 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -816,7 +816,7 @@ const CustomFormWizard = (props) => {
 
                                     <Grid container>
                                         <Grid item xs={12} md={6} >
-                                            <Stack spacing={1} sx={{ mr: { md: 1 }, mb: { xs: 0.5 } }}>
+                                            <Stack spacing={1} sx={{ mr: { md: 1 } }}>
                                                 <Autocomplete
                                                     disablePortal
                                                     id="idDocType"
diff --git a/src/themes/overrides/Chip.js b/src/themes/overrides/Chip.js
index 9d9a78c..7c4d3c1 100644
--- a/src/themes/overrides/Chip.js
+++ b/src/themes/overrides/Chip.js
@@ -5,6 +5,7 @@ export default function Chip(theme) {
     MuiChip: {
       styleOverrides: {
         root: {
+          fontSize: "1.2rem",
           borderRadius: 4,
           '&:active': {
             boxShadow: 'none'
diff --git a/src/themes/overrides/DataGrid.js b/src/themes/overrides/DataGrid.js
new file mode 100644
index 0000000..e8b7f9b
--- /dev/null
+++ b/src/themes/overrides/DataGrid.js
@@ -0,0 +1,37 @@
+// ==============================|| OVERRIDES - DATAGRID ||============================== //
+
+export default function DataGrid() {
+    const cellFontSize = "1.1rem"
+    const cellFooterFontSize = "1.1rem"
+    const cellHeaderFontSize = "1.1rem"
+
+    const cellFontWeight = 600
+    const cellFooterFontWeight = 600
+    const cellHeaderFontWeight = 600
+
+    return {
+        MuiDataGrid: {
+            styleOverrides: {
+                root: {
+                    // fontSize: "3rem"
+                    '& .MuiDataGrid-cell': {
+                        fontSize: cellFontSize,
+                        fontWeight: cellFontWeight
+                    },
+                    '& .MuiDataGrid-footerContainer': {
+                        fontSize: cellFooterFontSize,
+                        fontWeight: cellFooterFontWeight
+                    },
+                    '& .MuiDataGrid-columnHeader': {
+                        fontSize: cellHeaderFontSize,
+                        fontWeight: cellHeaderFontWeight,
+                    },
+                    button: {
+                        fontSize: cellFontSize,
+                        fontWeight: cellFontWeight
+                    }
+                },
+            }
+        }
+    };
+}
diff --git a/src/themes/overrides/OutlinedInput.js b/src/themes/overrides/OutlinedInput.js
index 7a34b14..f5f0924 100644
--- a/src/themes/overrides/OutlinedInput.js
+++ b/src/themes/overrides/OutlinedInput.js
@@ -14,6 +14,9 @@ export default function OutlinedInput(theme) {
           borderColor: theme.palette.grey[300]
         },
         root: {
+          fontSize: '1.2rem',
+          fontWeight: 600,
+          lineHeight: 1.57,
           '&:hover .MuiOutlinedInput-notchedOutline': {
             borderColor: theme.palette.primary.light
           },
diff --git a/src/themes/overrides/Tab.js b/src/themes/overrides/Tab.js
index 2c41b14..e982023 100644
--- a/src/themes/overrides/Tab.js
+++ b/src/themes/overrides/Tab.js
@@ -6,7 +6,9 @@ export default function Tab(theme) {
       styleOverrides: {
         root: {
           minHeight: 46,
-          color: theme.palette.text.primary
+          color: theme.palette.text.primary,
+          fontSize: "1.2rem",
+          fontWeight: 600
         }
       }
     }
diff --git a/src/themes/overrides/Textfield.js b/src/themes/overrides/Textfield.js
new file mode 100644
index 0000000..0e3425f
--- /dev/null
+++ b/src/themes/overrides/Textfield.js
@@ -0,0 +1,27 @@
+// ==============================|| OVERRIDES - TEXTFIELD ||============================== //
+
+export default function Textfield() {
+
+  const labelFontSize = "1.1rem"
+  const labelFontWeight = 600
+  const inputFontSize = "1.2rem"
+  const inputFontWeight = 600
+  return {
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          "& label": {
+            fontSize: labelFontSize,
+            fontWeight: labelFontWeight,
+          },
+          "& input": {
+            fontSize: inputFontSize,
+            fontWeight: inputFontWeight,
+            padding: "16px",
+            alignItems: "center"
+          }
+        },
+      }
+    }
+  };
+}
diff --git a/src/themes/overrides/index.js b/src/themes/overrides/index.js
index 3db4b76..43864f2 100644
--- a/src/themes/overrides/index.js
+++ b/src/themes/overrides/index.js
@@ -17,6 +17,8 @@ import Tab from './Tab';
 import TableCell from './TableCell';
 import Tabs from './Tabs';
 import Typography from './Typography';
+import Textfield from './Textfield';
+import DataGrid from './DataGrid';
 
 // ==============================|| OVERRIDES - MAIN ||============================== //
 
@@ -27,6 +29,7 @@ export default function ComponentsOverrides(theme) {
     CardContent(),
     Checkbox(theme),
     Chip(theme),
+    DataGrid(),
     IconButton(theme),
     InputLabel(theme),
     LinearProgress(),
@@ -36,6 +39,7 @@ export default function ComponentsOverrides(theme) {
     Tab(theme),
     TableCell(theme),
     Tabs(),
+    Textfield(),
     Typography()
   );
 }
diff --git a/src/themes/typography.js b/src/themes/typography.js
index 3220607..d752223 100644
--- a/src/themes/typography.js
+++ b/src/themes/typography.js
@@ -62,7 +62,7 @@ const Typography = (fontFamily) => ({
     lineHeight: 1.57
   },
   subtitle2: {
-    fontSize: '0.8rem',
+    fontSize: '0.9rem',
     fontWeight: 500,
     lineHeight: 1.66
   },
@@ -84,9 +84,9 @@ const Typography = (fontFamily) => ({
   overline: {
     lineHeight: 1.66
   },
-  button: {
-    textTransform: 'capitalize'
-  }
+  button: { 
+    textTransform: 'capitalize',
+  },
 });
 
 export default Typography;
\ No newline at end of file
diff --git a/src/utils/statusUtils/Base.js b/src/utils/statusUtils/Base.js
index d7791ca..60d03cb 100644
--- a/src/utils/statusUtils/Base.js
+++ b/src/utils/statusUtils/Base.js
@@ -1,6 +1,7 @@
+import { Typography } from "@mui/material"
 
 export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) {
     return (
-        <div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px" }}><b>{text}</b></div>
+        <div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px", margin: "6px 4px 6px 4px" }}><Typography variant="h6">{text}</Typography></div>
     )
 }
\ No newline at end of file