diff --git a/src/pages/ManageOrgUserPage/index.js b/src/pages/ManageOrgUserPage/index.js
index 826d1b5..e82473b 100644
--- a/src/pages/ManageOrgUserPage/index.js
+++ b/src/pages/ManageOrgUserPage/index.js
@@ -160,7 +160,7 @@ const ManageOrgUserPage = () => {
                     },
                 }}
                 pageSizeOptions={[5, 10]}
-                autoHeight = {true}
+                autoHeight 
             />
             </Grid>
             </Grid>
diff --git a/src/pages/OrganizationSearchPage/OrganizationTable.js b/src/pages/OrganizationSearchPage/OrganizationTable.js
index 2253f0d..24b8c55 100644
--- a/src/pages/OrganizationSearchPage/OrganizationTable.js
+++ b/src/pages/OrganizationSearchPage/OrganizationTable.js
@@ -86,7 +86,7 @@ export default function OrganizationTable({recordList}) {
                     },
                 }}
                 pageSizeOptions={[5, 10]}
-                autoHeight = {true}
+                autoHeight 
             />
         </div>
     );
diff --git a/src/pages/pnspsUserDetailPage/UserAuthTable.js b/src/pages/pnspsUserDetailPage/UserAuthTable.js
index 9bf2a9b..8a92d15 100644
--- a/src/pages/pnspsUserDetailPage/UserAuthTable.js
+++ b/src/pages/pnspsUserDetailPage/UserAuthTable.js
@@ -73,11 +73,11 @@ export default function UserAuthTable({setSelectedRow, userAuth}) {
                     checkboxSelection
                     rowSelectionModel={currentSelectedRow}
                     onRowSelectionModelChange={(ids) => {
-                        console.log(ids);
+                        // console.log(ids);
                         setSelectedRow(ids);
                         setCurrentSelectedRow(ids);
                     }}
-                    autoHeight = {true}
+                    autoHeight
                 />
             </div>
     );
diff --git a/src/pages/pnspsUserDetailPage/UserGroupTable.js b/src/pages/pnspsUserDetailPage/UserGroupTable.js
index e5db51c..b3ac9c8 100644
--- a/src/pages/pnspsUserDetailPage/UserGroupTable.js
+++ b/src/pages/pnspsUserDetailPage/UserGroupTable.js
@@ -5,10 +5,8 @@ import {
 import {useEffect, useState} from "react";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
-//import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as React from "react";
 import {GET_GROUP_COMBO_PATH} from "../../utils/ApiPathConst";
-
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
@@ -35,8 +33,7 @@ export default function UserGroupTable({setSelectedRow, userGroup}) {
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        console.log(groupData.length)
-        if (groupData !== "" && groupData !== undefined) {
+        if (groupData.length > 0) {
             setOnReady(true);
         }
     }, [groupData]);
@@ -73,7 +70,7 @@ export default function UserGroupTable({setSelectedRow, userGroup}) {
                         setSelectedRow(ids);
                         setCurrentSelectedRow(ids);
                     }}
-                    autoHeight = {true}
+                    autoHeight
                 />
             </div>
     );
