diff --git a/src/pages/pnspsUserDetailPage/UserGroupCard.js b/src/pages/pnspsUserDetailPage/UserGroupCard.js
index 063d4af..00f2a0e 100644
--- a/src/pages/pnspsUserDetailPage/UserGroupCard.js
+++ b/src/pages/pnspsUserDetailPage/UserGroupCard.js
@@ -15,7 +15,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => {
+const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord}) => {
     const [currentUserData, setCurrentUserData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [selectedRow, setSelectedRow] = useState([]);
@@ -30,7 +30,6 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,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) {
             setOnReady(true);
         }
@@ -56,6 +55,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => {
                 <UserGroupTable
                     userGroup={userData.groupIds}
                     setSelectedRow={setSelectedRow}
+                    isNewRecord={isNewRecord}
                 />
             </MainCard>
     );
diff --git a/src/pages/pnspsUserDetailPage/UserGroupTable.js b/src/pages/pnspsUserDetailPage/UserGroupTable.js
index 4e24bc1..871ff2e 100644
--- a/src/pages/pnspsUserDetailPage/UserGroupTable.js
+++ b/src/pages/pnspsUserDetailPage/UserGroupTable.js
@@ -13,7 +13,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserGroupTable({setSelectedRow, userGroup}) {
+export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord}) {
     const [groupData, setGroupData] = useState([]);
     const [onReady, setOnReady] = useState(false);
     const [currentSelectedRow, setCurrentSelectedRow] = useState(userGroup);
@@ -33,8 +33,7 @@ export default function UserGroupTable({setSelectedRow, userGroup}) {
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        console.log(groupData)
-        if (groupData!== undefined) {
+        if (groupData.length > 0||isNewRecord) {
             setOnReady(true);
         }
     }, [groupData]);
diff --git a/src/pages/pnspsUserDetailPage/UserInformationCard.js b/src/pages/pnspsUserDetailPage/UserInformationCard.js
index 01baee3..72e0dc0 100644
--- a/src/pages/pnspsUserDetailPage/UserInformationCard.js
+++ b/src/pages/pnspsUserDetailPage/UserInformationCard.js
@@ -1,7 +1,10 @@
 // material-ui
 import {
-    FormControl, IconButton,
-    Grid, InputAdornment, Typography, FormLabel,
+    FormControl, 
+    IconButton,
+    Grid, 
+    InputAdornment, 
+    Typography, FormLabel,
     OutlinedInput,
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
@@ -96,40 +99,42 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
                                 </Grid>
                             </Grid>
                         </Grid>
+                        {
+                            isNewRecord?
+                            <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'}}>
+                                        <FormLabel required>Password:</FormLabel>
+                                    </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'}}>
-                                    Password:
+                                    <Grid item xs={7} s={7} md={7} lg={6}>
+                                        <FormControl variant="outlined" fullWidth required>
+                                            <OutlinedInput
+                                                fullWidth
+                                                size="small"
+                                                {...register("password")}
+                                                id='password'
+                                                type={showPassword ? 'text' : 'password'}
+                                                disabled = {!isNewRecord}
+                                                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 item xs={7} s={7} md={7} lg={6}>
-                                    <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>
+                            </Grid>: null
+                        }
 
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                             <Grid container alignItems={"center"}>
diff --git a/src/pages/pnspsUserDetailPage/index.js b/src/pages/pnspsUserDetailPage/index.js
index 032cf51..fc14732 100644
--- a/src/pages/pnspsUserDetailPage/index.js
+++ b/src/pages/pnspsUserDetailPage/index.js
@@ -9,7 +9,7 @@ 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} from "../../utils/ApiPathConst";
+import {GLD_USER_PATH,DELETE_USER,POST_ADMIN_USER_REGISTER} from "../../utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -130,29 +130,58 @@ const UserMaintainPage = () => {
         if(userConfirm && onReady){
             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 === 204) {
-                    // notifySaveSuccess();
-                    navigate('/userSearchview');
-                }
-            })
-                .catch(error => {
-                    console.log(error);
-                    return false;
+            // console.log(userGroupData)
+            // console.log(userAuthData)
+            if( parseInt(params.id) >= -1){
+                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 === 204) {
+                        // notifySaveSuccess();
+                        navigate('/userSearchview');
+                    }
+                })
+                    .catch(error => {
+                        console.log(error);
+                        return false;
+                });
+            }else{
+                axios.post(POST_ADMIN_USER_REGISTER,
+                    {
+                        "username": editedCustomerData.username,
+                        "name": editedCustomerData.username,
+                        "password": editedCustomerData.password,
+                        "enName": editedCustomerData.enName,
+                        "locked": editedCustomerData.locked,
+                        "emailAddress": editedCustomerData.emailAddress,
+                        "post": editedCustomerData.post,
+                        "addGroupIds": userGroupData,
+                        "removeGroupIds": [],
+                        "addAuthIds": userAuthData,
+                        "removeAuthIds": [],
+                    },
+                ).then((response) => {
+                    if (response.status === 200) {
+                        // notifySaveSuccess();
+                        navigate('/userSearchview');
+                    }
+                })
+                    .catch(error => {
+                        console.log(error);
+                        return false;
                 });
+            }
         }
         setUserConfirm(false);
     }, [editedCustomerData,userGroupData,userAuthData]);
