diff --git a/src/pages/OrganizationSearchPage/OrganizationTable.js b/src/pages/OrganizationSearchPage/OrganizationTable.js
index a3b6451..d54d98d 100644
--- a/src/pages/OrganizationSearchPage/OrganizationTable.js
+++ b/src/pages/OrganizationSearchPage/OrganizationTable.js
@@ -1,18 +1,17 @@
 // material-ui
 import * as React from 'react';
 import {
-    DataGrid,
     GridActionsCellItem,
 } from "@mui/x-data-grid";
+import { FiDataGrid } from "components/FiDataGrid";
 import EditIcon from '@mui/icons-material/Visibility';
-import {useEffect} from "react";
-import {useNavigate} from "react-router-dom";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import * as DateUtils from "utils/DateUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function OrganizationTable({recordList}) {
+export default function OrganizationTable({ recordList }) {
     const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel] = React.useState({});
     const navigate = useNavigate()
 
     useEffect(() => {
@@ -20,7 +19,7 @@ export default function OrganizationTable({recordList}) {
     }, [recordList]);
 
     const handleActionClick = (id) => () => {
-        navigate('/org/'+ id);
+        navigate('/org/' + id);
     };
 
     const columns = [
@@ -30,11 +29,11 @@ export default function OrganizationTable({recordList}) {
             headerName: 'Actions',
             width: 100,
             cellClassName: 'actions',
-            getActions: ({id}) => {
+            getActions: ({ id }) => {
                 return [
                     <GridActionsCellItem
                         key="OutSave"
-                        icon={<EditIcon/>}
+                        icon={<EditIcon />}
                         label="Edit"
                         className="textPrimary"
                         onClick={handleActionClick(id)}
@@ -79,27 +78,22 @@ export default function OrganizationTable({recordList}) {
             field: 'brExpiryDate',
             headerName: 'Expiry Date',
             flex: 1,
-            valueGetter:(params)=>{
+            valueGetter: (params) => {
                 return DateUtils.dateStr(params?.value);
             }
         },
     ];
 
     return (
-        <div style={{height: 400, width: '100%'}}>
-            <DataGrid
-                hideFooterSelectedRowCount={true}
+        <div style={{ height: 400, width: '100%' }}>
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
-                        paginationModel: {page: 0, pageSize: 5},
+                        paginationModel: { page: 0, pageSize: 5 },
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight 
             />
         </div>
     );
diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/BaseGrid.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/BaseGrid.js
index 1c33175..ec9dfa8 100644
--- a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/BaseGrid.js
+++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/BaseGrid.js
@@ -1,8 +1,6 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
+import {FiDataGrid} from "components/FiDataGrid";
 import {
     Button
 } from '@mui/material';
@@ -11,8 +9,6 @@ import * as DateUtils from "utils/DateUtils"
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function BaseGrid({rows}) {
-    const [rowModesModel] = React.useState({});
-
     const columns = [
         {
             id: 'appNo',
@@ -75,18 +71,14 @@ export default function BaseGrid({rows}) {
 
     return (
         <div style={{height:'20%', width: '100%'}}>
-            <DataGrid
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: {page: 0, pageSize: 5},
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight = {true}
             />
         </div>
     );
diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/PendingPaymentTab.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/PendingPaymentTab.js
index aadbee7..4722af2 100644
--- a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/PendingPaymentTab.js
+++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/PendingPaymentTab.js
@@ -1,8 +1,6 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
+import {FiDataGrid} from "components/FiDataGrid";
 import {
     Stack,
     Typography,
@@ -97,20 +95,16 @@ export default function SubmittedTab({ rows }) {
     return (
         <>
             <div style={{ height: 400, width: '100%' }}>
-                <DataGrid
+                <FiDataGrid
                     checkboxSelection
                     disableRowSelectionOnClick
                     rows={rows}
                     columns={columns}
-                    editMode="row"
-                    rowSelectionModel={selectedRowItems}
                     initialState={{
                         pagination: {
                             paginationModel: { page: 0, pageSize: 5 },
                         },
                     }}
-                    pageSizeOptions={[5, 10]}
-                    autoHeight={true}
                     onRowSelectionModelChange={(newSelection) => {
                         setSelectedRowItems(newSelection);
                     }}
diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/ProofTab.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/ProofTab.js
index 1da2df9..2a72449 100644
--- a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/ProofTab.js
+++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/ProofTab.js
@@ -1,17 +1,12 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
+import {FiDataGrid} from "components/FiDataGrid";
 import {
     Button
 } from '@mui/material';
-// import * as DateUtils from "utils/DateUtils"
-// import * as StatusUtils from "./PublicNoteStatusUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
-    const [rowModesModel] = React.useState({});
 
     const columns = [
         {
@@ -58,18 +53,14 @@ export default function ProofTab({rows}) {
 
     return (
         <div style={{height:'20%', width: '100%'}}>
-            <DataGrid
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: {page: 0, pageSize: 5},
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight = {true}
             />
         </div>
     );
diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js
index e159d14..8a16fd2 100644
--- a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js
+++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js
@@ -1,8 +1,6 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
+import {FiDataGrid} from "components/FiDataGrid";
 // import dayjs from "dayjs";
 // import {
 //     Button
@@ -13,8 +11,6 @@ import * as StatusUtils from "../../PublicNotice/ListPanel/PublicNoteStatusUtils
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function StatusHistoryTab({rows}) {
-    const [rowModesModel] = React.useState({});
-
     const columns = [
         {
             id: 'created',
@@ -45,18 +41,14 @@ export default function StatusHistoryTab({rows}) {
 
     return (
         <div style={{height:'20%', width: '100%'}}>
-            <DataGrid
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: {page: 0, pageSize: 5},
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight = {true}
             />
         </div>
     );
diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/TabTable.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/TabTable.js
index 7cf0222..942636b 100644
--- a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/TabTable.js
+++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/TabTable.js
@@ -8,13 +8,8 @@ import {
 } from '@mui/material';
 
 import { TabPanel, TabContext, TabList } from '@mui/lab';
-import { 
-    useEffect, 
-    useState } from "react";
-// import { useNavigate } from "react-router-dom";
 import * as React from "react";
-// import * as HttpUtils from "../../../utils/HttpUtils";
-// import * as UrlUtils from "../../../utils/ApiPathConst";
+
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -27,12 +22,12 @@ const ProofTab = Loadable(lazy(() => import('./ProofTab')));
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const PublicNotice = ({applicationDetailData}) => {
-    const [submittedList, ] = useState([]);
-    const [inProgressList, ] = useState([]);
-    const [onReady,setOnReady] = useState(false);
-    const [selectedTab, setSelectedTab] = useState("1");
+    const [submittedList, ] = React.useState([]);
+    const [inProgressList, ] = React.useState([]);
+    const [onReady,setOnReady] = React.useState(false);
+    const [selectedTab, setSelectedTab] = React.useState("1");
     // const navigate = useNavigate();
-    const [statusHistoryList, setStatusHistoryList] = useState([]);
+    const [statusHistoryList, setStatusHistoryList] = React.useState([]);
 
 
     // useEffect(() => {
@@ -43,7 +38,7 @@ const PublicNotice = ({applicationDetailData}) => {
         window.location.reload(false);
     }
 
-    useEffect(() => {
+    React.useEffect(() => {
         //if user data from parent are not null
         // console.log(applicationDetailData)
         if (Object.keys(applicationDetailData).length > 0) {
@@ -51,7 +46,7 @@ const PublicNotice = ({applicationDetailData}) => {
         }
     }, [applicationDetailData]);
 
-    useEffect(() => {
+    React.useEffect(() => {
         //if state data are ready and assign to different field
         if (statusHistoryList.length > 0) {
             setOnReady(true);
diff --git a/src/pages/PublicNoticeSearch_GLD/DataGrid.js b/src/pages/PublicNoticeSearch_GLD/DataGrid.js
index 9486974..83450c8 100644
--- a/src/pages/PublicNoticeSearch_GLD/DataGrid.js
+++ b/src/pages/PublicNoticeSearch_GLD/DataGrid.js
@@ -1,19 +1,16 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
 import {
     Button
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as StatusUtils from "pages/PublicNotice/ListPanel/PublicNoteStatusUtils";
 import {useNavigate} from "react-router-dom";
+import {FiDataGrid} from "components/FiDataGrid";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
     const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel] = React.useState({});
     const navigate = useNavigate()
 
     React.useEffect(() => {
@@ -113,29 +110,14 @@ export default function SearchPublicNoticeTable({ recordList }) {
     return (
         <div style={{ height: 400, width: '100%' }}>
 
-            <DataGrid
-                hideFooterSelectedRowCount={true}
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: { page: 0, pageSize: 5 },
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight
-                sx={{
-                    paddingLeft: 4,
-                    paddingRight: 4,
-                    boxShadow: 1,
-                    border: 1,
-                    borderColor: '#DDD',
-                    '& .super-app-theme--header': {
-                        backgroundColor: '#EEE',
-                    },
-                }}
             />
         </div>
     );
diff --git a/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js b/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js
index 5912f9d..0877e01 100644
--- a/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js
+++ b/src/pages/pnspsUserGroupSearchPage/UserGroupTable.js
@@ -1,9 +1,9 @@
 // material-ui
 import * as React from 'react';
 import {
-    DataGrid,
     GridActionsCellItem,
 } from "@mui/x-data-grid";
+import {FiDataGrid} from "components/FiDataGrid";
 import EditIcon from '@mui/icons-material/Edit';
 import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
@@ -11,7 +11,6 @@ import {useNavigate} from "react-router-dom";
 
 export default function UserGroupTable({recordList}) {
     const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel] = React.useState({});
     const navigate = useNavigate()
 
     useEffect(() => {
@@ -57,19 +56,15 @@ export default function UserGroupTable({recordList}) {
 
     return (
         <div style={{height: 400, width: '100%'}}>
-            <DataGrid
-                hideFooterSelectedRowCount={true}
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: {page: 0, pageSize: 10},
                     },
                 }}
                 pageSizeOptions={[10, 15, 20]}
-                autoHeight 
             />
         </div>
     );
diff --git a/src/pages/pnspsUserSearchPage/UserTable.js b/src/pages/pnspsUserSearchPage/UserTable.js
index 9fad1b8..69af80a 100644
--- a/src/pages/pnspsUserSearchPage/UserTable.js
+++ b/src/pages/pnspsUserSearchPage/UserTable.js
@@ -1,9 +1,7 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-    GridActionsCellItem,
-} from "@mui/x-data-grid";
+import { GridActionsCellItem,} from "@mui/x-data-grid";
+import {FiDataGrid} from "components/FiDataGrid";
 import EditIcon from '@mui/icons-material/Edit';
 import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
@@ -16,7 +14,6 @@ import * as HttpUtils from '../../utils/HttpUtils';
 
 export default function UserTable({recordList,setChangeLocked}) {
     const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel] = React.useState({});
     const theme = useTheme();
 
     const navigate = useNavigate()
@@ -126,19 +123,14 @@ export default function UserTable({recordList,setChangeLocked}) {
 
     return (
         <div style={{height: 400, width: '100%'}}>
-            <DataGrid
-                hideFooterSelectedRowCount={true}
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: {page: 0, pageSize: 5},
                     },
-                }}
-                pageSizeOptions={[5, 10]}
-                autoHeight 
+                }} 
             />
         </div>
     );
diff --git a/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js b/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
index c3f3a4a..ffd58d9 100644
--- a/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
+++ b/src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
@@ -1,20 +1,17 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-    GridActionsCellItem
-} from "@mui/x-data-grid";
+import { GridActionsCellItem } from "@mui/x-data-grid";
+import { FiDataGrid } from "components/FiDataGrid";
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import HighlightOff from '@mui/icons-material/HighlightOff';
 import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
-import {useEffect} from "react";
-import {useNavigate} from "react-router-dom";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import * as DateUtils from "../../utils/DateUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserTable_Individual({recordList}) {
+export default function UserTable_Individual({ recordList }) {
     const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel] = React.useState({});
 
     const navigate = useNavigate()
 
@@ -23,7 +20,7 @@ export default function UserTable_Individual({recordList}) {
     }, [recordList]);
 
     const handleActionClick = (id) => () => {
-        navigate('/indUser/'+ id);
+        navigate('/indUser/' + id);
     };
 
     const columns = [
@@ -33,11 +30,11 @@ export default function UserTable_Individual({recordList}) {
             headerName: 'Actions',
             width: 100,
             cellClassName: 'actions',
-            getActions: ({id}) => {
+            getActions: ({ id }) => {
                 return [
                     <GridActionsCellItem
                         key="OutSave"
-                        icon={<VisibilityIcon/>}
+                        icon={<VisibilityIcon />}
                         label="View"
                         className="textPrimary"
                         onClick={handleActionClick(id)}
@@ -68,12 +65,12 @@ export default function UserTable_Individual({recordList}) {
             field: 'mobileNumber',
             headerName: 'Tel.',
             flex: 1,
-            valueGetter:(params)=>{
-                if(params.value){
+            valueGetter: (params) => {
+                if (params.value) {
                     let tel = JSON.parse(params.value);
-                    return "+"+tel.countryCode+ " "+tel.phoneNumber;
+                    return "+" + tel.countryCode + " " + tel.phoneNumber;
                 }
-                
+
             }
         },
         {
@@ -87,11 +84,11 @@ export default function UserTable_Individual({recordList}) {
             field: 'lastLogin',
             headerName: 'Last Login',
             flex: 1,
-            valueGetter:(params)=>{
-                if(params.value){
+            valueGetter: (params) => {
+                if (params.value) {
                     return DateUtils.datetimeStr(params.value);
                 }
-                
+
             }
         },
         {
@@ -99,13 +96,13 @@ export default function UserTable_Individual({recordList}) {
             field: 'locked',
             headerName: 'Status',
             flex: 1,
-            valueGetter:(params)=>{
-                if(params.value){
+            valueGetter: (params) => {
+                if (params.value) {
                     return "Locked";
-                }else{
+                } else {
                     return "Active";
                 }
-                
+
             }
         },
         {
@@ -115,17 +112,17 @@ export default function UserTable_Individual({recordList}) {
             width: 100,
             cellClassName: 'actions',
             getActions: (params) => {
-                if(params.row.verifiedDate)
+                if (params.row.verifiedDate)
+                    return [
+                        <GridActionsCellItem
+                            key=""
+                            icon={<CheckCircleOutline />}
+                            color="success"
+                        />];
                 return [
                     <GridActionsCellItem
                         key=""
-                        icon={<CheckCircleOutline/>}
-                        color="success"
-                    />];
-                return [
-                    <GridActionsCellItem 
-                        key=""
-                        icon={<HighlightOff/>}
+                        icon={<HighlightOff />}
                         color="error"
                     />];
             },
@@ -133,30 +130,17 @@ export default function UserTable_Individual({recordList}) {
     ];
 
     return (
-        <div style={{height: 400, width: '100%'}}>
+        <div style={{ height: 400, width: '100%' }}>
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 5 },
+                    },
+                }}
 
-                    <DataGrid
-                        hideFooterSelectedRowCount={true}
-                        rows={rows}
-                        columns={columns}
-                        editMode="row"
-                        rowModesModel={rowModesModel}
-                        initialState={{
-                            pagination: {
-                                paginationModel: {page: 0, pageSize: 5},
-                            },
-                        }}
-                        pageSizeOptions={[5, 10]}
-                        autoHeight
-                        sx={{
-                            boxShadow: 1,
-                            border: 1,
-                            borderColor: '#DDD',
-                            '& .super-app-theme--header': {
-                                backgroundColor: '#EEE',
-                            },
-                        }}
-                    />
+            />
         </div>
     );
 }
diff --git a/src/pages/pnspsUserSearchPage_Organization/UserTable_Organization.js b/src/pages/pnspsUserSearchPage_Organization/UserTable_Organization.js
index 64469f5..6602dc8 100644
--- a/src/pages/pnspsUserSearchPage_Organization/UserTable_Organization.js
+++ b/src/pages/pnspsUserSearchPage_Organization/UserTable_Organization.js
@@ -1,9 +1,10 @@
 // material-ui
 import * as React from 'react';
 import {
-    DataGrid,
     GridActionsCellItem,
 } from "@mui/x-data-grid";
+
+import {FiDataGrid} from "components/FiDataGrid";
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
@@ -15,7 +16,6 @@ import * as DateUtils from '../../utils/DateUtils';
 
 export default function UserTable_Organization({recordList}) {
     const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel] = React.useState({});
 
     const navigate = useNavigate()
 
@@ -128,19 +128,14 @@ export default function UserTable_Organization({recordList}) {
 
     return (
         <div style={{height: 400, width: '100%'}}>
-            <DataGrid
-                hideFooterSelectedRowCount={true}
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: {page: 0, pageSize: 5},
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight 
             />
         </div>
     );