diff --git a/src/pages/pnspsUserDetailPage/UserInformationCard.js b/src/pages/pnspsUserDetailPage/UserInformationCard.js
index 1c88171..01baee3 100644
--- a/src/pages/pnspsUserDetailPage/UserInformationCard.js
+++ b/src/pages/pnspsUserDetailPage/UserInformationCard.js
@@ -1,82 +1,32 @@
 // material-ui
 import {
-    Grid, TextField, Typography
+    FormControl, IconButton,
+    Grid, InputAdornment, Typography, FormLabel,
+    OutlinedInput,
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 import * as React from "react";
 import {useForm} from "react-hook-form";
-// import Autocomplete from "@mui/material/Autocomplete";
-// import {
-//     subDivision1,
-//     subDivision2,
-//     subDivision3,
-//     subDivision4,
-//     subDivision5,
-//     subDivision6
-// } from "../pnspsUserSearchPage/DummyComboRecord";
 import {useEffect, useState} from "react";
 import Checkbox from "@mui/material/Checkbox";
-//import LoadingComponent from "../extra-pages/LoadingComponent";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
 //import {useParams} from "react-router-dom";
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-
-
-// const subDivisionArray = [
-//     ...subDivision1,
-//     ...subDivision2,
-//     ...subDivision3,
-//     ...subDivision4,
-//     ...subDivision5,
-//     ...subDivision6
-// ];
-
-
-const UserInformationCard = ({isCollectData, updateUserObject,userData}) => {
+const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewRecord}) => {
     //const params = useParams();
     const [currentUserData, setCurrentUserData] = React.useState({});
-    // const [subDivision, setSubDivision] = useState(null);
     const [locked, setLocked] = useState(false);
-    // const [isLotusNoteUser, setIsLotusNoteUser] = useState(false);
-    // const [lotusNoteUserList, setLotusNoteUserList] = useState([])
-    // const [selectedLotusUser, setSelectedLotusUser] = useState(null);
-
+    const [showPassword, setShowPassword] = React.useState(false);
     const [onReady, setOnReady] = useState(false);
     const {register, getValues} = useForm()
 
-    // useEffect(() => {
-    //     //TODO: Get lotus note user list
-    //     setLotusNoteUserList([
-    //         {
-    //             key: 1,
-    //             label: "user01",
-    //             account: "user123456"
-    //         },
-    //         {
-    //             key: 2,
-    //             label: "user02",
-    //             account: "userabcde1"
-    //         },
-    //         {
-    //             key: 3,
-    //             label: "user03",
-    //             account: "user2001"
-    //         },
-    //         {
-    //             key: 4,
-    //             label: "user04",
-    //             account: "user2000"
-    //         },
-    //         {
-    //             key: 5,
-    //             label: "user05",
-    //             account: "user1999"
-    //         },
-    //     ])
-    // }, []);
+    const handleClickShowPassword = () => setShowPassword((show) => !show);
+    const handleMouseDownPassword = () => setShowPassword(!showPassword);
 
     useEffect(() => {
         //if user data from parent are not null
@@ -87,9 +37,12 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => {
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        if (Object.keys(userData).length > 0 &&currentUserData !== undefined) {
+        if (Object.keys(userData).length > 0 &&currentUserData !== undefined&&currentUserData.id!==undefined) {
             setLocked(currentUserData.locked);
             setOnReady(true);
+        }else if(isNewRecord){
+            setLocked(false);
+            setOnReady(true);
         }
     }, [currentUserData]);
 
@@ -98,8 +51,6 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => {
         const values = getValues();
         const objectData ={
             ...values,
-            // selectedLotusUser: selectedLotusUser,
-            // subDivision: subDivision,
             locked: locked,
         }
         updateUserObject(objectData);
@@ -120,25 +71,28 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => {
 
 
                 <form>
-
                     <Grid container>
                         <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, display: 'flex', alignItems: 'center'}}>
-                                    Username:
+                                    <FormLabel required>Username:</FormLabel>
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("userName",
-                                            {
-                                                value: currentUserData.username,
-                                            })}
-                                        id='username'
-                                        disabled
-                                    />
+                                    <FormControl variant="outlined" fullWidth required>
+                                        <OutlinedInput
+                                            required
+                                            fullWidth
+                                            size="small"
+                                            {...register("username",
+                                                {
+                                                    value: currentUserData.username,
+                                                })}
+                                            id='username'
+                                            disabled={!isNewRecord}
+                                        />
+                                    </FormControl>
                                 </Grid>
                             </Grid>
                         </Grid>
@@ -151,12 +105,28 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => {
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("password")}
-                                        id='password'
-                                        disabled
-                                    />
+                                    <FormControl variant="outlined" fullWidth required>
+                                        <OutlinedInput
+                                            fullWidth
+                                            size="small"
+                                            {...register("password")}
+                                            id='password'
+                                            type={showPassword ? 'text' : 'password'}
+                                            disabled
+                                            endAdornment={
+                                                <InputAdornment position="end">
+                                                    <IconButton
+                                                        aria-label="toggle password visibility"
+                                                        onClick={handleClickShowPassword}
+                                                        onMouseDown={handleMouseDownPassword}
+                                                        edge="end"
+                                                    >
+                                                        {showPassword ? <VisibilityOff /> : <Visibility />}
+                                                    </IconButton>
+                                                </InputAdornment>
+                                            }
+                                        />
+                                    </FormControl>
                                 </Grid>
                             </Grid>
                         </Grid>
@@ -165,18 +135,30 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => {
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Full Name:
+                                    <FormLabel required >Full Name:</FormLabel>
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
+                                    {/* <TextField
                                         fullWidth
-                                        {...register("fullenName",
+                                        {...register("enName",
                                             {
-                                                value: currentUserData.fullenName,
+                                                value: currentUserData.enName,
                                             })}
-                                        id='fullenName'
-                                    />
+                                        id='enName'
+                                    /> */}
+                                    <FormControl variant="outlined" fullWidth required>
+                                        <OutlinedInput
+                                            required
+                                            fullWidth
+                                            size="small"
+                                            {...register("enName",
+                                                {
+                                                    value: currentUserData.enName,
+                                                })}
+                                            id='enName'
+                                        />
+                                    </FormControl>
                                 </Grid>
                             </Grid>
                         </Grid>
@@ -185,89 +167,76 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => {
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Post:
+                                    <FormLabel>Post:</FormLabel>
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("post",
-                                            {
-                                                value: currentUserData.post,
-                                            })}
-                                        id='post'
-                                    />
+                                    <FormControl variant="outlined" fullWidth required>
+                                        <OutlinedInput
+                                            fullWidth
+                                            size="small"
+                                            {...register("post",
+                                                {
+                                                    value: currentUserData.post,
+                                                })}
+                                            id='post'
+                                        />
+                                    </FormControl>
                                 </Grid>
                             </Grid>
                         </Grid>
 
-                        {/* <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, display: 'flex', alignItems: 'center'}}>
-                                    Sub-Division:
-                                </Grid>
-
-                                <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <Autocomplete
-                                        disablePortal
-                                        id="sub-division-combo"
-                                        value={subDivision === null ? null : subDivision}
-                                        options={subDivisionArray}
-                                        onChange={(event, newValue) => {
-                                            setSubDivision(newValue);
-                                        }}
-                                        renderInput={(params) => <TextField {...params} />}
-                                    />
-                                </Grid>
-                            </Grid>
-                        </Grid> */}
-
                         <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, display: 'flex', alignItems: 'center'}}>
-                                    Email:
+                                    <FormLabel required>Email:</FormLabel>
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("email",
-                                            {
-                                                value: currentUserData.email,
-                                            })}
-                                        id='email'
-                                    />
+                                    <FormControl variant="outlined" fullWidth required>
+                                        <OutlinedInput
+                                            fullWidth
+                                            size="small"
+                                            {...register("emailAddress",
+                                                {
+                                                    value: currentUserData.emailAddress,
+                                                })}
+                                            id='emailAddress'
+                                        />
+                                    </FormControl>
                                 </Grid>
                             </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, display: 'flex', alignItems: 'center'}}>
-                                    Phone:
+                                    <FormLabel>Phone:</FormLabel>
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("phone1",
-                                            {
-                                                value: currentUserData.phone1,
-                                            })}
-                                        id='phone1'
-                                    />
+                                <FormControl variant="outlined" fullWidth required>
+                                        <OutlinedInput
+                                            fullWidth
+                                            size="small"
+                                            {...register("phone",
+                                                {
+                                                    value: currentUserData.phone,
+                                                })}
+                                            id='phone'
+                                        />
+                                    </FormControl>
                                 </Grid>
                             </Grid>
-                        </Grid>
+                        </Grid> */}
 
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                             <Grid container>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Locked:
+                                    <FormLabel required>Locked:</FormLabel>
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
diff --git a/src/pages/pnspsUserDetailPage/index.js b/src/pages/pnspsUserDetailPage/index.js
index ec74398..4fc4523 100644
--- a/src/pages/pnspsUserDetailPage/index.js
+++ b/src/pages/pnspsUserDetailPage/index.js
@@ -1,14 +1,15 @@
 // material-ui
 import {
     Button,
-    Grid, Typography
+    Grid, 
+    Typography,
+    Stack
 } from '@mui/material';
 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 {GET_USER_PATH} from "../../utils/ApiPathConst";