diff --git a/src/pages/pnspsUserSearchPage/UserSearchForm.js b/src/pages/pnspsUserSearchPage/UserSearchForm.js
index e2fc547..47dc8ca 100644
--- a/src/pages/pnspsUserSearchPage/UserSearchForm.js
+++ b/src/pages/pnspsUserSearchPage/UserSearchForm.js
@@ -14,11 +14,14 @@ import {
 
 import Checkbox from "@mui/material/Checkbox";
 import * as React from "react";
-// import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import {useNavigate} from "react-router";
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const UserSearchForm = ({applySearch}) => {
+    const navigate = useNavigate();
 
     const [type, setType] = useState([]);
     const [locked, setLocked] = useState(false);
@@ -51,9 +54,10 @@ const UserSearchForm = ({applySearch}) => {
         reset();
     }
 
-    // const handleNewUserClick = (id) => () => {
-    //     navigate('/user/'+ id);
-    // };
+    const handleNewUserClick = (id) => {
+        // console.log(id)
+        navigate('/user/'+ id);
+    };
 
     return (
         <MainCard xs={12} md={12} lg={12}
@@ -132,37 +136,11 @@ const UserSearchForm = ({applySearch}) => {
                 </Grid>
 
                 {/*last row*/}
-                <Grid container maxWidth justifyContent="flex-start" direction="row"  alignItems="center">
-                    <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            Clear
-                        </Button>
-                    </Grid>
-
-                    <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            Submit
-                        </Button>
-                    </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}}>
+                <Grid container direction="row"
+                    justifyContent="space-between"
+                    alignItems="center">
+                       
+                    <Grid item xs={3} md={3} sx={{ml:1, mr:1, mb:3, mt:3}}>
                         <Button
                             size="large"
                             variant="contained"
@@ -172,9 +150,38 @@ const UserSearchForm = ({applySearch}) => {
                                 alignItems: 'end'
                             }}>
                             <AddCircleOutlineIcon/>
-                            New User 
+                            New User
                         </Button>
-                    </Grid> */}
+                    </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}}>
+                                <Button
+                                    size="large"
+                                    variant="contained"
+                                    onClick={resetForm}
+                                    sx={{
+                                        textTransform: 'capitalize',
+                                        alignItems: 'end'
+                                    }}>
+                                    Clear
+                                </Button>
+                            </Grid>
+
+                            <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                                <Button
+                                    size="large"
+                                    variant="contained"
+                                    type="submit"
+                                    sx={{
+                                        textTransform: 'capitalize',
+                                        alignItems: 'end'
+                                    }}>
+                                    Search
+                                </Button>
+                            </Grid>
+                        </Grid>
+                    </Grid>
                 </Grid>
             </form>
         </MainCard>
diff --git a/src/pages/pnspsUserSearchPage/index.js b/src/pages/pnspsUserSearchPage/index.js
index 73104fe..9b1d127 100644
--- a/src/pages/pnspsUserSearchPage/index.js
+++ b/src/pages/pnspsUserSearchPage/index.js
@@ -1,6 +1,9 @@
 // material-ui
 import {
-    Grid, Typography
+    Grid, 
+    Typography,
+    Stack,
+    // Button
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 import {useEffect, useState} from "react";
@@ -8,9 +11,6 @@ import axios from "axios";
 import {GLD_USER_PATH} from "../../utils/ApiPathConst";
 import * as React from "react";
 
-// import LoadingComponent from "../extra-pages/LoadingComponent";
-// import SearchForm from "./UserSearchForm";
-// import EventTable from "./UserTable";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
@@ -20,7 +20,6 @@ const EventTable = Loadable(lazy(() => import('./UserTable')));
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSettingPage = () => {
-
     const [record,setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
@@ -61,10 +60,16 @@ const UserSettingPage = () => {
         !onReady ?
             <LoadingComponent/>
             :
-        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-            <Grid item xs={12} sx={{mb: -2.25}}>
-                <Typography variant="h5">View User</Typography>
-            </Grid>
+        <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</Typography>
+                            </Stack>
+                        </Grid>
+                    </Grid>
+                </Grid>
 
             {/*row 1*/}
             <Grid item xs={12} md={12} lg={12}>