diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx
index 8d27979..7ac36d2 100644
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@@ -3,7 +3,6 @@ import { apiConfig } from '@/config/api.config';
 import { getColumns, Members, initialMember } from './Columns';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
-// import CustomerDialog from './CustomerDetailModal';
 import DetailMember from './blocks/DetailMember';
 import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
@@ -15,6 +14,7 @@ const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 const BASE_URL = apiConfig.service_customer;
 import { Helmet } from 'react-helmet';
 import ListToolbar from './blocks/ListToolBar';
+import { RefreshCw } from 'lucide-react';
 const ManageMembers = () => {
   const [loading, setLoading] = useState(false);
   const [members, setMembers] = useState([]);
@@ -24,6 +24,7 @@ const ManageMembers = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
+  const [isReloading, setIsReloading] = useState(false);
   const closeDialog = () => {
     setIsDialogOpen(false);
     setMember(initialMember);
@@ -36,7 +37,7 @@ const ManageMembers = () => {
     setLoading(false);
   }, []);
 
-  async function fetchCustomers() {
+  async function fetchCustomers(): Promise<void> {
     try {
       let customers = await axios.get(`${BASE_URL}/customer/list`, {
         params: {
@@ -46,7 +47,7 @@ const ManageMembers = () => {
           order_field: 'created_at',
           order_direction: 'DESC'
         }
-      });
+      }); 
       let temp = 1;
       let resMembers = customers.data.data.list.map((el: any) => {
         el.no = temp++;
@@ -71,8 +72,12 @@ const ManageMembers = () => {
     } catch (error: any) {
       toast.error(error.message);
       console.log(error);
+    } finally {
+      setLoading(false)
+      setIsReloading(false);
     }
   }
+  
 
   const handleUpdate = (data: any) => {
     setDialogType('update');
@@ -92,7 +97,10 @@ const ManageMembers = () => {
     setMember(data);
     setDialogOpen(true);
   }
-
+  const handleReload = () => {
+    setIsReloading(true);
+    fetchCustomers();
+  };
   const handleYes = async () => {
     setLoading(true);
     const userLogin: any = await getUser();
@@ -225,20 +233,29 @@ const ManageMembers = () => {
           </Link>
         </Breadcrumbs>
         {/* <div className="w-full overflow-x-auto px-4"> */}
-        <div className="grid gap-5 lg:gap-7.5 mt-5">
-          <DataGridProvider
-            data={members}
-            pagination={{ size: 25 }}
-            columns={getColumns(handleUpdate)}
-            layout={{ card: true }}
-            serverSide={false}
-            toolbar={<ListToolbar createMember={createMember} />}
-            onRowSelectionChange={(selected, table: any) => {
-              const selectedRow = table.getSelectedRowModel().rows[0];
-              if (selectedRow) handleUpdate(selectedRow.original);
-            }}
-          ></DataGridProvider>
-        </div>
+        
+        <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
+  {isReloading && (
+    <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
+      <div className="flex flex-col items-center">
+        <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
+        <span className="text-slate-500 font-medium">Refreshing data...</span>
+      </div>
+    </div>
+  )}
+  <DataGridProvider
+    data={members}
+    pagination={{ size: 20 }}
+    columns={getColumns(handleUpdate)}
+    layout={{ card: true }}
+    serverSide={false}
+    toolbar={<ListToolbar createMember={createMember} onReload={handleReload} isReloading={isReloading} />}
+    onRowSelectionChange={(selected, table: any) => {
+      const selectedRow = table.getSelectedRowModel().rows[0];
+      if (selectedRow) handleUpdate(selectedRow.original);
+    }}
+  ></DataGridProvider>
+</div>
         {/* </div> */}
       </Container>
     </>
diff --git a/src/pages/members/manage-members/blocks/ListToolBar.tsx b/src/pages/members/manage-members/blocks/ListToolBar.tsx
index 3e77aca..dbf32bb 100644
--- a/src/pages/members/manage-members/blocks/ListToolBar.tsx
+++ b/src/pages/members/manage-members/blocks/ListToolBar.tsx
@@ -1,12 +1,20 @@
-import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
+import { UserPlus } from 'lucide-react';
+import { KeenIcon, useDataGrid } from '@/components';
+import { DefaultTooltip } from '@/components';
 import { useState } from 'react';
 
-const ListToolbar = ({ createMember }: { createMember: () => void }) => {
-  const { table, reload } = useDataGrid();
-  const [usernameFilter, setUsernameFilter] = useState('');
-  const [emailFilter, setEmailFilter] = useState('');
+interface ListToolbarProps {
+  createMember: () => void;
+  onReload: () => void;
+  isReloading: boolean;
+}
 
+const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps) => {
+
+  const [emailFilter, setEmailFilter] = useState('');
+  const [usernameFilter, setUsernameFilter] = useState('');
+  const {table}=useDataGrid();
   const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUsernameFilter(e.target.value);
     table.getColumn('username')?.setFilterValue(e.target.value);
@@ -34,9 +42,20 @@ const ListToolbar = ({ createMember }: { createMember: () => void }) => {
             <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
               Add Data
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
-                <KeenIcon icon="arrows-circle" />
+            <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
+              <Button 
+                variant="outline" 
+                className="h-7.5" 
+                onClick={onReload}
+                disabled={isReloading}
+              >
+                {isReloading ? (
+                  <div className="animate-spin">
+                    <KeenIcon icon="arrows-circle" />
+                  </div>
+                ) : (
+                  <KeenIcon icon="arrows-circle" />
+                )}
               </Button>
             </DefaultTooltip>
           </div>
@@ -46,4 +65,4 @@ const ListToolbar = ({ createMember }: { createMember: () => void }) => {
   );
 };
 
-export default ListToolbar;
+export default ListToolbar;
\ No newline at end of file
diff --git a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
index 7d9e413..47833ba 100644
--- a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
+++ b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
@@ -12,6 +12,7 @@ const ListToolbar = () => {
   useEffect(() => {
     const timer = setTimeout(() => {
       table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
     }, 200);
 
     return () => clearTimeout(timer);