diff --git a/src/components/cards/AuthFooter.js b/src/components/cards/AuthFooter.js
index 304e729..cdd64c2 100644
--- a/src/components/cards/AuthFooter.js
+++ b/src/components/cards/AuthFooter.js
@@ -50,8 +50,9 @@ const AuthFooter = () => {
                       W3C WAI Web Content Accessibility Guidelines 2.0"/>
           </a>
           <a href="https://www.brandhk.gov.hk/zh-hk"
-            title="">
-            <img src={bhkLogo} alt="logo" height="32" width="88" />
+            title="Brand Hong Kong">
+            <img src={bhkLogo} alt="logo" height="32" width="88" 
+            />
           </a>
         </Stack>
     </Container>
diff --git a/src/pages/OrganizationDetailPage/OrganizationCard.js b/src/pages/OrganizationDetailPage/OrganizationCard.js
index 453801a..6523de4 100644
--- a/src/pages/OrganizationDetailPage/OrganizationCard.js
+++ b/src/pages/OrganizationDetailPage/OrganizationCard.js
@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Grid, Button, Checkbox,FormControlLabel
+    Grid, Button, Checkbox, FormControlLabel, Typography
 } from '@mui/material';
 // import { FormControlLabel } from '@material-ui/core';
 import MainCard from "../../components/MainCard";
