diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index 2a4d442..5d35504 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -74,29 +74,31 @@ const CustomFormWizard = (props) => {
         console.log(data.phone)
         const name = data.ehName +" "+ data.enName
         console.log(name)
+        if (data.username !==""){
+            axios.post(`${apiPath}/user/register`, {
+                username: data.username,
+                password: data.password,
+                name: data.username,
+                fullname: name,
+                enName: data.enName,
+                chName: data.chName,
+                email: data.email,
+                fax: data.fax,
+                address1: data.address1,
+                address2: data.address2,
+                address3: data.address3,
+                address4: data.address4,
+                address5: data.address5
+            })
+            .then((response) => {
+                console.log("Success")
+                console.log(response)
+            })
+            .catch(error => {
+                console.error(error);
+            });  
 
-        axios.post(`${apiPath}/user/register`, {
-            username: data.username,
-            password: data.password,
-            name: data.username,
-            fullname: name,
-            enName: data.enName,
-            chName: data.chName,
-            email: data.email,
-            fax: data.fax,
-            address1: data.address1,
-            address2: data.address2,
-            address3: data.address3,
-            address4: data.address4,
-            address5: data.address5
-        })
-        .then((response) => {
-            console.log("Success")
-            console.log(response)
-        })
-        .catch(error => {
-            console.error(error);
-        });  
+        }
     }
     
     return (
diff --git a/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js b/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
index 6a73bab..68a4dad 100644
--- a/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
+++ b/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
@@ -13,7 +13,6 @@ const UserGroupSearchForm = ({applySearch}) => {
 
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
-        console.log(data)
         applySearch(data);
     };
 
@@ -39,7 +38,7 @@ const UserGroupSearchForm = ({applySearch}) => {
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                         <TextField
                             fullWidth
-                            {...register("userGroupName")}
+                            {...register("name")}
                             id='userGroupName'
                             label="User Group Name"
                         />
@@ -48,7 +47,7 @@ const UserGroupSearchForm = ({applySearch}) => {
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                         <TextField
                             fullWidth
-                            {...register("userGroupDescription")}
+                            {...register("description")}
                             id="userGroupDescription"
                             label="User Group Description"
                         />
diff --git a/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js b/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js
index e5f8741..6f50a0c 100644
--- a/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js
+++ b/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js
@@ -43,7 +43,7 @@ export default function UserGroupTable({recordList}) {
         },
         {
             id: 'groupName',
-            field: 'groupName',
+            field: 'name',
             headerName: 'User Group Name',
             flex: 1,
         },
diff --git a/src/pages/pnspsUserGroupSearchPage/index.js b/src/pages/pnspsUserGroupSearchPage/index.js
index 401fa9f..d5a8399 100644
--- a/src/pages/pnspsUserGroupSearchPage/index.js
+++ b/src/pages/pnspsUserGroupSearchPage/index.js
@@ -6,50 +6,55 @@ import MainCard from "../../components/MainCard";
 import UserGroupSearchForm from "./UserGroupSearchForm";
 import UserGroupTable from "./UserGroupTable";
 import {useEffect, useState} from "react";
+import axios from "axios";
+import {apiPath} from "../../auth/utils";
+import {GET_GROUP_LIST_PATH} from "../../utils/ApiPathConst";
+import LoadingComponent from "../extra-pages/LoadingComponent";
+import * as React from "react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-
-
 const UserGroupSearchPanel = () => {
 
-    const [record] = useState([]);
+    const [record,setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
-    const [sortedRecord, setSortedRecord] = useState([]);
+    const [onReady, setOnReady] = useState(false);
 
-    const filterSearchName = (array) => {
-        return array.filter((item) => item.name.toLowerCase().includes(searchCriteria.eventName));
-    };
+    useEffect(() => {
+        getGroupList();
+    }, []);
+
+    useEffect(() => {
+        setOnReady(true);
+    }, [record]);
 
-    const filterSearchType = (array) => {
-        return array.filter((item) => item.category.includes(searchCriteria.type));
-    };
+    useEffect(() => {
+        getGroupList();
+    }, [searchCriteria]);
 
-    function sortData(record){
-        let sortedRecord = record;
-        sortedRecord = filterSearchName(sortedRecord);
-        sortedRecord = filterSearchType(sortedRecord);
-        return sortedRecord;
+    function getGroupList(){
+        axios.get(`${apiPath}${GET_GROUP_LIST_PATH}`,
+            {params: searchCriteria}
+        )
+            .then((response) => {
+                if (response.status === 200) {
+                    setRecord(response.data.records);
+                }
+            })
+            .catch(error => {
+                console.log(error);
+                return false;
+            });
     }
 
     function applySearch(input){
         setSearchCriteria(input);
-        //console.log("Apply Search: ");
-        //console.log(input);
     }
 
-    useEffect(() => {
-        //console.log(searchCriteria);
-        if(Object.keys(searchCriteria).length !== 0){
-            const tempSortedRecord = sortData(record);
-            console.log(tempSortedRecord);
-            setSortedRecord(tempSortedRecord);
-        }else{
-            setSortedRecord(record);
-        }
-    }, [searchCriteria]);
-
     return (
+        !onReady ?
+            <LoadingComponent/>
+            :
         <Grid container rowSpacing={4.5} columnSpacing={2.75}>
             <Grid item xs={12} sx={{mb: -2.25}}>
                 <Typography variant="h5">View User Group</Typography>
@@ -65,7 +70,7 @@ const UserGroupSearchPanel = () => {
                           content={false}
                 >
                     <UserGroupTable
-                        recordList={sortedRecord}
+                        recordList={record}
                     />
                 </MainCard>
             </Grid>
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index aba9fa8..bda6106 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -1,3 +1,4 @@
 export const GET_GROUP_COMBO_PATH = "/group/combo"
+export const GET_GROUP_LIST_PATH = "/group"
 export const GET_USER_PATH = "/user"
 export const GET_AUTH_LIST = "/user/auth/combo"
\ No newline at end of file