+import {useNavigate,useParams} from "react-router-dom";
+import {GLD_USER_PATH,DELETE_USER} from "../../utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -16,16 +17,17 @@ const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard'))
 const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
 const UserGroupCard = Loadable(lazy(() => import('./UserGroupCard')));
 const UserAuthorityCard = Loadable(lazy(() => import('./UserAuthorityCard')));
-// import UserInformationCard from "./UserInformationCard";
-// import LoadingComponent from "../extra-pages/LoadingComponent";
-// import UserGroupCard from "./UserGroupCard";
-// import UserAuthorityCard from "./UserAuthorityCard";
+import {
+    GeneralConfirmWindow,
+    getDeletedRecordWithRefList,
+} from "../../utils/CommonFunction";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const UserMaintainPage = () => {
     const params = useParams();
+    const navigate = useNavigate();
     const [userData, setUserData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [isCollectData, setIsCollectData] = useState(false);
@@ -33,6 +35,9 @@ const UserMaintainPage = () => {
     const [userGroupData,setUserGroupData] = useState([]);
     const [userAuthData,setUserAuthData] = useState([]);
     const [userConfirm, setUserConfirm] = useState(false);
+    const [isNewRecord, setIsNewRecord] = useState(false);
+    const [refUserData, setRefUserData] = React.useState({});
+
 
     function updateUserObject(userData) {
         setEditedCustomerData(userData);
@@ -51,30 +56,103 @@ const UserMaintainPage = () => {
         setIsCollectData(!isCollectData);
     }
 
-    useEffect(() => {
-        console.log(params)
-        axios.get(`${apiPath}${GET_USER_PATH}/${params.id}`)
+    // ==============================|| DELETE WINDOW RELATED ||============================== //
+    const [isWindowOpen, setIsWindowOpen] = useState(false);
+    const handleClose = () => {
+        setIsWindowOpen(false);
+    };
+
+    const handleDeleteClick = () => {
+        setIsWindowOpen(true);
+    };
+
+    function deleteData(){
+        axios.delete(`${DELETE_USER}/${params.id}`,
+        )
             .then((response) => {
-                if (response.status === 200) {
-                    setUserData(response.data);
+                if (response.status === 204) {
+                    // notifyDeleteSuccess();
+                    setIsWindowOpen(false);
+                    navigate('/userSearchview');
                 }
             })
             .catch(error => {
                 console.log(error);
                 return false;
             });
+    }
+// ==============================|| DELETE WINDOW RELATED ||============================== //
+
+    useEffect(() => {
+        if(params.id > 0 ){
+            axios.get(`${GLD_USER_PATH}/${params.id}`)
+                .then((response) => {
+                    if (response.status === 200) {
+                        setRefUserData(response.data);
+                        setUserData(response.data);
+                    }
+                })
+                .catch(error => {
+                    console.log(error);
+                    return false;
+                });
+        }
+        else{
+            setUserData(
+                {
+                    "authIds": [],
+                    "data": {},
+                    "groupIds": []
+                }
+            );
+            setRefUserData(
+                {
+                    "authIds": [],
+                    "data": {},
+                    "groupIds": []
+                }
+            );
+            setIsNewRecord(true);
+        }
+
     }, []);
 
     useEffect(() => {
-        setOnReady(true);
+        if (Object.keys(userData).length > 0 && userData !== undefined) {
+            setOnReady(true);
+        }
+        else if(isNewRecord){
+            setOnReady(true);
+        }
     }, [userData]);
 
     useEffect(() => {
         if(userConfirm && onReady){
-            console.log("update in parents");
-            console.log(editedCustomerData);
-            console.log(userGroupData);
-            console.log(userAuthData);
+            const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds,userAuthData);
+            const deletedUserGroup = getDeletedRecordWithRefList(refUserData.groupIds,userGroupData);
+            axios.post(`${GLD_USER_PATH}/${params.id}`,
+                {
+                    "enName": editedCustomerData.enName,
+                    "locked": editedCustomerData.locked,
+                    // "password": editedCustomerData.password,
+                    // "phone": editedCustomerData.phone,
+                    "post": editedCustomerData.post,
+                    "emailAddress": editedCustomerData.emailAddress,
+                    "addGroupIds": userGroupData,
+                    "removeGroupIds": deletedUserGroup,
+                    "addAuthIds": userAuthData,
+                    "removeAuthIds": deletedUserAuth,
+                },
+            ).then((response) => {
+                if (response.status === 200) {
+                    // notifySaveSuccess();
+                    navigate('/userSearchview');
+                }
+            })
+                .catch(error => {
+                    console.log(error);
+                    return false;
+                });
         }
         setUserConfirm(false);
     }, [editedCustomerData,userGroupData,userAuthData]);
@@ -83,9 +161,11 @@ const UserMaintainPage = () => {
         !onReady ?
             <LoadingComponent/>
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">Maintain User</Typography>
+            <Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
+                <Grid item xs={12} height='60px'>
+                    <Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center">
+                        <Typography variant="h5">Maintain User</Typography>
+                    </Stack>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} md={5} lg={5}>
@@ -95,6 +175,7 @@ const UserMaintainPage = () => {
                                 updateUserObject={updateUserObject}
                                 userData={userData}
                                 isCollectData={isCollectData}
+                                isNewRecord={isNewRecord}
                             />
                         </Grid>
 
@@ -103,6 +184,7 @@ const UserMaintainPage = () => {
                                 updateUserGroupList={updateUserGroupList}
                                 userData={userData}
                                 isCollectData={isCollectData}
+                                isNewRecord={isNewRecord}
                             />
                         </Grid>
                     </Grid>
@@ -113,12 +195,35 @@ const UserMaintainPage = () => {
                         updateUserAuthList={updateUserAuthList}
                         userData={userData}
                         isCollectData={isCollectData}
+                        isNewRecord={isNewRecord}
                     />
                 </Grid>
 
                 {/*bottom button*/}
                 <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}}>
+                            <Button
+                                size="large"
+                                variant="contained"
+                                sx={{
+                                    textTransform: 'capitalize',
+                                    alignItems: 'end'
+                                }}
+                                disabled={isNewRecord}
+                                onClick={handleDeleteClick}
+                            >
+                                Delete User
+                            </Button>
+                            <GeneralConfirmWindow
+                                isWindowOpen={isWindowOpen}
+                                title={"Attention"}
+                                content={`Confirm to delete User "${userData.data.username}" ?`}
+                                onNormalClose={handleClose}
+                                onConfirmClose={deleteData}
+                            />
+                        </Grid>
+
                         <Grid item sx={{ml: 3, mr: 3}}>
                             <Button
                                 size="large"
diff --git a/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js b/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js
index 3be32de..4e94f55 100644
--- a/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js
+++ b/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js
@@ -19,12 +19,14 @@ const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData}) => {
     const [currentAuthData, setCurrentAuthData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [selectedRow, setSelectedRow] = useState([]);
+    const [referenceRow, setReferenceRow] = useState([]);
 
     useEffect(() => {
         //if user data from parent are not null
         if (Object.keys(userGroupData).length > 0 && userGroupData !== undefined) {
             setCurrentAuthData(userGroupData.data);
             setSelectedRow(userGroupData.authIds);
+            setReferenceRow(userGroupData.authIds);
         }
     }, [userGroupData]);
 
@@ -37,7 +39,11 @@ const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData}) => {
 
     useEffect(() => {
         //upload latest data to parent
-        updateUserAuthList(selectedRow);
+        let deletedList = referenceRow.filter(x => !selectedRow.includes(x));
+        updateUserAuthList({
+            "currentList": selectedRow,
+            "deletedList": deletedList
+        });
     }, [isCollectData]);
 
 
diff --git a/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js b/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js
index 63070fb..93c13c0 100644
--- a/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js
+++ b/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js
@@ -73,11 +73,11 @@ export default function GroupAuthTable({setSelectedRow, userAuth}) {
                     checkboxSelection
                     rowSelectionModel={currentSelectedRow}
                     onRowSelectionModelChange={(ids) => {
-                        console.log(ids);
+                        // console.log(ids);
                         setSelectedRow(ids);
                         setCurrentSelectedRow(ids);
                     }}
-                    autoHeight = {true}
+                    autoHeight 
                 />
             </div>
     );
diff --git a/src/pages/pnspsUserGroupDetailPage/UserAddCard.js b/src/pages/pnspsUserGroupDetailPage/UserAddCard.js
index e94961e..de144dc 100644
--- a/src/pages/pnspsUserGroupDetailPage/UserAddCard.js
+++ b/src/pages/pnspsUserGroupDetailPage/UserAddCard.js
@@ -23,19 +23,22 @@ const UserAddTable = Loadable(lazy(() => import('./UserAddTable')));
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserAddCard = ({isCollectData, updateGroupMember,userGroupData}) => {
+const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord}) => {
     const [currentUserData, setCurrentUserData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [groupUserData, setGroupUserData] = useState([]);
     const [userComboList, setUserComboList] = useState([]);
     const [selectedUser, setSelectedUser] = useState(null);
+    const [deletedList, setDeletedList] = useState([]);
 
     function updateUserList (){
         const idList = getIdList(groupUserData);
-        if(!idList.includes(selectedUser.id)){
-            const userList = [...groupUserData, selectedUser];
-            setGroupUserData(userList);
-            console.log(userList);
+        if(selectedUser!==null){
+            if(!idList.includes(selectedUser.id)){
+                const userList = [...groupUserData, selectedUser];
+                setGroupUserData(userList);
+                console.log(userList);
+            }
         }
     }
 
@@ -61,24 +64,32 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData}) => {
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        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) {
-                        setGroupUserData(response.data.records);
-                    }
-                    setOnReady(true);
-                })
-                .catch(error => {
-                    console.log(error);
-                    return false;
-                });
+        if(isNewRecord){
+            setOnReady(true);
+        }
+        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) {
+                            setGroupUserData(response.data.records);
+                        }
+                        setOnReady(true);
+                    })
+                    .catch(error => {
+                        console.log(error);
+                        return false;
+                    });
+            }
         }
     }, [currentUserData]);
 
     useEffect(() => {
         //upload latest data to parent
-        updateGroupMember(groupUserData);
+        updateGroupMember({
+            "currentList" : groupUserData,
+            "deletedList" : deletedList
+        });
     }, [isCollectData]);
 
 