@@ -129,7 +129,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                             <>
                                 {createMode ?
                                     <>
-                                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                                        <Grid item sx={{ ml: 0, mr: 3 }}>
                                             <Button
                                                 size="large"
                                                 variant="contained"
@@ -144,7 +144,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                                         </Grid>
                                     </> :
                                     <>
-                                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                                        <Grid item sx={{ ml: 0, mr: 3 }}>
                                             <Button
                                                 size="large"
                                                 variant="contained"
@@ -176,7 +176,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                             </>
                             :
                             <>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
+                                <Grid item sx={{ ml: 0, mr: 3 }}>
                                     <Button
                                         size="large"
                                         variant="contained"
@@ -195,11 +195,15 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                 </Grid>
                 {/*top*/}
 
-                {!onReady?
-                <LoadingComponent />
-                :
+                {!onReady ?
+                    <LoadingComponent />
+                    :
                     <Grid container spacing={1}>
-
+                        <Grid item xs={12}>
+                            <Typography variant="h5" sx={{mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                                Organization Details
+                            </Typography>
+                        </Grid>
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
                                 label: FieldUtils.notNullFieldLabel("BR No.:"),
@@ -214,8 +218,8 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                                 control={<Checkbox checked={formik.values.creditor} />}
                                 label="is Creditor"
                                 name="creditor"
-                                onChange={()=>{
-                                    formik.setFieldValue("creditor",!formik.values.creditor);
+                                onChange={() => {
+                                    formik.setFieldValue("creditor", !formik.values.creditor);
                                 }}
                                 disabled={!editMode && !createMode}
                             />
@@ -233,84 +237,84 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getTextField({
-                            label: "Name (Ch):",
-                            valueName: "chCompanyName",
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getTextField({
+                                label: "Name (Ch):",
+                                valueName: "chCompanyName",
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getDateField({
-                            label: FieldUtils.notNullFieldLabel("Expiry Date:"),
-                            valueName: "brExpiryDate",
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getDateField({
+                                label: FieldUtils.notNullFieldLabel("Expiry Date:"),
+                                valueName: "brExpiryDate",
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getTextField({
-                            label: FieldUtils.notNullFieldLabel("Contact Person:"),
-                            valueName: "contactPerson",
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getTextField({
+                                label: FieldUtils.notNullFieldLabel("Contact Person:"),
+                                valueName: "contactPerson",
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getPhoneField({
-                            label: FieldUtils.notNullFieldLabel("Contact Tel:"),
-                            valueName: {
-                                code: "tel_countryCode",
-                                num: "phoneNumber"
-                            },
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getPhoneField({
+                                label: FieldUtils.notNullFieldLabel("Contact Tel:"),
+                                valueName: {
+                                    code: "tel_countryCode",
+                                    num: "phoneNumber"
+                                },
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getPhoneField({
-                            label: "Fax No:",
-                            valueName: {
-                                code: "fax_countryCode",
-                                num: "faxNumber"
-                            },
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getPhoneField({
+                                label: "Fax No:",
+                                valueName: {
+                                    code: "fax_countryCode",
+                                    num: "faxNumber"
+                                },
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getComboField({
-                            label: FieldUtils.notNullFieldLabel("Country:"),
-                            valueName: "country",
-                            disabled: (!editMode && !createMode),
-                            dataList: ComboData.country,
-                            form: formik
-                        })}
+                            {FieldUtils.getComboField({
+                                label: FieldUtils.notNullFieldLabel("Country:"),
+                                valueName: "country",
+                                disabled: (!editMode && !createMode),
+                                dataList: ComboData.country,
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getComboField({
-                            label: FieldUtils.notNullFieldLabel("District:"),
-                            valueName: "district",
-                            disabled: (!editMode && !createMode),
-                            dataList: ComboData.district,
-                            form: formik
-                        })}
+                            {FieldUtils.getComboField({
+                                label: FieldUtils.notNullFieldLabel("District:"),
+                                valueName: "district",
+                                disabled: (!editMode && !createMode),
+                                dataList: ComboData.district,
+                                form: formik
+                            })}
                         </Grid>
 
 
                         <Grid item lg={4} >
-                        {FieldUtils.getAddressField({
-                            label: FieldUtils.notNullFieldLabel("Address:"),
-                            valueName: ["addressLine1", "addressLine2", "addressLine3"],
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getAddressField({
+                                label: FieldUtils.notNullFieldLabel("Address:"),
+                                valueName: ["addressLine1", "addressLine2", "addressLine3"],
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={12} ></Grid>
diff --git a/src/pages/OrganizationDetailPage/index.js b/src/pages/OrganizationDetailPage/index.js
index c7bb3b8..2cb7baf 100644
--- a/src/pages/OrganizationDetailPage/index.js
+++ b/src/pages/OrganizationDetailPage/index.js
@@ -1,9 +1,9 @@
 // material-ui
-import {Grid, Typography} from '@mui/material';
-import {useEffect, useState} from "react";
+import { Grid, Typography, Stack, Box, Button } from '@mui/material';
+import { useEffect, useState } from "react";
 import * as React from "react";
 import * as HttpUtils from "../../utils/HttpUtils";
-import {useParams} from "react-router-dom";
+import { useParams } from "react-router-dom";
 import * as UrlUtils from "../../utils/ApiPathConst";
 import * as DateUtils from "../../utils/DateUtils";
 
@@ -11,41 +11,53 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const InfoCard = Loadable(lazy(() => import('./OrganizationCard')));
 const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
-
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import { useNavigate } from 'react-router-dom';
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const OrganizationDetailPage = () => {
     const params = useParams();
-    const [formData, setFormData]  = useState({})
+    const [formData, setFormData] = useState({})
     const [isLoading, setLoding] = useState(true);
+    const navigate = useNavigate();
 
-
-    useEffect(()=>{
+    useEffect(() => {
         console.log(formData);
         loadData();
-    },[]);
+    }, []);
 
-    const loadData = ()=>{
+    const loadData = () => {
         setLoding(true);
-        if(params.id>0){        
+        if (params.id > 0) {
             HttpUtils.get({
-                url: UrlUtils.GET_ORG_PATH+"/"+params.id,
-                onSuccess: function(response){
+                url: UrlUtils.GET_ORG_PATH + "/" + params.id,
+                onSuccess: function (response) {
                     response.data["country"] = response.data.addressTemp?.country;
                     response.data["district"] = response.data.addressTemp?.district;
                     response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
                     response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
                     response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
-                    
+
                     response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
                     response.data["tel_countryCode"] = response.data.contactTel?.countryCode;
 
                     response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                     response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
 
-                    response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate): "";
+                    response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
                     setFormData(response.data)
                 }
             });
@@ -54,28 +66,40 @@ const OrganizationDetailPage = () => {
 
 
     useEffect(() => {
-       setLoding(false);
+        setLoding(false);
     }, [formData]);
 
     return (
         isLoading ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5" >Organization Details</Typography>
+            <Grid container>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">Maintain Organization</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                <Grid item xs={12}>
+                    <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/org") }}>
+                        <KeyboardBackspaceOutlinedIcon />
+                        <Typography variant="h4">Back</Typography>
+                    </Button>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <InfoCard
-                                userData={formData}
-                                loadDataFun={loadData}
-                                id={params.id}
-                            />
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <InfoCard
+                                    userData={formData}
+                                    loadDataFun={loadData}
+                                    id={params.id}
+                                />
+                            </Box>
+                            <br />
                         </Grid>
-
                     </Grid>
                 </Grid>
                 {/*col 2*/}
diff --git a/src/pages/OrganizationSearchPage/index.js b/src/pages/OrganizationSearchPage/index.js
index dc4a221..a68e5be 100644
--- a/src/pages/OrganizationSearchPage/index.js
+++ b/src/pages/OrganizationSearchPage/index.js
@@ -1,10 +1,10 @@
 // material-ui
 import {
-    Grid, Typography
+    Grid, Typography, Stack
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import * as UrlUtils from "../../utils/ApiPathConst";
 import * as React from "react";
 import * as HttpUtils from "../../utils/HttpUtils";
@@ -17,12 +17,22 @@ import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./OrganizationSearchForm')));
 const EventTable = Loadable(lazy(() => import('./OrganizationTable')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize:'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const OrganizationSearchPage = () => {
 
-    const [record,setRecord] = useState([]);
+    const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
 
@@ -38,11 +48,11 @@ const OrganizationSearchPage = () => {
         getUserList();
     }, [searchCriteria]);
 
-    function getUserList(){
+    function getUserList() {
         HttpUtils.get({
             url: UrlUtils.GET_ORG_PATH,
             params: searchCriteria,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 setRecord(responseData);
             }
         });
@@ -54,29 +64,32 @@ const OrganizationSearchPage = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-            <Grid item xs={12} sx={{mb: -2.25}}>
-                <Typography variant="h5">View Organization</Typography>
+            <Grid container>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">View Organization</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm applySearch={applySearch} />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                        border={false}
+                        content={false}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
             </Grid>
-
-            {/*row 1*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <SearchForm applySearch={applySearch}/>
-            </Grid>
-            {/*row 2*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <MainCard elevation={0}
-                          border={false}
-                          content={false}
-                >
-                    <EventTable
-                        recordList={record}
-                    />
-                </MainCard>
-            </Grid>
-        </Grid>
     );
 };
 
diff --git a/src/pages/Payment/FPS/AckPage.js b/src/pages/Payment/FPS/AckPage.js
new file mode 100644
index 0000000..a85961b
--- /dev/null
+++ b/src/pages/Payment/FPS/AckPage.js
@@ -0,0 +1,223 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack,
+    // Button,
+    FormLabel,
+} from '@mui/material';
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+// import { useNavigate } from "react-router-dom";
+// import FpsIcon from "assets/images/icons/fps.svg";
+import { useLocation } from 'react-router-dom';
+import {paymentPath} from "auth/utils";
+// import {poll} from "utils/Utils";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const AckPage = () => {
+    // const navigate = useNavigate()
+    const location = useLocation();
+
+    const [paymentData, setPaymentData] = React.useState({});
+    const [transactionData, setTransactionData] = React.useState({});
+    const [transactionDate, setTransactionDate] = React.useState("");
+    const [transactionTime, setTransactionTime] = React.useState("");
+    const [onReady, setOnReady] = React.useState(false);
+    const paymentStatusApi = "/api/payment/status/";
+    const [paymentid, setPaymentid] = React.useState("");
+
+    React.useEffect(() => {
+       
+        if(location.state != undefined){
+            console.log(location.state)
+            setPaymentData(location.state)
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if(Object.keys(transactionData).length > 0 ){
+            setOnReady(true);
+        }
+    }, [transactionData]);
+
+    React.useEffect(() => {
+        if (Object.keys(paymentData).length > 0){
+            const dateTime = paymentData.transactionDateTime;
+            const date = new Date(dateTime);
+            const trnDate = date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear();
+            const trnTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
+            setTransactionDate(trnDate)
+            setTransactionTime(trnTime)
+            setPaymentid(paymentData.paymentid)
+        }
+        // setTransactionData(
+        //     {
+        //         "amount": 999.99,
+        //         "currencycode": "HKD",
+        //         "paymentdetail": {
+        //             "attemptno": 1,
+        //             "channel": "MobileWallet",
+        //             "paymentid": "C202310268000681",
+        //             "paymentmethod": "04",
+        //             "result": {
+        //                 "canretry": "Y",
+        //                 "description": "CANC - Cancelled by user or Payment Server.",
+        //                 "paymentstatuscode": "CANC",
+        //                 "rejectreasoncode": "Payment Cancelled. [PAY-E-9022]"
+        //             },
+        //             "subtype": "FPS",
+        //             "time": "2023-10-26T09:02:17Z[UTC]"
+        //         },
+        //         "transactionid": "20231026170103921"
+        //     }
+        // )
+        HttpUtils.post({
+            url: paymentPath+paymentStatusApi+paymentid,
+            params:{
+                "apprefid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,   
+            },
+            onSuccess: function(responseData){
+                setTransactionData(responseData)
+            }
+        });
+    }, [paymentData]);
+
+    return (
+        !onReady ?
+            <LoadingComponent />
+            :
+            (
+                <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                    <Grid item xs={12} width="100%">
+                        <div style={BackgroundHead} width="100%">
+                            <Stack direction="row" height='70px'>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：FPS付款</Typography>
+                            </Stack>
+                        </div>
+                    </Grid>
+                    {/*row 1*/}
+                    <Grid item xs={12} md={12} >
+                        <Grid container justifyContent="flex-start" alignItems="center" >
+                            <center>
+                                <Grid item xs={12} md={12} >
+
+                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                    Your application and payment have been received
+                                    </Typography>
+
+                                    <Grid container>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                    Transaction Reference No:
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                Transaction Date:
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                {transactionDate+" (DD/MM/YYYY)"}
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                Transaction Time:
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                {transactionTime+" (HH:MI:SS)"}
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                EGIS Reference No:
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                {transactionData.transactionid}
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                Payment Amount
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                {"HK$ "+transactionData.amount}
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                Payment Method:
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                {transactionData.paymentdetail.subtype}
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                            </center>
+                        </Grid>
+                    </Grid>
+                    {/*row 2*/}
+                </Grid >
+            )
+
+
+    );
+};
+
+export default AckPage;
diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js
index 7c86069..213f577 100644
--- a/src/pages/Payment/FPS/FPS.js
+++ b/src/pages/Payment/FPS/FPS.js
@@ -38,13 +38,13 @@ const Index = () => {
     const [paymentid, setPaymentid] = React.useState("");
     const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState("");
     const [fpsqrcodeimgbase64, setFpsqrcodeimgbase64] = React.useState("");
-    // const [paymentstatuscode, setPaymentstatuscode] = React.useState("");
+    const [paymentstatuscode, setPaymentstatuscode] = React.useState("");
     // const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");
     // const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD
     // const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing
-    // const loadPaymentUrl = "/api/payment/wallet/fps";
+    const loadPaymentUrl = "/api/payment/wallet/fps";
     const cancelPaymentUrl = "/api/payment/cancelpayment";
-    // const paymentStatusApi = "/api/payment/status/";
+    const paymentStatusApi = "/api/payment/status/";
     // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";
     // const receiverUrl = "/noti-api/payment/payment-notification";
     
@@ -56,13 +56,8 @@ const Index = () => {
         setFpsqrcodeimgbase64("")
         if(location.state != undefined){
             setPaymentData(location.state)
+            loadForm();
         }
-        loadForm();
-        currentTimer.current = setInterval(() => {
-            getPaymentStatus();
-            setTime((prevTime) => prevTime + 1);
-        }, 500);
-        return () => clearInterval(currentTimer.current);
     }, []);
 
     React.useEffect(() => {
@@ -71,85 +66,106 @@ const Index = () => {
 
 
     const loadForm = () => {
-        const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
-        const convertedDateString = timeoutdatetime.replace("[UTC]", "");
-        setFpsmerchanttimeoutdatetime(convertedDateString)
-        setPaymentid("C202310268000681")
-        
-        // HttpUtils.post({
-        //     url: paymentPath+loadPaymentUrl,
-        //     params:{
-        //         "transactionid": paymentData.transactionid,
-        //         "webtoken": paymentData.webtoken,
-        //         "paymentmethod":"04,BCFP,FPS",
-        //         "order": { 
-        //             "totalamount":paymentData.amount,
-        //             "currency":"HKD",
-        //             "orderdetail": 
-        //             [ 
-        //                 { 
-        //                     "itemid": "1",
-        //                     "qty":"1",
-        //                     "unitprice":paymentData.amount,
-        //                     "amount":paymentData.amount
-        //                 },
-        //             ]
-        //         },
-        //         // "locale":"<locale>",
-        //         // "eserviceid":"<eserviceid>"
-        //     },
-        //     onSuccess: function(responseData){
-        //         /*
-        //             {
-        //                 "paymentid": "<paymentid>",
-        //                 "paymentstatus": "<paymentstatus>",
-        //                 "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
-        //                 "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
-        //                 "fpsqrcodeurl": "<fpsqrcodeurl>"
-        //             }
-        //         */
-        //        setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
-        //        setPaymentid(responseData.paymentid);
-        //        setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime);
-        //        setPaymentstatuscode(responseData.paymentstatuscode);
-        //     //    const parsedUrl = new URL(responseData.fpsqrcodeurl);
-        //     //    const fpsqrcodeurl = parsedUrl.pathname;
-        //     //    const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback='
-        //     //                     + encodeURIComponent(paymentPath + payment.config.fpscallbackPage);
-        //     //    setFpsqrcodeurl(openPASGUrl)
-        //     }
-        // });
+        // const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
+        // const convertedDateString = timeoutdatetime.replace("[UTC]", "");
+        // setFpsmerchanttimeoutdatetime(convertedDateString)
+        // setPaymentid("C202310268000681")
+        // setPaymentstatuscode("APPR")
+        HttpUtils.post({
+            url: paymentPath+loadPaymentUrl,
+            params:{
+                "transactionid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,
+                "paymentmethod":"04,BCFP,FPS",
+                "order": { 
+                    "totalamount":paymentData.amount,
+                    "currency":"HKD",
+                    "orderdetail": 
+                    [ 
+                        { 
+                            "itemid": "1",
+                            "qty":"1",
+                            "unitprice":paymentData.amount,
+                            "amount":paymentData.amount
+                        },
+                    ]
+                },
+                // "locale":"<locale>",
+                // "eserviceid":"<eserviceid>"
+            },
+            onSuccess: function(responseData){
+                /*
+                    {
+                        "paymentid": "<paymentid>",
+                        "paymentstatus": "<paymentstatus>",
+                        "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
+                        "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
+                        "fpsqrcodeurl": "<fpsqrcodeurl>"
+                    }
+                */
+               setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
+               setPaymentid(responseData.paymentid);
+
+               const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime
+               const convertedDateString = timeoutdatetime.replace("[UTC]", "");
+               setFpsmerchanttimeoutdatetime(convertedDateString)
+               
+               setPaymentstatuscode(responseData.paymentstatuscode);
+            //    const parsedUrl = new URL(responseData.fpsqrcodeurl);
+            //    const fpsqrcodeurl = parsedUrl.pathname;
+            //    const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback='
+            //                     + encodeURIComponent(paymentPath + payment.config.fpscallbackPage);
+            //    setFpsqrcodeurl(openPASGUrl)
+            }
+        });
+        currentTimer.current = setInterval(() => {
+            setTime((prevTime) => prevTime + 1);
+        }, 1000);
+        return () => clearInterval(currentTimer.current);
     }
 
     const getPaymentStatus = () => {
-        
-        // HttpUtils.post({
-        //     url: paymentPath+paymentStatusApi+paymentid,
-        //     params:{
-        //         "apprefid": paymentData.transactionid,
-        //         "webtoken": paymentData.webtoken,   
-        //     },
-        //     onSuccess: function(responseData){
-        //         const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;
-        //         if (paymentstatuscode === 'APPR') {
-        //             const timestamp = '?t=' + Date.now();
-        //             window.top.location.href = paymentPath + payment.config.ackPagePath + timestamp;
-        //         } else if (paymentstatuscode === 'CANC') {
-        //             window.top.location.href = paymentPath + payment.config.indexPagePath;
-        //         } else {
-        //             window.top.location.href = paymentPath + payment.config.errPagePath;
-        //         }
-        //     },
-        //     onError: function(){
-        //         cancelPayment()
-        //         clearInterval(currentTimer.current);
+        console.log(paymentstatuscode)
+        // if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){
+        //     if (paymentstatuscode === 'APPR') {
+        //         const timestamp = Date.now();
+        //         navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:"",webtoken:"", paymentid:paymentid} });
+        //     } else if (paymentstatuscode === 'CANC') {
+        //         navigate('/payment');
+        //     } else {
+        //         alert("error")
         //     }
-        // });
+        // }
+        
+        HttpUtils.post({
+            url: paymentPath+paymentStatusApi+paymentid,
+            params:{
+                "apprefid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,   
+            },
+            onSuccess: function(responseData){
+                const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;
+                if (paymentstatuscode === 'APPR') {
+                    const timestamp = Date.now();
+                    navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:"",webtoken:"", paymentid:paymentid} });
+                } else if (paymentstatuscode === 'CANC') {
+                    window.top.location.href = paymentPath + payment.config.indexPagePath;
+                } else {
+                    window.top.location.href = paymentPath + payment.config.errPagePath;
+                }
+            },
+            onError: function(){
+                cancelPayment()
+                clearInterval(currentTimer.current);
+            }
+        });
     };
     
     React.useEffect(() => {
         const timeOutDate = new Date(fpsmerchanttimeoutdatetime);
         const currentTime = new Date;
+        console.log(time)
+        getPaymentStatus();
         if (timeOutDate.getTime()<currentTime.getTime()){
             console.log("stop");
             clearInterval(currentTimer.current);
@@ -170,35 +186,6 @@ const Index = () => {
         });       
     }
 
-    // const getPayload = ()=>{
-    //     HttpUtils.get({
-    //         url: payloadUrl+"<paymenttoken>",
-    //         onSuccess: function(responseData){
-    //     /* 
-    //         {
-    //             "payload": "<payload>"
-    //         }
-
-    //     */
-    //         }
-    //     });       
-    // }
-
-    // const getReceiver = ()=>{
-    //     HttpUtils.get({
-    //         url: receiverUrl+"<paymenttoken>",
-    //         onSuccess: function(responseData){
-    //     /* 
-    //         {
-    //             "payload": "<payload>"
-    //         }
-
-    //     */
-    //         }
-    //     });       
-    // }
-
-
     return (
         !onReady ?
             <LoadingComponent />
diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js
index 0dc56ad..1b55fba 100644
--- a/src/pages/Payment/index.js
+++ b/src/pages/Payment/index.js
@@ -90,187 +90,187 @@ const Index = () => {
     }, [confirmPayment]);
     
     const getAvailablePayment = () => {
-        const responseData = {
-            "availablepaymentmethods": [
-                {
-                    "active": "Y",
-                    "code": "04,BCFP,FPS",
-                    "pointstonote": [
-                        {
-                            "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
-                            "order": 10,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
-                            "order": 11,
-                            "type": "INFO"
-                        }
-                    ],
-                    "subtype": "FPS"
-                },
-                {
-                    "active": "Y",
-                    "code": "02,BCMP,CreditCard",
-                    "pointstonote": [
-                        {
-                            "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
-                            "order": 10,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
-                            "order": 11,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Merchant Name is applicable to credit card payment method only.",
-                            "order": 40,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Under exceptional conditions, a refund may need to be arranged.  If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
-                            "order": 41,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
-                            "order": 42,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
-                            "order": 43,
-                            "type": "INFO"
-                        }
-                    ],
-                    "subtype": "CreditCard",
-                    "supportedcard": [
-                        "JCB",
-                        "MasterCard",
-                        "Visa"
-                    ]
-                },
-                {
-                    "active": "Y",
-                    "code": "03,BCMP,CreditCard",
-                    "pointstonote": [
-                        {
-                            "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
-                            "order": 10,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
-                            "order": 11,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Merchant Name is applicable to credit card payment method only.",
-                            "order": 40,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Under exceptional conditions, a refund may need to be arranged.  If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
-                            "order": 41,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
-                            "order": 42,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
-                            "order": 43,
-                            "type": "INFO"
-                        }
-                    ],
-                    "subtype": "CreditCard",
-                    "supportedcard": [
-                        "UnionPay"
-                    ]
-                },
-                {
-                    "active": "Y",
-                    "code": "01,PPSB,PPS",
-                    "pointstonote": [
-                        {
-                            "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
-                            "order": 10,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
-                            "order": 11,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "PPS Shop&Buy (PPS) does not support payment via browsers of mobile devices (including mobile phones and tablets) at the moment. If you wish to pay by PPS, please change to use desktop computer. ",
-                            "order": 21,
-                            "type": "INFO"
-                        }
-                    ],
-                    "subtype": "PPS"
-                }
-            ]
-        };
-        let availableMethods = responseData.availablepaymentmethods;
-        setAvailableMethods(availableMethods);
-        if (availableMethods.length>0){
-            availableMethods.forEach((method)=>{
-                if(method.subtype === "FPS" ){
-                    setFPSStatus(method)
-                }else if (method.subtype === "CreditCard"){
-                    method.supportedcard.forEach((supportedcard)=>{
-                        if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
-                            setCreditCardStatus(method)
-                        } else {
-                            if (supportedcard === "UnionPay"){
-                                setUnionPayStatus(method)
-                            }
-                        }
-                    })
-                }else if (method.subtype === "PPS" ){
-                    setPPSStatus(method)
-                }
-            });
-        }
-
-        // HttpUtils.post({
-        //     url: paymentPath+getAvailablePaymentUrl,
-        //     params: {
-        //         // "locale": local.zh,;
-        //         "amount": totalAmount,
-        //         // "eserviceids": [
-        //         //     "<eserviceid>", "<eserviceid>"
-        //         // ],
-        //         "preferpaymentmethods": preferpaymentmethods
-        //     },
-        //     onSuccess: (responseData)=>{
-        //         let availableMethods = responseData.availablepaymentmethods;
-        //         setAvailableMethods(availableMethods);
-        //         if (availableMethods.length>0){
-        //             availableMethods.forEach((method)=>{
-        //                 if(method.subtype === "FPS" ){
-        //                     setFPSStatus(method)
-        //                 }else if (method.subtype === "CreditCard"){
-        //                     method.supportedcard.forEach((supportedcard)=>{
-        //                         if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
-        //                             setCreditCardStatus(method)
-        //                         } else {
-        //                             if (supportedcard === "UnionPay"){
-        //                                 setUnionPayStatus(method)
-        //                             }
-        //                         }
-        //                     })
-        //                 }else if (method.subtype === "PPS" ){
-        //                     setPPSStatus(method)
+        // const responseData = {
+        //     "availablepaymentmethods": [
+        //         {
+        //             "active": "Y",
+        //             "code": "04,BCFP,FPS",
+        //             "pointstonote": [
+        //                 {
+        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
+        //                     "order": 10,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
+        //                     "order": 11,
+        //                     "type": "INFO"
+        //                 }
+        //             ],
+        //             "subtype": "FPS"
+        //         },
+        //         {
+        //             "active": "Y",
+        //             "code": "02,BCMP,CreditCard",
+        //             "pointstonote": [
+        //                 {
+        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
+        //                     "order": 10,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
+        //                     "order": 11,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Merchant Name is applicable to credit card payment method only.",
+        //                     "order": 40,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Under exceptional conditions, a refund may need to be arranged.  If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
+        //                     "order": 41,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
+        //                     "order": 42,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
+        //                     "order": 43,
+        //                     "type": "INFO"
         //                 }
-        //             });
+        //             ],
+        //             "subtype": "CreditCard",
+        //             "supportedcard": [
+        //                 "JCB",
+        //                 "MasterCard",
+        //                 "Visa"
+        //             ]
+        //         },
+        //         {
+        //             "active": "Y",
+        //             "code": "03,BCMP,CreditCard",
+        //             "pointstonote": [
+        //                 {
+        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
+        //                     "order": 10,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
+        //                     "order": 11,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Merchant Name is applicable to credit card payment method only.",
+        //                     "order": 40,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Under exceptional conditions, a refund may need to be arranged.  If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
+        //                     "order": 41,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
+        //                     "order": 42,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
+        //                     "order": 43,
+        //                     "type": "INFO"
+        //                 }
+        //             ],
+        //             "subtype": "CreditCard",
+        //             "supportedcard": [
+        //                 "UnionPay"
+        //             ]
+        //         },
+        //         {
+        //             "active": "Y",
+        //             "code": "01,PPSB,PPS",
+        //             "pointstonote": [
+        //                 {
+        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
+        //                     "order": 10,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
+        //                     "order": 11,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "PPS Shop&Buy (PPS) does not support payment via browsers of mobile devices (including mobile phones and tablets) at the moment. If you wish to pay by PPS, please change to use desktop computer. ",
+        //                     "order": 21,
+        //                     "type": "INFO"
+        //                 }
+        //             ],
+        //             "subtype": "PPS"
         //         }
-        //     }
-        // });
+        //     ]
+        // };
+        // let availableMethods = responseData.availablepaymentmethods;
+        // setAvailableMethods(availableMethods);
+        // if (availableMethods.length>0){
+        //     availableMethods.forEach((method)=>{
+        //         if(method.subtype === "FPS" ){
+        //             setFPSStatus(method)
+        //         }else if (method.subtype === "CreditCard"){
+        //             method.supportedcard.forEach((supportedcard)=>{
+        //                 if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
+        //                     setCreditCardStatus(method)
+        //                 } else {
+        //                     if (supportedcard === "UnionPay"){
+        //                         setUnionPayStatus(method)
+        //                     }
+        //                 }
+        //             })
+        //         }else if (method.subtype === "PPS" ){
+        //             setPPSStatus(method)
+        //         }
+        //     });
+        // }
+
+        HttpUtils.post({
+            url: paymentPath+getAvailablePaymentUrl,
+            params: {
+                // "locale": local.zh,;
+                "amount": totalAmount,
+                // "eserviceids": [
+                //     "<eserviceid>", "<eserviceid>"
+                // ],
+                "preferpaymentmethods": preferpaymentmethods
+            },
+            onSuccess: (responseData)=>{
+                let availableMethods = responseData.availablepaymentmethods;
+                setAvailableMethods(availableMethods);
+                if (availableMethods.length>0){
+                    availableMethods.forEach((method)=>{
+                        if(method.subtype === "FPS" ){
+                            setFPSStatus(method)
+                        }else if (method.subtype === "CreditCard"){
+                            method.supportedcard.forEach((supportedcard)=>{
+                                if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
+                                    setCreditCardStatus(method)
+                                } else {
+                                    if (supportedcard === "UnionPay"){
+                                        setUnionPayStatus(method)
+                                    }
+                                }
+                            })
+                        }else if (method.subtype === "PPS" ){
+                            setPPSStatus(method)
+                        }
+                    });
+                }
+            }
+        });
     }
 
     const getTransactionId = () => {
diff --git a/src/pages/Proof/Create_FromApp/ApplicationDetails.js b/src/pages/Proof/Create_FromApp/ApplicationDetails.js
index f91d8f4..cbedec8 100644
--- a/src/pages/Proof/Create_FromApp/ApplicationDetails.js
+++ b/src/pages/Proof/Create_FromApp/ApplicationDetails.js
@@ -5,6 +5,7 @@ import {
     Stack,
     TextField,
     FormLabel,
+    Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -12,12 +13,12 @@ import { useFormik } from 'formik';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = ({formData}) => {
+const SearchPublicNoticeForm = ({ formData }) => {
 
     const [data, setData] = React.useState({});
 
     React.useEffect(() => {
-        if(formData)
+        if (formData)
             setData(formData);
     }, [formData]);
 
@@ -58,7 +59,9 @@ const SearchPublicNoticeForm = ({formData}) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Application Details
+                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                            Application Details
+                        </Typography>
                     </Grid>
                 </CardContent>
 
diff --git a/src/pages/Proof/Create_FromApp/GazetteDetails.js b/src/pages/Proof/Create_FromApp/GazetteDetails.js
index 118b626..dafbbf7 100644
--- a/src/pages/Proof/Create_FromApp/GazetteDetails.js
+++ b/src/pages/Proof/Create_FromApp/GazetteDetails.js
@@ -4,6 +4,7 @@ import {
     CardContent,
     FormLabel,
     TextField,
+    Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -60,7 +61,9 @@ const GazetteDetails = ({ formData }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Gazette Details
+                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                            Gazette Details
+                        </Typography>
                     </Grid>
                 </CardContent>
 
diff --git a/src/pages/Proof/Create_FromApp/ProofForm.js b/src/pages/Proof/Create_FromApp/ProofForm.js
index 437481f..fe51f41 100644
--- a/src/pages/Proof/Create_FromApp/ProofForm.js
+++ b/src/pages/Proof/Create_FromApp/ProofForm.js
@@ -162,7 +162,9 @@ const FormPanel = ({ formData }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Proof
+                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                            Proof
+                        </Typography>
                     </Grid>
                 </CardContent>
 
diff --git a/src/pages/Proof/Create_FromApp/index.js b/src/pages/Proof/Create_FromApp/index.js
index 94deb29..c04f89f 100644
--- a/src/pages/Proof/Create_FromApp/index.js
+++ b/src/pages/Proof/Create_FromApp/index.js
@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Grid,
+    Grid, Box, Stack, Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as UrlUtils from "utils/ApiPathConst";
@@ -14,7 +14,17 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails')));
 const GazetteDetails = Loadable(React.lazy(() => import('./GazetteDetails')));
 const ProofForm = Loadable(React.lazy(() => import('./ProofForm')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize:'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
@@ -44,7 +54,7 @@ const Index = () => {
                     responseData.data["faxNumber"] = JSON.parse(responseData.data.contactFaxNo).faxNumber;
                     responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode;
 
-                    responseData.data["issueNoStr"] = responseData.data.issueVolume+"/"+responseData.data.issueYear+" No. "+responseData.data.issueNo
+                    responseData.data["issueNoStr"] = responseData.data.issueVolume + "/" + responseData.data.issueYear + " No. " + responseData.data.issueNo
                     responseData.data["issueDate"] = DateUtils.dateStr(responseData.data.issueDate);
 
                     responseData.data["groupType"] = responseData.data.groupNo.charAt(0);
@@ -58,44 +68,66 @@ const Index = () => {
         !onReady ?
             <LoadingComponent />
             :
+
             <Grid container sx={{ minHeight: '85vh', backgroundColor: '#eee' }} direction="column" spacing={1} >
-                {/*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}>
-                            <ApplicationDetails
-                                formData={record}
-                                style={{
-                                    display: "flex",
-                                    height: "100%",
-                                    flex: 1
-                                }}
-                            />
+                <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>
+                    {/*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' }}>
+                                    <ApplicationDetails
+                                        formData={record}
+                                        style={{
+                                            display: "flex",
+                                            height: "100%",
+                                            flex: 1
+                                        }}
+                                    />
+                                </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' }}>
+                                    <GazetteDetails
+                                        formData={record}
+                                        style={{
+                                            display: "flex",
+                                            height: "100%",
+                                            flex: 1
+                                        }}
+                                    />
+                                </Box>
+                            </Grid>
                         </Grid>
-                        <Grid item xs={12} md={12} lg={4} >
-                            <GazetteDetails
+                    </Grid>
+                    {/*row 2*/}
+                    <Grid item xs={12} md={12} lg={12}>
+                        <MainCard elevation={0}
+                            border={false}
+                            content={false}
+                        >
+                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+
+                            <ProofForm
                                 formData={record}
-                                style={{
-                                    display: "flex",
-                                    height: "100%",
-                                    flex: 1
-                                }}
                             />
-                        </Grid>
+                            </Box>
+                            <br/>
+                        </MainCard>
                     </Grid>
-                </Grid>
-                {/*row 2*/}
-                <Grid item xs={12} md={12} lg={12}>
-                    <MainCard elevation={0}
-                        border={false}
-                        content={false}
-                    >
-                        <ProofForm
-                            formData={record}
-                        />
-                    </MainCard>
-                </Grid>
+                </MainCard>
             </Grid>
+
     );
 };
 
diff --git a/src/pages/Proof/Reply_GLD/ApplicationDetails.js b/src/pages/Proof/Reply_GLD/ApplicationDetails.js
index 73c5830..6e1c1c2 100644
--- a/src/pages/Proof/Reply_GLD/ApplicationDetails.js
+++ b/src/pages/Proof/Reply_GLD/ApplicationDetails.js
@@ -16,7 +16,7 @@ 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, }) => {
+const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
 
     const params = useParams();
 
@@ -63,10 +63,14 @@ const ApplicationDetailCard = ({ formData, }) => {
             minimumFractionDigits: 2
         });
     }
-
+    
+    React.useEffect(()=>{
+        if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 2}px`)
+    },[document.getElementById("applicationDetailsMainCard")])
 
     return (
-        <MainCard elevation={0}
+        <MainCard
+            id={"applicationDetailsMainCard"}
             border={false}
             content={false}
         >
diff --git a/src/pages/Proof/Reply_GLD/index.js b/src/pages/Proof/Reply_GLD/index.js
index 7c08a54..5106a94 100644
--- a/src/pages/Proof/Reply_GLD/index.js
+++ b/src/pages/Proof/Reply_GLD/index.js
@@ -3,7 +3,8 @@ import {
     Grid,
     Typography,
     Stack,
-    Box
+    Box,
+    Button
 } from '@mui/material';
 import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
@@ -11,6 +12,7 @@ import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
 
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
@@ -36,11 +38,11 @@ const Index = () => {
     const [record, setRecord] = React.useState();
     const [onReady, setOnReady] = React.useState(false);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         loadForm();
     }, []);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         setOnReady(true);
     }, [record]);
 
@@ -80,6 +82,26 @@ const Index = () => {
         return Array(+(zero > 0 && zero)).join("0") + num;
     }
 
+    // calculate back button position
+
+    // const applicationDetailsRef = React.useCallback(node => {
+    //     if (node === null) {
+    //         return
+    //     } else {
+    //         setBackButtonLeftPos(`${node.getBoundingClientRect()?.left}px`)
+    //     }
+    // })
+
+    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])
+
+    // React.useEffect(()=>{
+    //     if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonLeftPos}`
+    // }, [backButtonLeftPos])
 
     return (
         !onReady ?
@@ -94,13 +116,20 @@ const Index = () => {
                                 </Stack>
                             </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")}}>
+                                <KeyboardBackspaceOutlinedIcon/>
+                                <Typography variant="h4">Back</Typography>
+                            </Button>
+                        </Grid>
                         {/*row 1*/}
                         <Grid item xs={12} md={12} >
                             <Grid container justifyContent="flex-start" alignItems="center" >
                                 <center>
                                     <Grid item xs={12} md={12} sx={{ pt: 2 }}>
-                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
+                                        <Box  xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
                                             <ApplicationDetails
+                                                setBackButtonPos={setBackButtonPos}
                                                 formData={record}
                                                 style={{
                                                     display: "flex",
diff --git a/src/pages/PublicNotice/Details_GLD/index.js b/src/pages/PublicNotice/Details_GLD/index.js
index 73a74ee..64211ab 100644
--- a/src/pages/PublicNotice/Details_GLD/index.js
+++ b/src/pages/PublicNotice/Details_GLD/index.js
@@ -8,7 +8,8 @@ import {
   Grid,
   Typography,
   Stack,
-  Box
+  Box,
+  Button
 } from '@mui/material';
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -36,13 +37,14 @@ import {
 const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog')));
 import * as DateUtils from "utils/DateUtils";
 import { notifyActionSuccess, notifySaveSuccess } from "utils/CommonFunction";
-
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import { useNavigate } from "react-router-dom";
 
 // ==============================|| Body - DEFAULT ||============================== //
 
 const PublicNoticeDetail_GLD = () => {
   const params = useParams();
-  // const navigate = useNavigate()
+  const navigate = useNavigate()
   const [applicationDetailData, setApplicationDetailData] = useState({});
   const [proofList, setProofList] = useState([]);
   // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});
@@ -319,6 +321,12 @@ const PublicNoticeDetail_GLD = () => {
           </Stack>
         </div>
       </Grid>
+      <Grid item xs={12}>
+          <Button sx={{ml:3.5, mt:2}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/application/search")}}>
+            <KeyboardBackspaceOutlinedIcon/>
+            <Typography variant="h4">Back</Typography>
+          </Button>
+      </Grid>
       <Grid item xs={12} >
         <Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center">
           <Typography ml={4} mt={3} variant="h4">{title}</Typography>
@@ -357,12 +365,13 @@ const PublicNoticeDetail_GLD = () => {
                 </Box>
               </Grid>
               <Grid item xs={12} md={10}>
-                <Box xs={12} ml={4} mt={3}>
+                <Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
                   <TabTableDetail
                     applicationDetailData={applicationDetailData}
                     proofList={proofList}
                   />
                 </Box>
+                <br/>
               </Grid>
             </Grid>
           </Grid>
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
index 3f0eab0..b5f40e1 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
@@ -21,10 +21,10 @@ const ProofTab = Loadable(lazy(() => import('./ProofTab')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const PublicNotice = ({applicationDetailData, proofList}) => {
+const PublicNotice = ({ applicationDetailData, proofList }) => {
     const [_proofList, setProofList] = React.useState([]);
     const [inProgressList,] = React.useState([]);
-    const [onReady,setOnReady] = React.useState(false);
+    const [onReady, setOnReady] = React.useState(false);
     const [selectedTab, setSelectedTab] = React.useState("1");
     // const navigate = useNavigate();
     const [statusHistoryList, setStatusHistoryList] = React.useState([]);
@@ -66,13 +66,13 @@ const PublicNotice = ({applicationDetailData, proofList}) => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{minHeight: '40vh'}}>
+            <Grid container sx={{ minHeight: '40vh' }}>
                 {/*col 2*/}
                 <Grid item xs={12}>
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                <Tab label={"Proof(" + (_proofList?.length?_proofList?.length:0) + ")"} value="1" />
+                                <Tab label={"Proof(" + (_proofList?.length ? _proofList?.length : 0) + ")"} value="1" />
                                 <Tab label={"Payment(" + inProgressList.length + ")"} value="2" />
                                 <Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" />
                             </TabList>
diff --git a/src/pages/User/DetailPage/UserAuthTable.js b/src/pages/User/DetailPage/UserAuthTable.js
index ed5c6ce..2f53a39 100644
--- a/src/pages/User/DetailPage/UserAuthTable.js
+++ b/src/pages/User/DetailPage/UserAuthTable.js
@@ -19,7 +19,24 @@ export default function UserAuthTable({setSelectedRow, userAuth,isNewRecord}) {
     const [authData, setAuthData] = useState([]);
     const [onReady, setOnReady] = useState(false);
     const [currentSelectedRow, setCurrentSelectedRow] = useState(userAuth);
-
+    const _sx = {
+        ml: 3,
+        mb: 3,
+        mr: 3,
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
     useEffect(() => {
         axios.get(`${apiPath}${GET_AUTH_LIST}`)
             .then((response) => {
@@ -78,6 +95,7 @@ export default function UserAuthTable({setSelectedRow, userAuth,isNewRecord}) {
                         setCurrentSelectedRow(ids);
                     }}
                     autoHeight
+                    sx={_sx}
                 />
             </div>
     );
diff --git a/src/pages/User/DetailPage/UserAuthorityCard.js b/src/pages/User/DetailPage/UserAuthorityCard.js
index 360d720..deef5ed 100644
--- a/src/pages/User/DetailPage/UserAuthorityCard.js
+++ b/src/pages/User/DetailPage/UserAuthorityCard.js
@@ -4,7 +4,7 @@ import {
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import * as React from "react";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -16,7 +16,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData,isNewRecord}) => {
+const UserAuthorityCard = ({ isCollectData, updateUserAuthList, userData, isNewRecord }) => {
     const [currentAuthData, setCurrentAuthData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [selectedRow, setSelectedRow] = useState([]);
@@ -44,13 +44,13 @@ const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData,isNewReco
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
+                border={false}
+                content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3}}>
+                <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                     User Authority
                 </Typography>
 
@@ -59,6 +59,7 @@ const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData,isNewReco
                     setSelectedRow={setSelectedRow}
                     isNewRecord={isNewRecord}
                 />
+                <br/>
             </MainCard>
     );
 };
diff --git a/src/pages/User/DetailPage/UserGroupCard.js b/src/pages/User/DetailPage/UserGroupCard.js
index bab3c8f..d926c95 100644
--- a/src/pages/User/DetailPage/UserGroupCard.js
+++ b/src/pages/User/DetailPage/UserGroupCard.js
@@ -49,7 +49,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord}
                       border={false}
                       content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3}}>
+                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black"}}>
                     Group(s)
                 </Typography>
                 <UserGroupTable
@@ -57,6 +57,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord}
                     setSelectedRow={setSelectedRow}
                     isNewRecord={isNewRecord}
                 />
+                <br/>
             </MainCard>
     );
 };
diff --git a/src/pages/User/DetailPage/UserGroupTable.js b/src/pages/User/DetailPage/UserGroupTable.js
index b4b6fab..060499c 100644
--- a/src/pages/User/DetailPage/UserGroupTable.js
+++ b/src/pages/User/DetailPage/UserGroupTable.js
@@ -17,6 +17,25 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord})
     const [groupData, setGroupData] = useState([]);
     const [onReady, setOnReady] = useState(false);
     const [currentSelectedRow, setCurrentSelectedRow] = useState(userGroup);
+    
+    const _sx = {
+        ml: 3,
+        mb: 3,
+        mr: 3,
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
 
     useEffect(() => {
         axios.get(`${apiPath}${GET_GROUP_COMBO_PATH}`)
@@ -71,6 +90,7 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord})
                         setCurrentSelectedRow(ids);
                     }}
                     autoHeight
+                    sx={_sx}
                 />
             </div>
     );
diff --git a/src/pages/User/DetailPage/UserInformationCard.js b/src/pages/User/DetailPage/UserInformationCard.js
index 5346bab..265d9dc 100644
--- a/src/pages/User/DetailPage/UserInformationCard.js
+++ b/src/pages/User/DetailPage/UserInformationCard.js
@@ -68,17 +68,16 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
                       border={false}
                       content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
+                <Typography variant="h5" sx={{mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black"}}>
                     Information
                 </Typography>
 
-
                 <form>
                     <Grid container>
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3, mt:3}}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                     <FormLabel required>Username:</FormLabel>
                                 </Grid>
 
diff --git a/src/pages/User/DetailPage/index.js b/src/pages/User/DetailPage/index.js
index 543f91e..e8d8f76 100644
--- a/src/pages/User/DetailPage/index.js
+++ b/src/pages/User/DetailPage/index.js
@@ -1,15 +1,16 @@
 // material-ui
 import {
     Button,
-    Grid, 
+    Grid,
     Typography,
-    Stack
+    Stack,
+    Box,
 } from '@mui/material';
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import * as React from "react";
 import axios from "axios";
-import {useNavigate,useParams} from "react-router-dom";
-import {GLD_USER_PATH,DELETE_USER,POST_ADMIN_USER_REGISTER} from "../../../utils/ApiPathConst";
+import { useNavigate, useParams } from "react-router-dom";
+import { GLD_USER_PATH, DELETE_USER, POST_ADMIN_USER_REGISTER } from "../../../utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -23,7 +24,18 @@ import {
     notifyDeleteSuccess,
     notifySaveSuccess,
 } from "../../../utils/CommonFunction";
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -34,8 +46,8 @@ const UserMaintainPage = () => {
     const [onReady, setOnReady] = useState(false);
     const [isCollectData, setIsCollectData] = useState(false);
     const [editedCustomerData, setEditedCustomerData] = useState({});
-    const [userGroupData,setUserGroupData] = useState([]);
-    const [userAuthData,setUserAuthData] = useState([]);
+    const [userGroupData, setUserGroupData] = useState([]);
+    const [userAuthData, setUserAuthData] = useState([]);
     const [userConfirm, setUserConfirm] = useState(false);
     const [isNewRecord, setIsNewRecord] = useState(false);
     const [refUserData, setRefUserData] = React.useState({});
@@ -45,11 +57,11 @@ const UserMaintainPage = () => {
         setEditedCustomerData(userData);
     }
 
-    function updateUserGroupList(userGroupData){
+    function updateUserGroupList(userGroupData) {
         setUserGroupData(userGroupData);
     }
 
-    function updateUserAuthList(userAuthData){
+    function updateUserAuthList(userAuthData) {
         setUserAuthData(userAuthData);
     }
 
@@ -68,7 +80,7 @@ const UserMaintainPage = () => {
         setIsWindowOpen(true);
     };
 
-    function deleteData(){
+    function deleteData() {
         axios.delete(`${DELETE_USER}/${params.id}`,
         )
             .then((response) => {
@@ -83,10 +95,10 @@ const UserMaintainPage = () => {
                 return false;
             });
     }
-// ==============================|| DELETE WINDOW RELATED ||============================== //
+    // ==============================|| DELETE WINDOW RELATED ||============================== //
 
     useEffect(() => {
-        if(params.id > 0 ){
+        if (params.id > 0) {
             axios.get(`${GLD_USER_PATH}/${params.id}`)
                 .then((response) => {
                     if (response.status === 200) {
@@ -99,7 +111,7 @@ const UserMaintainPage = () => {
                     return false;
                 });
         }
-        else{
+        else {
             setUserData(
                 {
                     "authIds": [],
@@ -123,18 +135,18 @@ const UserMaintainPage = () => {
         if (Object.keys(userData).length > 0 && userData !== undefined) {
             setOnReady(true);
         }
-        else if(isNewRecord){
+        else if (isNewRecord) {
             setOnReady(true);
         }
     }, [userData]);
 
     useEffect(() => {
-        if(userConfirm && onReady){
-            const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds,userAuthData);
-            const deletedUserGroup = getDeletedRecordWithRefList(refUserData.groupIds,userGroupData);
+        if (userConfirm && onReady) {
+            const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds, userAuthData);
+            const deletedUserGroup = getDeletedRecordWithRefList(refUserData.groupIds, userGroupData);
             // console.log(userGroupData)
             // console.log(userAuthData)
-            if( parseInt(params.id) >= -1){
+            if (parseInt(params.id) >= -1) {
                 axios.post(`${GLD_USER_PATH}/${params.id}`,
                     {
                         "enName": editedCustomerData.enName,
@@ -157,8 +169,8 @@ const UserMaintainPage = () => {
                     .catch(error => {
                         console.log(error);
                         return false;
-                });
-            }else{
+                    });
+            } else {
                 axios.post(POST_ADMIN_USER_REGISTER,
                     {
                         "username": editedCustomerData.username,
@@ -182,58 +194,72 @@ const UserMaintainPage = () => {
                     .catch(error => {
                         console.log(error);
                         return false;
-                });
+                    });
             }
         }
         setUserConfirm(false);
-    }, [editedCustomerData,userGroupData,userAuthData]);
+    }, [editedCustomerData, userGroupData, userAuthData]);
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container sx={{minHeight: '90vh'}}>
-                <Grid item xs={12} height='60px'>
-                    <Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center">
-                        <Typography variant="h5">Maintain User</Typography>
-                    </Stack>
+            <Grid container sx={{ minHeight: '90vh' }}>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">{isNewRecord ? "Create GLD User" : "Maintain GLD User"}</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                <Grid item xs={12}>
+                    <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/userSearchview") }}>
+                        <KeyboardBackspaceOutlinedIcon />
+                        <Typography variant="h4">Back</Typography>
+                    </Button>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} md={5} lg={5}>
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <UserInformationCard
-                                updateUserObject={updateUserObject}
-                                userData={userData}
-                                isCollectData={isCollectData}
-                                isNewRecord={isNewRecord}
-                            />
+                            <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserInformationCard
+                                    updateUserObject={updateUserObject}
+                                    userData={userData}
+                                    isCollectData={isCollectData}
+                                    isNewRecord={isNewRecord}
+                                />
+                            </Box>
                         </Grid>
 
-                        <Grid item xs={12} md={12} lg={12} sx={{mt: 3}}>
-                            <UserGroupCard
-                                updateUserGroupList={updateUserGroupList}
-                                userData={userData}
-                                isCollectData={isCollectData}
-                                isNewRecord={isNewRecord}
-                            />
+                        <Grid item xs={12} md={12} lg={12} sx={{ mt: 3 }}>
+                            <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserGroupCard
+                                    updateUserGroupList={updateUserGroupList}
+                                    userData={userData}
+                                    isCollectData={isCollectData}
+                                    isNewRecord={isNewRecord}
+                                />
+                            </Box>
                         </Grid>
                     </Grid>
                 </Grid>
                 {/*col 2*/}
                 <Grid item xs={12} md={7} lg={7}>
-                    <UserAuthorityCard
-                        updateUserAuthList={updateUserAuthList}
-                        userData={userData}
-                        isCollectData={isCollectData}
-                        isNewRecord={isNewRecord}
-                    />
+                    <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                        <UserAuthorityCard
+                            updateUserAuthList={updateUserAuthList}
+                            userData={userData}
+                            isCollectData={isCollectData}
+                            isNewRecord={isNewRecord}
+                        />
+                    </Box>
                 </Grid>
 
                 {/*bottom button*/}
-                <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center">
+                <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"end"} justifyContent="center">
                     <Grid container maxWidth justifyContent="flex-end">
-                        <Grid item sx={{ml:3, mr:3, mb:3}}>
+                        <Grid item sx={{ ml: 3, mr: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"
@@ -255,7 +281,7 @@ const UserMaintainPage = () => {
                             />
                         </Grid>
 
-                        <Grid item sx={{ml: 3, mr: 3}}>
+                        <Grid item sx={{ ml: 3, mr: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"
diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
index 1998291..712ce97 100644
--- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
+++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Grid, Button
+    Grid, Button, Typography
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import * as React from "react";
@@ -142,8 +142,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
             {!onReady ?
                 <LoadingComponent />
                 :
-                <form onSubmit={formik.handleSubmit} style={{ padding: 24 }}>
-
+                <form onSubmit={formik.handleSubmit} style={{ padding: 12 }}>
                     {/*top button*/}
                     <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
                         <Grid container maxWidth justifyContent="flex-start">
@@ -200,9 +199,10 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         </Grid>
                     </Grid>
                     {/*end top button*/}
-
-                    <Grid container spacing={1}>
-
+                    <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                        Individual User Details
+                    </Typography>
+                    <Grid container spacing={1} sx={{ mt: 3, ml: 3, mb: 2, mr: 3}}>
                         <Grid item lg={4}>
                             {FieldUtils.getTextField({
                                 label: "Username:",
diff --git a/src/pages/User/DetailsPage_Individual/index.js b/src/pages/User/DetailsPage_Individual/index.js
index b6877b4..0066607 100644
--- a/src/pages/User/DetailsPage_Individual/index.js
+++ b/src/pages/User/DetailsPage_Individual/index.js
@@ -1,15 +1,27 @@
 // material-ui
 import * as React from "react";
 
-import {Grid, Typography} from '@mui/material';
+import { Grid, Typography, Button, Stack, Box } from '@mui/material';
 import FileList from "../../../components/FileList"
 import MainCard from "../../../components/MainCard";
 import * as HttpUtils from "../../../utils/HttpUtils";
-import {useParams} from "react-router-dom";
+import { useParams } from "react-router-dom";
 import * as UrlUtils from "../../../utils/ApiPathConst";
 import * as DateUtils from '../../../utils/DateUtils';
-
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 import Loadable from 'components/Loadable';
+import { useNavigate } from "react-router-dom";
 const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));
 const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual')));
 
@@ -19,42 +31,61 @@ const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationC
 
 const UserMaintainPage_Individual = () => {
     const params = useParams();
-    const [formData, setFormData]  = React.useState({})
+    const navigate = useNavigate();
+    const [formData, setFormData] = React.useState({})
     const [isLoading, setLoding] = React.useState(true);
 
+    const _sx = {
+        ml: 3,
+        mb: 3,
+        mr: 3,
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
 
-    React.useEffect(()=>{
+    React.useEffect(() => {
         loadData();
-    },[]);
+    }, []);
 
-    const loadData = ()=>{
+    const loadData = () => {
         setLoding(true);
         HttpUtils.get({
             url: `${UrlUtils.GET_IND_USER_PATH}/${params.id}`,
-            onSuccess: function(response){
+            onSuccess: function (response) {
                 response.data["address"] = JSON.parse(response.data["address"]);
                 response.data["mobileNumber"] = JSON.parse(response.data["mobileNumber"]);
                 response.data["faxNo"] = JSON.parse(response.data["faxNo"]);
 
                 let createDate = DateUtils.datetimeStr(response.data.created);
-                let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy;
+                let modifiedBy = DateUtils.datetimeStr(response.data.modified) + ", " + response.data.modifiedBy;
                 response.data["createDate"] = createDate;
                 response.data["modifieDate"] = modifiedBy;
-                response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verified";
-        
+                response.data["verifiedStatus"] = response.data.verifiedBy ? DateUtils.datetimeStr(response.data.verifiedDate) + ", " + response.data.verifiedByName : "Not verified";
+
                 response.data["country"] = response.data.address?.country;
                 response.data["district"] = response.data.address?.district;
                 response.data["addressLine1"] = response.data.address?.addressLine1;
                 response.data["addressLine2"] = response.data.address?.addressLine2;
                 response.data["addressLine3"] = response.data.address?.addressLine3;
-        
+
                 response.data["phoneNumber"] = response.data.mobileNumber?.phoneNumber;
                 response.data["tel_countryCode"] = response.data.mobileNumber?.countryCode;
-        
+
                 response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                 response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
-        
-                response.data["lastLoginDate"] = response.data.lastLogin?DateUtils.datetimeStr(response.data.lastLogin):"";
+
+                response.data["lastLoginDate"] = response.data.lastLogin ? DateUtils.datetimeStr(response.data.lastLogin) : "";
 
                 setFormData(response.data);
             }
@@ -63,37 +94,52 @@ const UserMaintainPage_Individual = () => {
 
 
     React.useEffect(() => {
-       setLoding(false);
+        setLoding(false);
     }, [formData]);
 
     return (
         isLoading ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">Individual User Details</Typography>
+            <Grid container>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">Maintain Individual User</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                <Grid item xs={12}>
+                    <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/indUser") }}>
+                        <KeyboardBackspaceOutlinedIcon />
+                        <Typography variant="h4">Back</Typography>
+                    </Button>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <UserInformationCard
-                                formData={formData}
-                                loadDataFun={loadData}
-                            />
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserInformationCard
+                                    formData={formData}
+                                    loadDataFun={loadData}
+                                />
+                            </Box>
                         </Grid>
                         <Grid item xs={12} md={12} lg={12}>
-                        <MainCard elevation={0} border={false} content={false}>
-                        <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
-                            Files
-                        </Typography>
-                            <FileList sx={{mt: 3, ml: 3, mb: 1}}
-                                refId={params.id}
-                                refType={"identification"}
-                            />
-                        </MainCard>
-                    </Grid>
+                            <MainCard elevation={0} border={false} content={false}>
+                                <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }} style={{ padding: 12 }}>
+                                    <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                                        Files
+                                    </Typography>
+                                    <FileList sx={_sx}
+                                        refId={params.id}
+                                        refType={"identification"}
+                                    />
+                                </Box>
+                            </MainCard>
+                            <br/>
+                        </Grid>
                     </Grid>
                 </Grid>
                 {/*col 2*/}
diff --git a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js
index 4296384..7141b28 100644
--- a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js
+++ b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js
@@ -165,22 +165,20 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
         setIsConfirmPopUp(true);
     };
 
-
     return (
         <MainCard elevation={0}
             border={false}
             content={false}
         >
 
-            {!onReady?
-            <LoadingComponent />
-            :
+            {!onReady ?
+                <LoadingComponent />
+                :
                 <form onSubmit={formik.handleSubmit}>
 
                     {/*top button*/}
-                    <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
+                    <Grid item s={12} md={12} lg={12} sx={{ mb: 3, mt: 2 }} alignItems={"start"} justifyContent="center">
                         <Grid container maxWidth justifyContent="flex-start">
-
                             {editMode ?
                                 <>
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
@@ -236,6 +234,9 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                     </Grid>
                     {/*end top button*/}
                     <div style={{ paddingLeft: 24, paddingRight: 24 }}>
+                        <Typography variant="h5" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                            Organization User Details
+                        </Typography>
                         <Grid container spacing={1}>
                             <Grid item lg={4}>
                                 {FieldUtils.getTextField({
@@ -312,8 +313,8 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                         );
                                         return displayOptions;
                                     },
-                                    getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? 
-                                        <div>BR No.: {item["brNo"]}<div>Org. Name(Eng): {item["enCompanyName"] === null ? "N/A" : item["enCompanyName"]}</div><div>Org. Name(CH): {item["chCompanyName"] === null ? "N/A" : item["chCompanyName"]}</div></div>: "") 
+                                    getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ?
+                                        <div>BR No.: {item["brNo"]}<div>Org. Name(Eng): {item["enCompanyName"] === null ? "N/A" : item["enCompanyName"]}</div><div>Org. Name(CH): {item["chCompanyName"] === null ? "N/A" : item["chCompanyName"]}</div></div> : "")
                                         : "",
                                     isOptionEqualToValue: (option, newValue, setValue, setInputValue) => {
                                         if (option.id == newValue || option.id == newValue.id) {
@@ -324,7 +325,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                         return option == newValue || option.id == newValue.id;
                                     },
                                     onInputChange: (event, newValue, setInputValue) => {
-                                        if (newValue !== "[object Object]" ) {
+                                        if (newValue !== "[object Object]") {
                                             setInputValue(newValue);
                                         }
                                     },
@@ -449,28 +450,18 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                         </Button>
                                                     </Grid>
                                                 }
-
                                             </>
                                     }
-
-
-
                                 </Grid>
                             </Grid>
                         </Grid>
-
                     </div>
+                    <br/>
                     <div style={{ paddingLeft: 24, paddingRight: 24 }}>
                         <Grid container spacing={1} >
-
-                            <Grid item lg={12} >
+                            <Grid item lg={12}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item lg={1} >
-                                        <Typography variant="h5" sx={{ display: 'flex', alignItems: 'center' }}>
-                                            Organization
-                                        </Typography>
-                                    </Grid>
-                                    {currentUserData.orgId==null?
+                                    {currentUserData.orgId == null ?
                                         <Grid item lg={2} >
                                             <Button variant="contained"
                                                 onClick={createOrgClick}
@@ -478,11 +469,15 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                 Create Organization
                                             </Button>
                                         </Grid>
-                                        :null
+                                        : null
                                     }
                                 </Grid>
                             </Grid>
-
+                            <Grid item lg={12} >
+                                <Typography variant="h5" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                                    Organization
+                                </Typography>
+                            </Grid>
                             <Grid item lg={4}>
                                 {FieldUtils.getTextField({
                                     label: "Org.Name (English):",
@@ -587,7 +582,6 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                 </Dialog>
             </div>
         </MainCard>
-
     );
 };
 
diff --git a/src/pages/User/DetailsPage_Organization/index.js b/src/pages/User/DetailsPage_Organization/index.js
index 4702a12..8197803 100644
--- a/src/pages/User/DetailsPage_Organization/index.js
+++ b/src/pages/User/DetailsPage_Organization/index.js
@@ -1,10 +1,10 @@
 // material-ui
-import {Grid, Typography} from '@mui/material';
-import {useEffect, useState} from "react";
+import { Grid, Typography, Stack, Box, Button } from '@mui/material';
+import { useEffect, useState } from "react";
 import * as React from "react";
 //import axios from "axios";
 import * as HttpUtils from "../../../utils/HttpUtils";
-import {useParams} from "react-router-dom";
+import { useParams } from "react-router-dom";
 import FileList from "../../../components/FileList"
 import MainCard from "../../../components/MainCard";
 import * as UrlUtils from "../../../utils/ApiPathConst";
@@ -14,74 +14,105 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_Organization')));
-
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import { useNavigate } from 'react-router-dom';
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const UserMaintainPage_Organization = () => {
     const params = useParams();
-    const [userData, setUserData]  = useState({})
-    const [orgData, setOrgData]  = useState({})
+    const navigate = useNavigate();
+    const [userData, setUserData] = useState({})
+    const [orgData, setOrgData] = useState({})
     const [isLoading, setLoding] = useState(true);
 
+    const _sx = {
+        ml: 3,
+        mb: 3,
+        mr: 3,
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
 
-    useEffect(()=>{
+    useEffect(() => {
         // console.log(userData);
         loadData();
-    },[]);
+    }, []);
 
     // const reloadPage=()=>{
     //     window.location.reload(false);
     // }
 
-    const loadData = ()=>{
+    const loadData = () => {
         setLoding(true);
         HttpUtils.get({
             url: `${UrlUtils.GET_ORG_USER_PATH}/${params.id}`,
-            onSuccess: function(response){
+            onSuccess: function (response) {
                 console.log(response)
-                if(response.data.orgId !=null){
+                if (response.data.orgId != null) {
                     response.data["addressBus"] = response.orgDetail.data["addressTemp"];
                     response.data["contactTel"] = response.orgDetail.data["contactTel"];
                     response.data["faxNo"] = response.orgDetail.data["faxNo"];
 
-                    response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate?DateUtils.dateStr(response.orgDetail.data.brExpiryDate):"";
+                    response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate ? DateUtils.dateStr(response.orgDetail.data.brExpiryDate) : "";
                     response.data["brNo"] = response.orgDetail.data.brNo;
                     response.data["enCompanyName"] = response.orgDetail.data.enCompanyName;
                     response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
                     response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
-                }else{
+                } else {
                     response.data["addressBus"] = JSON.parse(response.data["addressBus"]);
                     response.data["contactTel"] = JSON.parse(response.data["contactTel"]);
                     response.data["faxNo"] = JSON.parse(response.data["faxNo"]);
 
-                    response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
+                    response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
                 }
 
                 let createDate = DateUtils.datetimeStr(response.data.created);
-                let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy;
+                let modifiedBy = DateUtils.datetimeStr(response.data.modified) + ", " + response.data.modifiedBy;
                 response.data["createDate"] = createDate;
                 response.data["modifieDate"] = modifiedBy;
-                response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verified";
-        
-                response.data["lastLoginDate"] = response.data.lastLogin?DateUtils.datetimeStr(response.data.lastLoginDate):"";
-        
+                response.data["verifiedStatus"] = response.data.verifiedBy ? DateUtils.datetimeStr(response.data.verifiedDate) + ", " + response.data.verifiedByName : "Not verified";
+
+                response.data["lastLoginDate"] = response.data.lastLogin ? DateUtils.datetimeStr(response.data.lastLoginDate) : "";
+
                 response.data["country"] = response.data.addressBus?.country;
                 response.data["district"] = response.data.addressBus?.district;
                 response.data["addressLine1"] = response.data.addressBus?.addressLine1;
                 response.data["addressLine2"] = response.data.addressBus?.addressLine2;
                 response.data["addressLine3"] = response.data.addressBus?.addressLine3;
-        
+
                 response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
                 response.data["tel_countryCode"] = response.data.contactTel?.countryCode;
-        
+
                 response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                 response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
-        
+
                 //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
 
-                
+
                 setUserData(response.data);
                 setOrgData(response.orgList);
             }
@@ -90,37 +121,53 @@ const UserMaintainPage_Organization = () => {
 
 
     useEffect(() => {
-       setLoding(false);
+        setLoding(false);
     }, [userData]);
 
     return (
         isLoading ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">Organization User Details</Typography>
+            <Grid container>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">Maintain Organization User</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                <Grid item xs={12}>
+                    <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/orgUser") }}>
+                        <KeyboardBackspaceOutlinedIcon />
+                        <Typography variant="h4">Back</Typography>
+                    </Button>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <UserInformationCard
-                                userData={userData}
-                                loadDataFun={loadData}
-                                orgData={orgData}
-                            />
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserInformationCard
+                                    userData={userData}
+                                    loadDataFun={loadData}
+                                    orgData={orgData}
+                                />
+                                <br/>
+                            </Box>
                         </Grid>
                         <Grid item xs={12} md={12} lg={12}>
-                            <MainCard elevation={0} border={false} content={false}>
-                            <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
-                                Files
-                            </Typography>
-                                <FileList sx={{mt: 3, ml: 3, mb: 1}}
-                                    refId={params.id}
-                                    refType={"identification"}
-                                />
-                            </MainCard>
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <MainCard elevation={0} border={false} content={false}>
+                                    <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 1 }}>
+                                        Files
+                                    </Typography>
+                                    <FileList sx={_sx}
+                                        refId={params.id}
+                                        refType={"identification"}
+                                    />
+                                </MainCard>
+                            </Box>
+                            <br/>
                         </Grid>
                     </Grid>
                 </Grid>
diff --git a/src/pages/User/SearchPage/UserSearchForm.js b/src/pages/User/SearchPage/UserSearchForm.js
index aef1307..7adf346 100644
--- a/src/pages/User/SearchPage/UserSearchForm.js
+++ b/src/pages/User/SearchPage/UserSearchForm.js
@@ -6,21 +6,22 @@ import {
     Typography
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
-import {useForm} from "react-hook-form";
+import { useForm } from "react-hook-form";
 
 import {
     // useEffect,
-    useState} from "react";
+    useState
+} from "react";
 
 import Checkbox from "@mui/material/Checkbox";
 import * as React from "react";
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
-import {useNavigate} from "react-router";
+import { useNavigate } from "react-router";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserSearchForm = ({applySearch}) => {
+const UserSearchForm = ({ applySearch }) => {
     const navigate = useNavigate();
 
     const [type, setType] = useState([]);
@@ -32,7 +33,7 @@ const UserSearchForm = ({applySearch}) => {
 
         let typeArray = [];
 
-        for(let i =0; i < type.length; i++){
+        for (let i = 0; i < type.length; i++) {
             typeArray.push(type[i].label);
         }
 
@@ -48,21 +49,22 @@ const UserSearchForm = ({applySearch}) => {
     };
 
 
-    function resetForm(){
+    function resetForm() {
         setType([]);
         setLocked(false);
         reset();
     }
 
-    const handleNewUserClick = (id) => {
+    const handleNewUserClick = () => {
         // console.log(id)
-        navigate('/user/'+ id);
+        navigate('/user/-1');
+        // navigate('/user/' + id);
     };
 
     return (
         <MainCard xs={12} md={12} lg={12}
-                  border={false}
-                  content={false}>
+            border={false}
+            content={false}>
 
             <form onSubmit={handleSubmit(onSubmit)}>
                 {/*row 1*/}
@@ -74,7 +76,7 @@ const UserSearchForm = ({applySearch}) => {
 
                 {/*row 2*/}
                 <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("userName")}
@@ -83,7 +85,7 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("fullenName")}
@@ -92,7 +94,7 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("post")}
@@ -101,7 +103,7 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("email")}
@@ -110,7 +112,7 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("phone")}
@@ -119,7 +121,7 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <FormControlLabel
                             control={
                                 <Checkbox
@@ -139,8 +141,7 @@ const UserSearchForm = ({applySearch}) => {
                 <Grid container direction="row"
                     justifyContent="space-between"
                     alignItems="center">
-                       
-                    <Grid item xs={3} md={3} sx={{ml:1, mr:1, mb:3, mt:3}}>
+                    <Grid item xs={3} md={3} sx={{ ml: 3, mr: 1, mb: 3, mt: 3 }}>
                         <Button
                             size="large"
                             variant="contained"
@@ -149,13 +150,13 @@ const UserSearchForm = ({applySearch}) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            <AddCircleOutlineIcon/>
+                            <AddCircleOutlineIcon />
                             New User
                         </Button>
                     </Grid>
-                    <Grid item xs={8} md={8} sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Grid container >
-                            <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                    <Grid item xs={8} md={8} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Grid container maxWidth justifyContent="flex-end">
+                            <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                                 <Button
                                     size="large"
                                     variant="contained"
@@ -168,7 +169,7 @@ const UserSearchForm = ({applySearch}) => {
                                 </Button>
                             </Grid>
 
-                            <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                            <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                                 <Button
                                     size="large"
                                     variant="contained"
diff --git a/src/pages/User/SearchPage/index.js b/src/pages/User/SearchPage/index.js
index d5d081d..7ca6d14 100644
--- a/src/pages/User/SearchPage/index.js
+++ b/src/pages/User/SearchPage/index.js
@@ -16,7 +16,17 @@ import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./UserSearchForm')));
 const EventTable = Loadable(lazy(() => import('./UserTable')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize:'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSettingPage = () => {
@@ -25,15 +35,17 @@ const UserSettingPage = () => {
     const [onReady, setOnReady] = useState(false);
     const [changelocked, setChangeLocked] = React.useState(false);
 
-    useEffect(() => {
+    React.useLayoutEffect(() => {
         getUserList();
     }, [changelocked]);
 
     useEffect(() => {
-        setOnReady(true);
+        if (record.length > 0) {
+            setOnReady(true);
+        }
     }, [record]);
 
-    useEffect(() => {
+    React.useLayoutEffect(() => {
         getUserList();
     }, [searchCriteria]);
 
@@ -60,16 +72,14 @@ const UserSettingPage = () => {
         !onReady ?
             <LoadingComponent/>
             :
-        <Grid container sx={{minHeight: '90vh'}}>
-            <Grid item xs={12} md={12} lg={12}>
-                    <Grid direction="row" container justifyContent="flex-start" alignItems="center" ml={2}>
-                        <Grid item xs={2} height='50px'>
-                            <Stack direction="row" height='100%' justifyContent="space-between" alignItems="center">
-                                <Typography align="center" variant="h5">View User</Typography>
-                            </Stack>
-                        </Grid>
-                    </Grid>
-                </Grid>
+        <Grid container sx={{minHeight: '90vh'}} direction="column">
+            <Grid item xs={12}>
+                <div style={BackgroundHead}>
+                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                        <Typography ml={15} color='#FFF' variant="h4">View GLD User</Typography>
+                    </Stack>
+                </div>
+            </Grid>
 
             {/*row 1*/}
             <Grid item xs={12} md={12} lg={12}>
diff --git a/src/pages/User/SearchPage_Individual/index.js b/src/pages/User/SearchPage_Individual/index.js
index 63f1a62..1f9dc25 100644
--- a/src/pages/User/SearchPage_Individual/index.js
+++ b/src/pages/User/SearchPage_Individual/index.js
@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Grid, Typography
+    Grid, Typography, Stack
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import {useEffect, useState} from "react";
@@ -18,7 +18,17 @@ import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./UserSearchForm_Individual')));
 const EventTable = Loadable(lazy(() => import('./UserTable_Individual')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize:'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Individual = () => {
@@ -57,10 +67,14 @@ const UserSearchPage_Individual = () => {
         !onReady ?
             <LoadingComponent/>
             :
-        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-            <Grid item xs={12} sx={{mb: -2.25}}>
-                <Typography variant="h5">View Individual User</Typography>
-            </Grid>
+        <Grid container>
+        <Grid item xs={12}>
+        <div style={BackgroundHead}>
+            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                <Typography ml={15} color='#FFF' variant="h4">View Individual User</Typography>
+            </Stack>
+        </div>
+    </Grid>
 
             {/*row 1*/}
             <Grid item xs={12} md={12} lg={12}>
diff --git a/src/pages/User/SearchPage_Organization/index.js b/src/pages/User/SearchPage_Organization/index.js
index 111b15b..7d9856c 100644
--- a/src/pages/User/SearchPage_Organization/index.js
+++ b/src/pages/User/SearchPage_Organization/index.js
@@ -1,9 +1,9 @@
 // material-ui
 import {
-    Grid, Typography
+    Grid, Typography, Stack
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 //import axios from "axios";
 //import {apiPath} from "../../auth/utils";
 import * as UrlUtils from "../../../utils/ApiPathConst";
@@ -18,13 +18,23 @@ import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./UserSearchForm_Organization')));
 const EventTable = Loadable(lazy(() => import('./UserTable_Organization')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Organization = () => {
 
-    const [record,setRecord] = useState([]);
+    const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
 
@@ -40,11 +50,11 @@ const UserSearchPage_Organization = () => {
         getUserList();
     }, [searchCriteria]);
 
-    function getUserList(){
+    function getUserList() {
         HttpUtils.get({
             url: UrlUtils.GET_ORG_USER_PATH,
             params: searchCriteria,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 setRecord(responseData);
             }
         });
@@ -56,31 +66,34 @@ const UserSearchPage_Organization = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-            <Grid item xs={12} sx={{mb: -2.25}}>
-                <Typography variant="h5">View Organization User</Typography>
-            </Grid>
+            <Grid container>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">View Organization User</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm applySearch={applySearch} />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                        border={false}
+                        content={false}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
 
-            {/*row 1*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <SearchForm applySearch={applySearch}/>
-            </Grid>
-            {/*row 2*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <MainCard elevation={0}
-                          border={false}
-                          content={false}
-                >
-                    <EventTable
-                        recordList={record}
-                    />
-                </MainCard>
             </Grid>
 
-        </Grid>
-
     );
 };
 
diff --git a/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js b/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js
index e223b0b..88c0d72 100644
--- a/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js
+++ b/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js
@@ -14,7 +14,6 @@ const GroupAuthTable = Loadable(lazy(() => import('./GroupAuthTable')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-
 const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData,isNewRecord}) => {
     const [currentAuthData, setCurrentAuthData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
@@ -55,7 +54,7 @@ const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData,isNewRec
                       border={false}
                       content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3}}>
+                <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                     User Authority
                 </Typography>
 
diff --git a/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js b/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js
index f4649e6..9214364 100644
--- a/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js
+++ b/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js
@@ -20,6 +20,25 @@ export default function GroupAuthTable({setSelectedRow, userAuth,isNewRecord}) {
     const [onReady, setOnReady] = useState(false);
     const [currentSelectedRow, setCurrentSelectedRow] = useState(userAuth);
 
+    const _sx = {
+        ml: 3,
+        mb: 3,
+        mr: 3,
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
     useEffect(() => {
         axios.get(`${apiPath}${GET_GROUP_AUTH_LIST}`)
             .then((response) => {
@@ -77,7 +96,8 @@ export default function GroupAuthTable({setSelectedRow, userAuth,isNewRecord}) {
                         setSelectedRow(ids);
                         setCurrentSelectedRow(ids);
                     }}
-                    autoHeight 
+                    autoHeight
+                    sx={_sx}
                 />
             </div>
     );
diff --git a/src/pages/pnspsUserGroupDetailPage/UserAddCard.js b/src/pages/pnspsUserGroupDetailPage/UserAddCard.js
index 78a4c1e..1cf9a4b 100644
--- a/src/pages/pnspsUserGroupDetailPage/UserAddCard.js
+++ b/src/pages/pnspsUserGroupDetailPage/UserAddCard.js
@@ -6,12 +6,12 @@ import {
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 import * as React from "react";
-import {useEffect, useState} from "react";
-import {GET_GROUP_MEMBER_LIST_PATH, GET_USER_GLD_COMBO_LIST} from "../../utils/ApiPathConst";
+import { useEffect, useState } from "react";
+import { GET_GROUP_MEMBER_LIST_PATH, GET_USER_GLD_COMBO_LIST } from "../../utils/ApiPathConst";
 import axios from "axios";
-import {apiPath} from "../../auth/utils";
+import { apiPath } from "../../auth/utils";
 import Autocomplete from "@mui/material/Autocomplete";
-import {getIdList} from "../../utils/CommonFunction";
+import { getIdList } from "../../utils/CommonFunction";
 
 //import LoadingComponent from "../extra-pages/LoadingComponent";
 //import UserAddTable from "./UserAddTable";
@@ -23,7 +23,7 @@ const UserAddTable = Loadable(lazy(() => import('./UserAddTable')));
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord}) => {
+const UserAddCard = ({ isCollectData, updateGroupMember, userGroupData, isNewRecord }) => {
     const [currentUserData, setCurrentUserData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [groupUserData, setGroupUserData] = useState([]);
@@ -31,10 +31,10 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
     const [selectedUser, setSelectedUser] = useState(null);
     const [deletedList, setDeletedList] = useState([]);
 
-    function updateUserList (){
+    function updateUserList() {
         const idList = getIdList(groupUserData);
-        if(selectedUser!==null){
-            if(!idList.includes(selectedUser.id)){
+        if (selectedUser !== null) {
+            if (!idList.includes(selectedUser.id)) {
                 const userList = [...groupUserData, selectedUser];
                 setGroupUserData(userList);
                 console.log(userList);
@@ -64,11 +64,11 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        if(isNewRecord){
+        if (isNewRecord) {
             setOnReady(true);
         }
-        else{
-            if (Object.keys(userGroupData).length > 0 &&currentUserData !== undefined) {
+        else {
+            if (Object.keys(userGroupData).length > 0 && currentUserData !== undefined) {
                 axios.get(`${apiPath}${GET_GROUP_MEMBER_LIST_PATH}?id=${userGroupData.data.id}`)
                     .then((response) => {
                         if (response.status === 200) {
@@ -87,27 +87,27 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
     useEffect(() => {
         //upload latest data to parent
         updateGroupMember({
-            "currentList" : groupUserData,
-            "deletedList" : deletedList
+            "currentList": groupUserData,
+            "deletedList": deletedList
         });
     }, [isCollectData]);
 
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
+                border={false}
+                content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3}}>
+                <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                     User(s)
                 </Typography>
-                <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mt: 2}}>
+                <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mt: 2 }}>
                     <Grid container alignItems={"center"}>
                         <Grid item xs={3} s={3} md={2} lg={2}
-                              sx={{display: 'flex', alignItems: 'center'}}>
+                            sx={{ display: 'flex', alignItems: 'center' }}>
                             User:
                         </Grid>
                         <Grid item xs={6} s={5} md={5} lg={5}>
@@ -123,7 +123,7 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
                                 renderInput={(params) => <TextField {...params} />}
                             />
                         </Grid>
-                        <Grid item xs={3} s={3} md={4} lg={4} sx={{ml: 3}}>
+                        <Grid item xs={3} s={3} md={4} lg={4} sx={{ ml: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"
@@ -139,12 +139,15 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
                         </Grid>
                     </Grid>
                 </Grid>
-
-                <UserAddTable
-                    setGroupUserData={setGroupUserData}
-                    setDeletedList={setDeletedList}
-                    userList={groupUserData}
-                />
+                <Grid container>
+                    <Grid item xs={12} sx={{mt:3}}>
+                        <UserAddTable
+                            setGroupUserData={setGroupUserData}
+                            setDeletedList={setDeletedList}
+                            userList={groupUserData}
+                        />
+                    </Grid>
+                </Grid>
             </MainCard>
     );
 };
diff --git a/src/pages/pnspsUserGroupDetailPage/UserAddTable.js b/src/pages/pnspsUserGroupDetailPage/UserAddTable.js
index d943755..d928984 100644
--- a/src/pages/pnspsUserGroupDetailPage/UserAddTable.js
+++ b/src/pages/pnspsUserGroupDetailPage/UserAddTable.js
@@ -18,6 +18,24 @@ export default function UserAddTable({setGroupUserData, userList,setDeletedList}
     const [groupData, setGroupData] = useState([]);
     const [onReady, setOnReady] = useState(false);
     const [localDeletedList, setLocalDeletedList] = React.useState([]);
+    const _sx = {
+        ml: 3,
+        mb: 3,
+        mr: 3,
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
 
     useEffect(() => {
         setGroupData(userList);
@@ -95,6 +113,7 @@ export default function UserAddTable({setGroupUserData, userList,setDeletedList}
                     pageSizeOptions={[3, 5]}
                     pageSize={20}
                     autoHeight={true}
+                    sx={_sx}
                 />
             </div>
     );
diff --git a/src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js b/src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js
index 77ce98e..773748e 100644
--- a/src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js
+++ b/src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js
@@ -4,8 +4,8 @@ import {
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 import * as React from "react";
-import {useForm} from "react-hook-form";
-import {useEffect, useState} from "react";
+import { useForm } from "react-hook-form";
+import { useEffect, useState } from "react";
 //import LoadingComponent from "../extra-pages/LoadingComponent";
 //import {useParams} from "react-router-dom";
 import Loadable from 'components/Loadable';
@@ -14,11 +14,11 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) => {
+const UserGroupInfoCard = ({ isCollectData, updateGroupObject, userGroupData }) => {
     //const params = useParams();
     const [currentUserGroupData, setCurrentUserGroupData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
-    const {register, getValues} = useForm()
+    const { register, getValues } = useForm()
 
     useEffect(() => {
         //if user data from parent are not null
@@ -29,7 +29,7 @@ const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) =>
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        if (Object.keys(userGroupData).length > 0 &&currentUserGroupData !== undefined) {
+        if (Object.keys(userGroupData).length > 0 && currentUserGroupData !== undefined) {
             setOnReady(true);
         }
     }, [currentUserGroupData]);
@@ -37,7 +37,7 @@ const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) =>
     useEffect(() => {
         //upload latest data to parent
         const values = getValues();
-        const objectData ={
+        const objectData = {
             ...values,
         }
         updateGroupObject(objectData);
@@ -46,22 +46,22 @@ const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) =>
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
+                border={false}
+                content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
+                <Typography variant="h5" sx={{ mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black" }}>
                     Information
                 </Typography>
 
                 <form>
                     <Grid container>
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                                     User Group Name:
                                 </Grid>
 
@@ -79,10 +79,10 @@ const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) =>
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, mb:3, display: 'flex', alignItems: 'center'}}>
+                                    sx={{ ml: 3, mr: 3, mb: 3, display: 'flex', alignItems: 'center' }}>
                                     User Group Description:
                                 </Grid>
 
diff --git a/src/pages/pnspsUserGroupDetailPage/index.js b/src/pages/pnspsUserGroupDetailPage/index.js
index e064b7b..7d41484 100644
--- a/src/pages/pnspsUserGroupDetailPage/index.js
+++ b/src/pages/pnspsUserGroupDetailPage/index.js
@@ -1,13 +1,13 @@
 // material-ui
 import {
     Button,
-    Grid, Typography
+    Grid, Typography, Stack, Box
 } from '@mui/material';
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import * as React from "react";
 import axios from "axios";
-import {apiPath} from "../../auth/utils";
-import {useParams} from "react-router-dom";
+import { apiPath } from "../../auth/utils";
+import { useParams } from "react-router-dom";
 import {
     GeneralConfirmWindow,
     getDeletedRecordWithRefList,
@@ -16,7 +16,7 @@ import {
     // notifyDeleteSuccess,
     notifySaveSuccess
 } from "../../utils/CommonFunction";
-import {POST_AND_UPDATE_USER_GROUP,GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";
+import { POST_AND_UPDATE_USER_GROUP, GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -24,9 +24,19 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 const GroupAuthCard = Loadable(lazy(() => import('./GroupAuthCard')));
 const UserGroupInfoCard = Loadable(lazy(() => import('./UserGroupInfoCard')));
 const UserAddCard = Loadable(lazy(() => import('./UserAddCard')));
-import {useNavigate} from "react-router";
-
+import { useNavigate } from "react-router";
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -37,8 +47,8 @@ const UserMaintainPage = () => {
     const [onReady, setOnReady] = useState(false);
     const [isCollectData, setIsCollectData] = useState(false);
     const [editedGroupData, setEditedGroupData] = useState({});
-    const [userGroupData,setUserGroupData] = useState([]);
-    const [userAuthData,setUserAuthData] = useState([]);
+    const [userGroupData, setUserGroupData] = useState([]);
+    const [userAuthData, setUserAuthData] = useState([]);
     const [userConfirm, setUserConfirm] = useState(false);
     const [groupMember, setGroupMember] = useState([]);
     const [isNewRecord, setIsNewRecord] = useState(false);
@@ -54,7 +64,7 @@ const UserMaintainPage = () => {
         setIsWindowOpen(true);
     };
 
-    function deleteData(){
+    function deleteData() {
         axios.delete(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`,
         )
             .then((response) => {
@@ -74,12 +84,12 @@ const UserMaintainPage = () => {
         setEditedGroupData(groupData);
     }
 
-    function updateGroupMember(groupMember){
+    function updateGroupMember(groupMember) {
         setGroupMember(groupMember.currentList);
         setDeletedUserList(groupMember.deletedList);
     }
 
-    function updateUserAuthList(userAuthData){
+    function updateUserAuthList(userAuthData) {
         setUserAuthData(userAuthData.currentList);
         setDeletedAuthList(userAuthData.deletedList);
     }
@@ -90,7 +100,7 @@ const UserMaintainPage = () => {
     }
 
     useEffect(() => {
-        if(params.id > 0 ){
+        if (params.id > 0) {
             axios.get(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`)
                 .then((response) => {
                     if (response.status === 200) {
@@ -102,7 +112,7 @@ const UserMaintainPage = () => {
                     return false;
                 });
         }
-        else{
+        else {
             //new record case
             setUserGroupData(
                 {
@@ -120,19 +130,19 @@ const UserMaintainPage = () => {
         if (Object.keys(userGroupData).length > 0 && userGroupData !== undefined) {
             setOnReady(true);
         }
-        else if(isNewRecord){
+        else if (isNewRecord) {
             setOnReady(true);
         }
     }, [userGroupData]);
 
     useEffect(() => {
-        if(userConfirm && onReady){
+        if (userConfirm && onReady) {
             //avoid delete and add user at the same time
             let finalDeletedUserList = getDeletedRecordWithRefList(deletedUserList, getIdList(groupMember));
             console.log(finalDeletedUserList)
             axios.post(POST_AND_UPDATE_USER_GROUP,
                 {
-                    "id": parseInt(params.id) !== -1? parseInt(params.id) : null,
+                    "id": parseInt(params.id) !== -1 ? parseInt(params.id) : null,
                     "name": editedGroupData.userGroupName,
                     "description": editedGroupData.description,
                     "addUserIds": getIdList(groupMember),
@@ -153,52 +163,68 @@ const UserMaintainPage = () => {
                 });
         }
         setUserConfirm(false);
-    }, [editedGroupData,userGroupData,userAuthData]);
+    }, [editedGroupData, userGroupData, userAuthData]);
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">{isNewRecord? "Create User Group" : "Maintain User Group"}</Typography>
+            <Grid container>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">{isNewRecord ? "Create User Group" : "Maintain User Group"}</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                <Grid item xs={12}>
+                    <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/usergroupSearchview") }}>
+                        <KeyboardBackspaceOutlinedIcon />
+                        <Typography variant="h4">Back</Typography>
+                    </Button>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} md={5} lg={5}>
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <UserGroupInfoCard
-                                updateGroupObject={updateGroupObject}
-                                userGroupData={userGroupData}
-                                isCollectData={isCollectData}
-                                isNewRecord={isNewRecord}
-                            />
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserGroupInfoCard
+                                    updateGroupObject={updateGroupObject}
+                                    userGroupData={userGroupData}
+                                    isCollectData={isCollectData}
+                                    isNewRecord={isNewRecord}
+                                />
+                            </Box>
                         </Grid>
 
-                        <Grid item xs={12} md={12} lg={12} sx={{mt:3}}>
-                            <UserAddCard
-                                updateGroupMember={updateGroupMember}
-                                userGroupData={userGroupData}
-                                isCollectData={isCollectData}
-                                isNewRecord={isNewRecord}
-                            />
+                        <Grid item xs={12} md={12} lg={12} sx={{ mt: 3 }}>
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserAddCard
+                                    updateGroupMember={updateGroupMember}
+                                    userGroupData={userGroupData}
+                                    isCollectData={isCollectData}
+                                    isNewRecord={isNewRecord}
+                                />
+                            </Box>
                         </Grid>
                     </Grid>
                 </Grid>
                 {/*col 2*/}
                 <Grid item xs={12} md={7} lg={7}>
-                    <GroupAuthCard
-                        updateUserAuthList={updateUserAuthList}
-                        userGroupData={userGroupData}
-                        isCollectData={isCollectData}
-                        isNewRecord={isNewRecord}
-                    />
+                    <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                        <GroupAuthCard
+                            updateUserAuthList={updateUserAuthList}
+                            userGroupData={userGroupData}
+                            isCollectData={isCollectData}
+                            isNewRecord={isNewRecord}
+                        />
+                    </Box>
                 </Grid>
 
                 {/*bottom button*/}
-                <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center">
+                <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"end"} justifyContent="center">
                     <Grid container maxWidth justifyContent="flex-end">
-                        <Grid item sx={{ml:3, mr:3, mb:3}}>
+                        <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"
@@ -220,7 +246,7 @@ const UserMaintainPage = () => {
                             />
                         </Grid>
 
-                        <Grid item sx={{ml: 3, mr: 3}}>
+                        <Grid item sx={{ ml: 3, mr: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"
diff --git a/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js b/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
index 4e399b9..73d9712 100644
--- a/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
+++ b/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
@@ -63,13 +63,11 @@ const UserGroupSearchForm = ({applySearch}) => {
                     </Grid>
                 </Grid>
 
-
                 {/*last row*/}
                 <Grid container direction="row"
                     justifyContent="space-between"
                     alignItems="center">
-                       
-                    <Grid item xs={3} md={3} sx={{ml:1, mr:1, mb:3, mt:3}}>
+                    <Grid item xs={3} md={3} sx={{ ml: 3, mr: 1, mb: 3, mt: 3 }}>
                         <Button
                             size="large"
                             variant="contained"
@@ -83,7 +81,7 @@ const UserGroupSearchForm = ({applySearch}) => {
                         </Button>
                     </Grid>
                     <Grid item xs={8} md={8} sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Grid container >
+                        <Grid container maxWidth justifyContent="flex-end">
                             <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
                                 <Button
                                     size="large"
diff --git a/src/pages/pnspsUserGroupSearchPage/index.js b/src/pages/pnspsUserGroupSearchPage/index.js
index c7a9dbd..59d2222 100644
--- a/src/pages/pnspsUserGroupSearchPage/index.js
+++ b/src/pages/pnspsUserGroupSearchPage/index.js
@@ -6,10 +6,10 @@ import {
     Grid, Typography
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import axios from "axios";
-import {apiPath} from "../../auth/utils";
-import {GET_GROUP_LIST_PATH} from "../../utils/ApiPathConst";
+import { apiPath } from "../../auth/utils";
+import { GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";
 import * as React from "react";
 
 //import LoadingComponent from "../extra-pages/LoadingComponent";
@@ -21,7 +21,17 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 const UserGroupSearchForm = Loadable(lazy(() => import('./UserGroupSearchForm')));
 const UserGroupTable = Loadable(lazy(() => import('./UserGroupTable')));
 // import {useNavigate} from "react-router";
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserGroupSearchPanel = () => {
@@ -44,7 +54,7 @@ const UserGroupSearchPanel = () => {
 
     function getGroupList() {
         axios.get(`${apiPath}${GET_GROUP_LIST_PATH}`,
-            {params: searchCriteria}
+            { params: searchCriteria }
         )
             .then((response) => {
                 if (response.status === 200) {
@@ -63,28 +73,26 @@ const UserGroupSearchPanel = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
-                <Grid item xs={12} md={12} lg={12}>
-                    <Grid direction="row" container justifyContent="flex-start" alignItems="center" ml={2}>
-                        <Grid item xs={2} height='50px'>
-                            <Stack direction="row" height='100%' justifyContent="space-between" alignItems="center">
-                                <Typography align="center" variant="h5">View User Group</Typography>
-                            </Stack>
-                        </Grid>
-                    </Grid>
+            <Grid container sx={{ minHeight: '90vh'}} direction="column">
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">View User Group</Typography>
+                        </Stack>
+                    </div>
                 </Grid>
 
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12}>
-                    <UserGroupSearchForm applySearch={applySearch}/>
+                    <UserGroupSearchForm applySearch={applySearch} />
                 </Grid>
                 {/*row 2*/}
                 <Grid item xs={12} md={12} lg={12}>
                     <MainCard elevation={0}
-                              border={false}
-                              content={false}
+                        border={false}
+                        content={false}
                     >
                         <UserGroupTable
                             recordList={record}
diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js
index 1346f0b..eaa9b94 100644
--- a/src/routes/PublicUserRoutes.js
+++ b/src/routes/PublicUserRoutes.js
@@ -16,6 +16,8 @@ const ProofSearch = Loadable(lazy(() => import('pages/Proof/Search_Public')));
 const ProofPayment = Loadable(lazy(() => import('pages/Proof/Payment')));
 const Payment_Multi = Loadable(lazy(() => import('pages/Payment')));
 const Payment_FPS = Loadable(lazy(() => import('pages/Payment/FPS')));
+const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback')));
+const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPage')));
 const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card')));
 const Payment_Success = Loadable(lazy(() => import('pages/Payment/PaymentSuccess')));
 
@@ -80,6 +82,14 @@ const PublicDashboard = {
           path: 'payment/success',
           element: <Payment_Success/>
         },
+        {
+          path: 'payment/fps/fpscallback',
+          element: <Payment_FPS_CallBack/>
+        },
+        {
+          path: 'payment/fps/ackpage',
+          element: <Payment_FPS_Ackpage/>
+        },
       ]
     },
   ]