diff --git a/src/pages/AuditLog/AuditLogTable.js b/src/pages/AuditLog/AuditLogTable.js
index b7acb9a..db35ddb 100644
--- a/src/pages/AuditLog/AuditLogTable.js
+++ b/src/pages/AuditLog/AuditLogTable.js
@@ -3,6 +3,7 @@ import * as React from 'react';
 import {FiDataGrid} from "components/FiDataGrid";
 import {useEffect} from "react";
 import * as DateUtils from "utils/DateUtils"
+import { GET_AUDIT_LOG_LIST } from "utils/ApiPathConst";
 import {useTheme} from "@emotion/react";
 import {
     // Button,
@@ -11,13 +12,13 @@ import {
 } from '@mui/material';
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function AuditLogTable({recordList}) {
-    const [rows, setRows] = React.useState(recordList);
+export default function AuditLogTable({searchCriteria}) {
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
 
     useEffect(() => {
-        setRows(recordList);
-        // console.log(recordList)
-    }, [recordList]);
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
+
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
@@ -83,11 +84,13 @@ export default function AuditLogTable({recordList}) {
     return (
         <div style={{height: "fit-content", width: '100%'}}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
-                customPageSize={5}
-                // onRowDoubleClick={handleRowDoubleClick}
+                customPageSize={10}
                 getRowHeight={() => 'auto'}
+                doLoad={{
+                    url: GET_AUDIT_LOG_LIST,
+                    params: _searchCriteria
+                }}
             />
         </div>
     );
diff --git a/src/pages/AuditLog/index.js b/src/pages/AuditLog/index.js
index 9c03409..b0c1232 100644
--- a/src/pages/AuditLog/index.js
+++ b/src/pages/AuditLog/index.js
@@ -7,9 +7,6 @@ import {
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import { useEffect, useState } from "react";
-import axios from "axios";
-import { GET_AUDIT_LOG_LIST } from "utils/ApiPathConst";
-import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
 
 import Loadable from 'components/Loadable';
@@ -31,43 +28,16 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const AuditLogPage = () => {
-    const [record, setRecord] = useState([]);
-    const [searchCriteria, setSearchCriteria] = React.useState({
+    const [searchCriteria, setSearchCriteria] = useState({
         modifiedTo: DateUtils.dateValue(new Date()),
         modifiedFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady, setOnReady] = useState(false);
-    const [changelocked, setChangeLocked] = React.useState(false);
-
-    React.useLayoutEffect(() => {
-        getUserList();
-    }, [changelocked]);
 
     useEffect(() => {
-        if (record.length > 0) {
             setOnReady(true);
-        }
-    }, [record]);
-
-    React.useLayoutEffect(() => {
-        getUserList();
     }, [searchCriteria]);
 
-    function getUserList() {
-        axios.get(`${GET_AUDIT_LOG_LIST}`,
-            { params: searchCriteria }
-        )
-            .then((response) => {
-                if (response.status === 200) {
-                    setRecord(response.data);
-                }
-            })
-            .catch(error => {
-                console.log(error);
-                return false;
-            });
-    }
-
     function applySearch(input) {
         setSearchCriteria(input);
     }
@@ -104,8 +74,7 @@ const AuditLogPage = () => {
                         content={false}
                     >
                         <EventTable
-                            recordList={record}
-                            setChangeLocked={setChangeLocked}
+                            searchCriteria={searchCriteria}
                         />
                     </MainCard>
                 </Grid>
diff --git a/src/pages/Setting/SystemSetting/Table.js b/src/pages/Setting/SystemSetting/Table.js
index cdb3935..e198d6f 100644
--- a/src/pages/Setting/SystemSetting/Table.js
+++ b/src/pages/Setting/SystemSetting/Table.js
@@ -6,15 +6,16 @@ import {
 import MainCard from "components/MainCard";
 import * as React from "react";
 import { FiDataGrid } from "components/FiDataGrid";
+import { GET_SYS_PARAMS } from "utils/ApiPathConst";
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const Table = ({onRowClick, dataList}) => {
-    const [rows, setRows] = React.useState(dataList);
+const Table = ({onRowClick, searchCriteria}) => {
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
 
     React.useEffect(() => {
-        setRows(dataList);
-    }, [dataList]);
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
 
     const columns = [
         {
@@ -62,11 +63,14 @@ const Table = ({onRowClick, dataList}) => {
                 <div style={{ width: '100%' }}>
                 <Box sx={{ backgroundColor: "#fff", ml: 2 }} height='100%'>
                     <FiDataGrid
-                        rows={rows}
                         columns={columns}
                         customPageSize={10}
                         getRowHeight={() => 'auto'}
                         onRowClick={onRowClick}
+                        doLoad={{
+                            url:GET_SYS_PARAMS,
+                            params:_searchCriteria
+                        }}
                     />
                 </Box>
             </div>
diff --git a/src/pages/Setting/SystemSetting/index.js b/src/pages/Setting/SystemSetting/index.js
index 3ba0987..d9c5875 100644
--- a/src/pages/Setting/SystemSetting/index.js
+++ b/src/pages/Setting/SystemSetting/index.js
@@ -7,7 +7,7 @@ import {
 } from '@mui/material';
 import * as React from "react";
 
-import { GET_SYS_PARAMS, } from "utils/ApiPathConst";
+import { GET_SYS_PARAMS } from "utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 const Table = Loadable(React.lazy(() => import('./Table')));
@@ -32,78 +32,68 @@ const BackgroundHead = {
 
 
 const SystemSetting = () => {
-    const [dataList, setDataList] = React.useState([]);
+    const [searchCriteria, setSearchCriteria] = React.useState({});
     const [selectedItem, setSelectedItem] = React.useState({});
 
-    React.useEffect(() => {
-        loadList();
+    React.useEffect(()=>{
+        setSearchCriteria({})
     }, []);
 
-    const loadList=()=>{
-        HttpUtils.get({
-            url: GET_SYS_PARAMS,
-            onSuccess: (responseData)=>{
-                setDataList(responseData);
-            }
-        });
-    }
-
-    const onRowClick=(param)=>{
+    const onRowClick = (param) => {
         setSelectedItem(param.row);
     }
 
-    const onSave=(param)=>{
+    const onSave = (param) => {
         HttpUtils.post({
-            url: GET_SYS_PARAMS+"/update",
-            params:{
+            url: GET_SYS_PARAMS + "/update",
+            params: {
                 name: param.name,
                 value: param.value
             },
-            onSuccess: ()=>{
+            onSuccess: () => {
                 notifyActionSuccess();
                 loadList();
             }
         });
     }
 
-
     return (
-       
-            <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column"
-                justifyContent="flex-start">
-                <>
-                    <Grid item xs={12}>
-                        <div style={BackgroundHead}>
-                            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                                <Typography ml={15} color='#FFF' variant="h4">System Setting</Typography>
-                            </Stack>
-                        </div>
-                    </Grid>
 
-                    {/*col 1*/}
-                    <Grid item xs={12} >
-                        <Grid container direction="row" sx={{ p: 2 }} spacing={2} >
-                            <Grid item xs={12} md={8} lg={8} >
-                                <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }} >
-                                    <Table
-                                        dataList={dataList}
-                                        onRowClick={onRowClick}
-                                    />
-                                </Box>
-                            </Grid>
-                            <Grid item xs={12} md={4} lg={4}>
-                                <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}>
-                                    <Form
-                                        selectedItem={selectedItem}
-                                        onSave={onSave}
-                                    />
-                                </Box>
-                            </Grid>
+        <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column"
+            justifyContent="flex-start">
+            <>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">System Setting</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+
+                {/*col 1*/}
+                <Grid item xs={12} >
+                    <Grid container direction="row" sx={{ p: 2 }} spacing={2} >
+                        <Grid item xs={12} md={8} lg={8} >
+                            <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }} >
+                                <Table
+                                    searchCriteria={searchCriteria}
+                                    onRowClick={onRowClick}
+                                />
+                            </Box>
+                        </Grid>
+                        <Grid item xs={12} md={4} lg={4}>
+                            <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}>
+                                <Form
+                                    selectedItem={selectedItem}
+                                    onSave={onSave}
+                                />
+                            </Box>
                         </Grid>
                     </Grid>
-                    {/*col 2*/}
-                </>
-            </Grid>
+                </Grid>
+                {/*col 2*/}
+            </>
+        </Grid>
     );
 };