@@ -131,6 +142,7 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData}) => {
 
                 <UserAddTable
                     setGroupUserData={setGroupUserData}
+                    setDeletedList={setDeletedList}
                     userList={groupUserData}
                 />
             </MainCard>
diff --git a/src/pages/pnspsUserGroupDetailPage/UserAddTable.js b/src/pages/pnspsUserGroupDetailPage/UserAddTable.js
index c0d4e26..d943755 100644
--- a/src/pages/pnspsUserGroupDetailPage/UserAddTable.js
+++ b/src/pages/pnspsUserGroupDetailPage/UserAddTable.js
@@ -14,9 +14,10 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserAddTable({setGroupUserData, userList}) {
+export default function UserAddTable({setGroupUserData, userList,setDeletedList}) {
     const [groupData, setGroupData] = useState([]);
     const [onReady, setOnReady] = useState(false);
+    const [localDeletedList, setLocalDeletedList] = React.useState([]);
 
     useEffect(() => {
         setGroupData(userList);
@@ -26,6 +27,10 @@ export default function UserAddTable({setGroupUserData, userList}) {
         setGroupData(userList);
     }, [userList]);
 
+    useEffect(() => {
+        setDeletedList(localDeletedList);
+    }, [localDeletedList]);
+
     useEffect(() => {
         //if state data are ready and assign to different field
         if (groupData !== undefined) {
@@ -34,11 +39,18 @@ export default function UserAddTable({setGroupUserData, userList}) {
     }, [groupData]);
 
     const handleDeleteClick = (id) => () => {
+        if(id >0){
+            const temp = [...localDeletedList, id];
+            console.log("temp here");
+            console.log(temp);
+            setLocalDeletedList(temp);
+        }
         const newList =removeObjectWithId(groupData,id)
         setGroupUserData(newList);
         setGroupData(newList);
     };
 
+
     const columns = [
         {
             field: 'actions',
@@ -64,12 +76,6 @@ export default function UserAddTable({setGroupUserData, userList}) {
             headerName: 'User',
             flex: 1,
         },
-        // {
-        //     id: 'subDiv',
-        //     field: 'subDivisionName',
-        //     headerName: 'Sub-Division',
-        //     flex: 1,
-        // },
     ];
 
     return (
diff --git a/src/pages/pnspsUserGroupDetailPage/index.js b/src/pages/pnspsUserGroupDetailPage/index.js
index db9049d..a7d9f4a 100644
--- a/src/pages/pnspsUserGroupDetailPage/index.js
+++ b/src/pages/pnspsUserGroupDetailPage/index.js
@@ -8,8 +8,14 @@ import * as React from "react";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
 import {useParams} from "react-router-dom";
-import {getIdList} from "../../utils/CommonFunction";
-import {GET_GROUP_LIST_PATH} from "../../utils/ApiPathConst";
+import {
+    GeneralConfirmWindow,
+    getDeletedRecordWithRefList,
+    getIdList,
+    notifyDeleteSuccess,
+    // notifySaveSuccess
+} from "../../utils/CommonFunction";
+import {POST_AND_UPDATE_USER_GROUP,GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -17,10 +23,8 @@ 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 LoadingComponent from "../extra-pages/LoadingComponent";
-//import GroupAuthCard from "./GroupAuthCard";
-//import UserGroupInfoCard from "./UserGroupInfoCard";
-//import UserAddCard from "./UserAddCard";
+import {useNavigate} from "react-router";
+
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -28,6 +32,7 @@ const UserAddCard = Loadable(lazy(() => import('./UserAddCard')));
 
 const UserMaintainPage = () => {
     const params = useParams();
+    const navigate = useNavigate();
     const [onReady, setOnReady] = useState(false);
     const [isCollectData, setIsCollectData] = useState(false);
     const [editedGroupData, setEditedGroupData] = useState({});
@@ -35,17 +40,47 @@ const UserMaintainPage = () => {
     const [userAuthData,setUserAuthData] = useState([]);
     const [userConfirm, setUserConfirm] = useState(false);
     const [groupMember, setGroupMember] = useState([]);
+    const [isNewRecord, setIsNewRecord] = useState(false);
+    const [deletedUserList, setDeletedUserList] = React.useState([]);
+    const [deletedAuthList, setDeletedAuthList] = React.useState([]);
+
+    const [isWindowOpen, setIsWindowOpen] = React.useState(false);
+    const handleClose = () => {
+        setIsWindowOpen(false);
+    };
+
+    const handleDeleteClick = () => {
+        setIsWindowOpen(true);
+    };
+
+    function deleteData(){
+        axios.delete(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`,
+        )
+            .then((response) => {
+                if (response.status === 204) {
+                    notifyDeleteSuccess();
+                    setIsWindowOpen(false);
+                    navigate('/usergroupSearchview');
+                }
+            })
+            .catch(error => {
+                console.log(error);
+                return false;
+            });
+    }
 
     function updateGroupObject(groupData) {
         setEditedGroupData(groupData);
     }
 
     function updateGroupMember(groupMember){
-        setGroupMember(groupMember);
+        setGroupMember(groupMember.currentList);
+        setDeletedUserList(groupMember.deletedList);
     }
 
     function updateUserAuthList(userAuthData){
-        setUserAuthData(userAuthData);
+        setUserAuthData(userAuthData.currentList);
+        setDeletedAuthList(userAuthData.deletedList);
     }
 
     const submitData = () => {
@@ -54,30 +89,67 @@ const UserMaintainPage = () => {
     }
 
     useEffect(() => {
-        axios.get(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`)
-            .then((response) => {
-                if (response.status === 200) {
-                    setUserGroupData(response.data);
+        if(params.id > 0 ){
+            axios.get(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`)
+                .then((response) => {
+                    if (response.status === 200) {
+                        setUserGroupData(response.data);
+                    }
+                })
+                .catch(error => {
+                    console.log(error);
+                    return false;
+                });
+        }
+        else{
+            //new record case
+            setUserGroupData(
+                {
+                    "authIds": [],
+                    "data": {},
+                    "userIds": []
                 }
-            })
-            .catch(error => {
-                console.log(error);
-                return false;
-            });
+            );
+            setIsNewRecord(true);
+        }
+
     }, []);
 
     useEffect(() => {
-        console.log(userGroupData);
-        setOnReady(true);
+        if (Object.keys(userGroupData).length > 0 && userGroupData !== undefined) {
+            setOnReady(true);
+        }
+        else if(isNewRecord){
+            setOnReady(true);
+        }
     }, [userGroupData]);
 
     useEffect(() => {
         if(userConfirm && onReady){
-            console.log("update in parents");
-            console.log(editedGroupData);
-            console.log(groupMember);
-            console.log(getIdList(groupMember));
-            console.log(userAuthData);
+            //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,
+                    "name": editedGroupData.userGroupName,
+                    "description": editedGroupData.description,
+                    "addUserIds": getIdList(groupMember),
+                    "removeUserIds": finalDeletedUserList,
+                    "addAuthIds": userAuthData,
+                    "removeAuthIds": deletedAuthList,
+                },
+            )
+                .then((response) => {
+                    if (response.status === 200) {
+                        // notifySaveSuccess();
+                        navigate('/usergroupSearchview');
+                    }
+                })
+                .catch(error => {
+                    console.log(error);
+                    return false;
+                });
         }
         setUserConfirm(false);
     }, [editedGroupData,userGroupData,userAuthData]);
@@ -88,7 +160,7 @@ const UserMaintainPage = () => {
             :
             <Grid container rowSpacing={4.5} columnSpacing={2.75}>
                 <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">Maintain User Group</Typography>
+                    <Typography variant="h5">{isNewRecord? "Create User Group" : "Maintain User Group"}</Typography>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} md={5} lg={5}>
@@ -98,6 +170,7 @@ const UserMaintainPage = () => {
                                 updateGroupObject={updateGroupObject}
                                 userGroupData={userGroupData}
                                 isCollectData={isCollectData}
+                                isNewRecord={isNewRecord}
                             />
                         </Grid>
 
@@ -106,6 +179,7 @@ const UserMaintainPage = () => {
                                 updateGroupMember={updateGroupMember}
                                 userGroupData={userGroupData}
                                 isCollectData={isCollectData}
+                                isNewRecord={isNewRecord}
                             />
                         </Grid>
                     </Grid>
@@ -116,12 +190,35 @@ const UserMaintainPage = () => {
                         updateUserAuthList={updateUserAuthList}
                         userGroupData={userGroupData}
                         isCollectData={isCollectData}
+                        isNewRecord={isNewRecord}
                     />
                 </Grid>
 
                 {/*bottom button*/}
                 <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}}>
+                            <Button
+                                size="large"
+                                variant="contained"
+                                sx={{
+                                    textTransform: 'capitalize',
+                                    alignItems: 'end'
+                                }}
+                                disabled={isNewRecord}
+                                onClick={handleDeleteClick}
+                            >
+                                Delete User Group
+                            </Button>
+                            <GeneralConfirmWindow
+                                isWindowOpen={isWindowOpen}
+                                title={"Attention"}
+                                content={`Confirm to delete User Group "${userGroupData.data.name}" ?`}
+                                onNormalClose={handleClose}
+                                onConfirmClose={deleteData}
+                            />
+                        </Grid>
+
                         <Grid item sx={{ml: 3, mr: 3}}>
                             <Button
                                 size="large"
@@ -133,7 +230,7 @@ const UserMaintainPage = () => {
                                 }}
                                 onClick={submitData}
                             >
-                                Save User
+                                Save User Group
                             </Button>
                         </Grid>
                     </Grid>
diff --git a/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js b/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js
index a7786d7..ae9133b 100644
--- a/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js
+++ b/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js
@@ -68,7 +68,7 @@ export default function UserGroupTable({recordList}) {
                     },
                 }}
                 pageSizeOptions={[10, 15, 20]}
-                autoHeight = {true}
+                autoHeight 
             />
         </div>
     );
diff --git a/src/pages/pnspsUserGroupSearchPage/index.js b/src/pages/pnspsUserGroupSearchPage/index.js
index 43fa463..dc2209b 100644
--- a/src/pages/pnspsUserGroupSearchPage/index.js
+++ b/src/pages/pnspsUserGroupSearchPage/index.js
@@ -1,11 +1,11 @@
 // material-ui
 import {
-    Box,
-    Button,
+    // Box,
+    Stack,
+    // Button,
     Grid, Typography
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
-
 import {useEffect, useState} from "react";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
@@ -64,15 +64,15 @@ const UserGroupSearchPanel = () => {
         !onReady ?
             <LoadingComponent/>
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
+            <Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
                 <Grid item xs={12} md={12} lg={12}>
                     <Grid container justifyContent="flex-start" alignItems="center">
-                        <Grid item xs={1} sx={{mb: -2.25}} >
-                            <Box sx={{ display: 'flex', alignItems: 'center'}}>
-                                <Typography align="center" variant="h5" sx={{mb:2}}>View User Group</Typography>
-                            </Box>
+                        <Grid item xs={12} height='50px'>
+                            <Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center">
+                                <Typography ml={2} align="center" variant="h5">View User Group</Typography>
+                            </Stack>
                         </Grid>
-                        <Grid item xs={1} sx={{ml: 3, mr: 3}}>
+                        {/* <Grid item xs={1} sx={{ml: 3, mr: 3}}>
                             <Button
                                 size="large"
                                 variant="contained"
@@ -80,7 +80,7 @@ const UserGroupSearchPanel = () => {
                             >
                                 Create
                             </Button>
-                        </Grid>
+                        </Grid> */}
                     </Grid>
                 </Grid>
 
diff --git a/src/pages/pnspsUserSearchPage/UserSearchForm.js b/src/pages/pnspsUserSearchPage/UserSearchForm.js
index dc4078b..e2fc547 100644
--- a/src/pages/pnspsUserSearchPage/UserSearchForm.js
+++ b/src/pages/pnspsUserSearchPage/UserSearchForm.js
@@ -11,34 +11,16 @@ import {useForm} from "react-hook-form";
 import {
     // useEffect,
     useState} from "react";
-// import Autocomplete from '@mui/material/Autocomplete';
-// import {
-//     subDivision1,
-//     subDivision2,
-//     subDivision3,
-//     subDivision4,
-//     subDivision5,
-//     subDivision6
-// } from "pages/pnspsUserSearchPage/DummyComboRecord";
+
 import Checkbox from "@mui/material/Checkbox";
 import * as React from "react";
+// import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-// const subDivisionArray =[
-//         ...subDivision1,
-//         ...subDivision2,
-//         ...subDivision3,
-//         ...subDivision4,
-//         ...subDivision5,
-//         ...subDivision6
-// ];
 
 const UserSearchForm = ({applySearch}) => {
 
     const [type, setType] = useState([]);
-    // const [division, setDivision] = useState(null);
-    // const [subDivision, setSubDivision] = useState(null);
-    // const [isLotusNoteUser, setIsLotusNoteUser] = useState(false);
     const [locked, setLocked] = useState(false);
 
 
@@ -55,31 +37,24 @@ const UserSearchForm = ({applySearch}) => {
             username: data.userName,
             fullenName: data.fullenName,
             post: data.post,
-            // subDivision: subDivision,
             email: data.email,
             phone: data.phone,
-            // isLotusNoteUser: isLotusNoteUser,
             locked: locked,
         };
         applySearch(temp);
     };
 
-    // useEffect(() => {
-    //     if(division != null){
-    //         setSubDivision(subDivisionArray[division.type-1][0]);
-    //     }
-
-    // }, [division]);
 
     function resetForm(){
         setType([]);
-        // setDivision(null);
-        // setSubDivision(null);
-        // setIsLotusNoteUser(false);
         setLocked(false);
         reset();
     }
 
+    // const handleNewUserClick = (id) => () => {
+    //     navigate('/user/'+ id);
+    // };
+
     return (
         <MainCard xs={12} md={12} lg={12}
                   border={false}
@@ -89,7 +64,7 @@ const UserSearchForm = ({applySearch}) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Search Form
+                        Search Form (GLD User)
                     </Grid>
                 </CardContent>
 
@@ -122,19 +97,6 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    {/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <Autocomplete
-                            disablePortal
-                            id="sub-division-combo"
-                            value={subDivision === null? null : subDivision}
-                            options={subDivisionArray}
-                            onChange={(event, newValue) => {
-                                setSubDivision(newValue);
-                            }}
-                            renderInput={(params) => <TextField {...params} label="Sub-Division" />}
-                        />
-                    </Grid> */}
-
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                         <TextField
                             fullWidth
@@ -153,21 +115,6 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    {/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={isLotusNoteUser}
-                                    onChange={(event) => setIsLotusNoteUser(event.target.checked)}
-                                    name="checked"
-                                    color="primary"
-                                    size="small"
-                                />
-                            }
-                            label={<Typography variant="h6">Lotus Notes User</Typography>}
-                        />
-                    </Grid> */}
-
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                         <FormControlLabel
                             control={
@@ -182,20 +129,10 @@ const UserSearchForm = ({applySearch}) => {
                             label={<Typography variant="h6">Locked</Typography>}
                         />
                     </Grid>
-                    {/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/}
-                    {/*    <TextField*/}
-                    {/*        fullWidth*/}
-                    {/*        {...register("subDivisionId")}*/}
-                    {/*        id="subDivision"*/}
-                    {/*        label="Sub-Division"*/}
-                    {/*    />*/}
-                    {/*</Grid>*/}
-
                 </Grid>
 
                 {/*last row*/}
-                <Grid container maxWidth justifyContent="flex-end">
-
+                <Grid container maxWidth justifyContent="flex-start" direction="row"  alignItems="center">
                     <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
                         <Button
                             size="large"
@@ -220,7 +157,24 @@ const UserSearchForm = ({applySearch}) => {
                             }}>
                             Submit
                         </Button>
-                    </Grid>
+                    </Grid>                            
+                    {/* <Grid item sx={{ml:6, mr:6, mb:6, mt:6}}>
+                        <Grid container  direction="row" justifyContent="flex-start" alignItems="center">
+                        </Grid>
+                    </Grid> */}
+                    {/* <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                        <Button
+                            size="large"
+                            variant="contained"
+                            onClick={handleNewUserClick}
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            <AddCircleOutlineIcon/>
+                            New User 
+                        </Button>
+                    </Grid> */}
                 </Grid>
             </form>
         </MainCard>
diff --git a/src/pages/pnspsUserSearchPage/UserTable.js b/src/pages/pnspsUserSearchPage/UserTable.js
index c9b2e91..a122fbc 100644
--- a/src/pages/pnspsUserSearchPage/UserTable.js
+++ b/src/pages/pnspsUserSearchPage/UserTable.js
@@ -9,9 +9,12 @@ import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
 import { useTheme } from '@mui/material/styles';
 import Checkbox from '@mui/material/Checkbox';
+import * as UrlUtils from "../../utils/ApiPathConst";
+import * as HttpUtils from '../../utils/HttpUtils';
+
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserTable({recordList}) {
+export default function UserTable({recordList,setChangeLocked}) {
     const [rows, setRows] = React.useState(recordList);
     const [rowModesModel] = React.useState({});
     const theme = useTheme();
@@ -26,6 +29,36 @@ export default function UserTable({recordList}) {
         navigate('/user/'+ id);
     };
 
+    const handleLock = (params) => () => {
+        setChangeLocked(false)
+        if (params.row.locked==true){
+            doUnlock(params.id)
+        }else{
+            doLock(params.id)
+            setRows(recordList);
+        }
+    }
+
+    const doLock = (id) => {
+        HttpUtils.get({
+            url: UrlUtils.GET_USER_LOCK+"/"+id,
+            onSuccess: function(){
+                setRows(recordList);
+                setChangeLocked(true)
+            }
+        }); 
+    };
+
+    const doUnlock = (id) => {
+        HttpUtils.get({
+            url: UrlUtils.GET_USER_UNLOCK+"/"+id,
+            onSuccess: function(){
+                setRows(recordList);
+                setChangeLocked(true)
+            }
+        }); 
+    };
+
     const columns = [
         {
             field: 'actions',
@@ -52,8 +85,8 @@ export default function UserTable({recordList}) {
             flex: 1,
         },
         {
-            id: 'name',
-            field: 'name',
+            id: 'enName',
+            field: 'enName',
             headerName: 'Full Name',
             flex: 1,
         },
@@ -64,47 +97,11 @@ export default function UserTable({recordList}) {
             flex: 1,
         },
         {
-            id: 'email',
-            field: 'email',
+            id: 'emailAddress',
+            field: 'emailAddress',
             headerName: 'Email',
             flex: 1,
         },
-        // {
-        //     id: 'subDivisionId',
-        //     field: 'subDivisionId',
-        //     //type: 'date',
-        //     //sortable: false,
-        //     headerName: 'Sub-Division',
-        //     flex: 1,
-        // },
-
-        // {
-        //     id: 'subDivisionId',
-        //     field: 'subDivisionId',
-        //     //type: 'date',
-        //     //sortable: false,
-        //     headerName: 'Sub-Division',
-        //     flex: 1,
-        // },
-        // {
-        //     id: 'lotusNotesUser',
-        //     field: 'lotusNotesUser',
-        //     type: 'bool',
-        //     headerName: 'Lotus Notes User',
-        //     flex: 1,
-        //     renderCell: (params) => {
-        //         return (
-        //             <Checkbox
-        //                 theme={theme}
-        //                 key="locked"
-        //                 checked={params.row.lotusNotesUser}
-        //                 color="primary"
-        //                 size="small"
-        //                 //onChange={handleChange}
-        //             />
-        //         );
-        //     },
-        // },
 
         {
             id: 'locked',
@@ -120,7 +117,7 @@ export default function UserTable({recordList}) {
                         checked={params.row.locked}
                         color="primary"
                         size="small"
-                        //onChange={handleChange}
+                        onClick={handleLock(params)}
                     />
                 );
             },
@@ -140,7 +137,7 @@ export default function UserTable({recordList}) {
                     },
                 }}
                 pageSizeOptions={[5, 10]}
-                autoHeight = {true}
+                autoHeight 
             />
         </div>
     );
diff --git a/src/pages/pnspsUserSearchPage/index.js b/src/pages/pnspsUserSearchPage/index.js
index 304fc61..73104fe 100644
--- a/src/pages/pnspsUserSearchPage/index.js
+++ b/src/pages/pnspsUserSearchPage/index.js
@@ -5,8 +5,7 @@ import {
 import MainCard from "../../components/MainCard";
 import {useEffect, useState} from "react";
 import axios from "axios";
-import {apiPath} from "../../auth/utils";
-import {GET_USER_PATH} from "../../utils/ApiPathConst";
+import {GLD_USER_PATH} from "../../utils/ApiPathConst";
 import * as React from "react";
 
 // import LoadingComponent from "../extra-pages/LoadingComponent";
@@ -25,10 +24,11 @@ const UserSettingPage = () => {
     const [record,setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
+    const [changelocked, setChangeLocked] = React.useState(false);
 
     useEffect(() => {
         getUserList();
-    }, []);
+    }, [changelocked]);
 
     useEffect(() => {
         setOnReady(true);
@@ -39,7 +39,7 @@ const UserSettingPage = () => {
     }, [searchCriteria]);
 
     function getUserList(){
-        axios.get(`${apiPath}${GET_USER_PATH}`,
+        axios.get(`${GLD_USER_PATH}`,
             {params: searchCriteria}
         )
             .then((response) => {
@@ -78,6 +78,7 @@ const UserSettingPage = () => {
                 >
                     <EventTable
                         recordList={record}
+                        setChangeLocked={setChangeLocked}
                     />
                 </MainCard>
             </Grid>
diff --git a/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js b/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
index f2488fb..6d3f172 100644
--- a/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
+++ b/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
@@ -145,7 +145,7 @@ export default function UserTable_Individual({recordList}) {
                     },
                 }}
                 pageSizeOptions={[5, 10]}
-                autoHeight = {true}
+                autoHeight 
             />
         </div>
     );
diff --git a/src/pages/pnspsUserSearchPage_Organization/UserTable_Organization.js b/src/pages/pnspsUserSearchPage_Organization/UserTable_Organization.js
index 5270895..13043bb 100644
--- a/src/pages/pnspsUserSearchPage_Organization/UserTable_Organization.js
+++ b/src/pages/pnspsUserSearchPage_Organization/UserTable_Organization.js
@@ -139,7 +139,7 @@ export default function UserTable_Organization({recordList}) {
                     },
                 }}
                 pageSizeOptions={[5, 10]}
-                autoHeight = {true}
+                autoHeight 
             />
         </div>
     );
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index e148ada..c1e922a 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -8,7 +8,7 @@ export const GET_GROUP_COMBO_PATH = '/group/combo';
 export const GET_GROUP_MEMBER_LIST_PATH = '/group/member';
 export const GET_GROUP_AUTH_LIST = '/group/auth/combo';
 
-export const GET_USER_PATH = '/user/gld';
+export const GLD_USER_PATH = apiPath+'/user/gld';
 export const GET_AUTH_LIST = '/user/auth/combo';
 export const GET_USER_COMBO_LIST = '/user/combo';
 export const GET_USER_LOCK = apiPath+'/user/lock';
@@ -40,6 +40,12 @@ export const POST_LOGIN = '/login';
 export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register';
 
 
-
 //Public
-export const GET_PUBLIC_ORG_USER_LIST = apiPath+'/user/listOrg';
\ No newline at end of file
+export const GET_PUBLIC_ORG_USER_LIST = apiPath+'/user/listOrg';
+
+//GLD User
+export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry';
+export const DELETE_USER = apiPath+'/user';
+
+//User Group
+export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save';
\ No newline at end of file
diff --git a/src/utils/CommonFunction.js b/src/utils/CommonFunction.js
index 5bf7263..ffbf70e 100644
--- a/src/utils/CommonFunction.js
+++ b/src/utils/CommonFunction.js
@@ -1,3 +1,16 @@
+// import {toast} from "react-toastify";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogActions from "@mui/material/DialogActions";
+import {Button} from "@mui/material";
+import Dialog from "@mui/material/Dialog";
+import * as React from "react";
+
+export function getDeletedRecordWithRefList(referenceList, updatedList){
+    return referenceList.filter(x => !updatedList.includes(x)) ;
+}
+
 export function getIdList(input){
     const output = input.map(function (obj) {
         return obj.id;
@@ -5,10 +18,93 @@ export function getIdList(input){
     return output;
 }
 
+export function getObjectById(list, id){
+    const obj = list.find((element) => {
+        return element.id === id;
+    });
+    return obj === undefined || Object.keys(obj).length <= 0? null : obj
+}
+
 export function removeObjectWithId(arr, id) {
-    // Making a copy with the Array from() method
     const arrCopy = Array.from(arr);
     const objWithIdIndex = arrCopy.findIndex((obj) => obj.id === id);
     arrCopy.splice(objWithIdIndex, 1);
     return arrCopy;
+}
+
+export function getDateString(queryDateArray) {
+    return(
+        queryDateArray[0]
+        + "-" +
+        queryDateArray[1]
+        + "-" +
+        queryDateArray[2]
+        + " " +
+        queryDateArray[3]
+        + ":" +
+        queryDateArray[4]
+        + ":" +
+        queryDateArray[5]
+    )
+}
+
+// export const notifySaveSuccess = () => toast.success('Save success!', {
+//     position: "bottom-right",
+//     autoClose: 5000,
+//     hideProgressBar: false,
+//     closeOnClick: true,
+//     pauseOnHover: true,
+//     draggable: true,
+//     progress: undefined,
+//     theme: "light",
+// });
+
+export const notifyDeleteSuccess = () => toast.success('Delete Success!', {
+    position: "bottom-right",
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+    theme: "light",
+});
+
+export function prettyJson(json){
+    console.log(json);
+    console.log(JSON.stringify(json, null, 2));
+    return (
+        <div>{JSON.stringify(json, null, 2)}</div>
+    );
+}
+
+export function GeneralConfirmWindow({
+                                         isWindowOpen,
+                                         title,
+                                         content,
+                                         onNormalClose,
+                                         onConfirmClose}){
+    return (
+        <Dialog
+            open={isWindowOpen}
+            onClose={onNormalClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">
+                {title}
+            </DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    {content}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onNormalClose}>Cancel</Button>
+                <Button onClick={onConfirmClose} autoFocus>
+                    Confirm
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
 }
\ No newline at end of file