diff --git a/src/pages/members/manage-members/Columns.tsx b/src/pages/members/manage-members/Columns.tsx
index 983178e..6039aba 100644
--- a/src/pages/members/manage-members/Columns.tsx
+++ b/src/pages/members/manage-members/Columns.tsx
@@ -1,3 +1,4 @@
+import { KeenIcon } from '@/components';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -18,7 +19,7 @@ export type Members = {
   created_at: Date;
 };
 
-export const columns: ColumnDef<Members>[] = [
+export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members>[] => [
   {
     accessorKey: 'no',
     header: ({ column }) => {
@@ -110,22 +111,12 @@ export const columns: ColumnDef<Members>[] = [
       const dataMembers = row.original;
 
       return (
-        <DropdownMenu>
-          {/* <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger> */}
-          {/* <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(dataMembers.id.toString())}
-            >
-              Copy account ID
-            </DropdownMenuItem>
-          </DropdownMenuContent> */}
-        </DropdownMenu>
+        <button
+          className="btn btn-sm btn-icon btn-clear btn-light"
+          onClick={() => handleUpdate(dataMembers)}
+        >
+          <KeenIcon icon="notepad-edit" />
+        </button>
       );
     }
   }
diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx
index 6d9cdd2..0203ab4 100644
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@@ -1,18 +1,20 @@
 import { DataTable } from '@/components/ui/DataTable';
 import { apiConfig } from '@/config/api.config';
-import { columns, Members, initialMember } from './Columns';
+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';
-import { LoaderTransparant } from '@/components';
+import { DataGridInner, LoaderTransparant } from '@/components';
+import { DataGridProvider } from '@/components';
 import { toast } from 'sonner';
 import { Breadcrumbs, Link } from '@mui/material';
 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';
 const ManageMembers = () => {
   const [loading, setLoading] = useState(false);
   const [members, setMembers] = useState([]);
@@ -23,8 +25,8 @@ const ManageMembers = () => {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
   const closeDialog = () => {
-    setIsDialogOpen(false)
-    setMember(initialMember)
+    setIsDialogOpen(false);
+    setMember(initialMember);
   };
   const { getUser } = useAuthContext();
 
@@ -50,7 +52,7 @@ const ManageMembers = () => {
         el.no = temp++;
         if (el.date_birth) {
           const d = new Date(el.date_birth);
-          el.date_birth = d.toLocaleString("sv-SE");
+          el.date_birth = d.toLocaleString('sv-SE');
         }
         el.name = el.fullname;
         return el;
@@ -58,14 +60,14 @@ const ManageMembers = () => {
       setMembers(resMembers);
       let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
         params: {
-            limit: 50,
-            page: 1,
-            with_deleted: false,
-            order_field: 'name',
-            order_direction: 'ASC',
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC'
         }
       });
-      setProfession(getProfession.data.data.list)
+      setProfession(getProfession.data.data.list);
     } catch (error: any) {
       toast.error(error.message);
       console.log(error);
@@ -74,14 +76,14 @@ const ManageMembers = () => {
 
   const handleUpdate = (data: any) => {
     setDialogType('update');
-    setSelectedMember(data.id)
+    setSelectedMember(data.id);
     setMember(data);
     setIsDialogOpen(true);
   };
 
   function createMember() {
     setDialogType('create');
-    setSelectedMember('')
+    setSelectedMember('');
     setMember(initialMember);
     setIsDialogOpen(true);
   }
@@ -92,7 +94,7 @@ const ManageMembers = () => {
   }
 
   const handleYes = async () => {
-    setLoading(true)
+    setLoading(true);
     const userLogin: any = await getUser();
     const updateData: any = member;
     updateData.updated_by = userLogin.data ? userLogin.data.id : '';
@@ -135,7 +137,7 @@ const ManageMembers = () => {
       for (const property in updateData) {
         if (updateData[property]) form.append(property, updateData[property]);
       }
-      
+
       if (dialogType === 'update') {
         await axios.put(`${BASE_URL}/customer/update/${selectedMember}`, form, {
           headers: {
@@ -145,8 +147,8 @@ const ManageMembers = () => {
         toast.success('Success Edit Member');
       }
       if (dialogType === 'create') {
-        const createMember:any = member
-        createMember.pin = "admin"
+        const createMember: any = member;
+        createMember.pin = 'admin';
         delete createMember.password;
         delete createMember.try_pin;
         delete createMember.license_number;
@@ -162,7 +164,7 @@ const ManageMembers = () => {
         delete createMember.approval_description_premium;
         delete createMember.approval_description_agent;
         delete createMember.language;
-        await axios.post(`${BASE_URL}/customers/create`, member)
+        await axios.post(`${BASE_URL}/customers/create`, member);
         toast.success('Success Create Member. PIN sent to email');
       }
     } catch (error: any) {
@@ -171,12 +173,12 @@ const ManageMembers = () => {
       setDialogOpen(false);
       closeDialog();
       await fetchCustomers();
-      setLoading(false)
+      setLoading(false);
     }
   };
 
   function setShowAddDialog(el: any) {
-    setIsDialogOpen(el)
+    setIsDialogOpen(el);
   }
 
   if (loading) return <LoaderTransparant />;
@@ -196,7 +198,7 @@ const ManageMembers = () => {
             onYes={handleYes}
             onNo={() => setDialogOpen(false)}
           />
-          { (member.id!=='' || dialogType==='create') ? (
+          {member.id !== '' || dialogType === 'create' ? (
             <DetailMember
               showAddDialog={isDialogOpen}
               setShowAddDialog={setShowAddDialog}
@@ -207,9 +209,13 @@ const ManageMembers = () => {
               profession={profession}
               dialogType={dialogType}
             />
-          ): ""}
-          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Members</h1>
-          <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
+          ) : (
+            ''
+          )}
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
+            Manage Members
+          </h1>
+          <div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
             <Breadcrumbs>
               <Link underline="none" color="inherit" href="/">
                 <span className="text-sm hover:underline">Dashboard</span>
@@ -225,13 +231,20 @@ const ManageMembers = () => {
           </div>
           <div className="w-full overflow-x-auto px-4">
             <div className="min-w-[800px]">
-              <DataTable
+              <DataGridProvider
                 data={members}
-                createData={createMember}
-                columns={columns}
-                onUpdate={handleUpdate}
-                onDelete={null}
-              />
+                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>
         </div>
diff --git a/src/pages/members/manage-members/blocks/ListToolBar.tsx b/src/pages/members/manage-members/blocks/ListToolBar.tsx
new file mode 100644
index 0000000..77742b8
--- /dev/null
+++ b/src/pages/members/manage-members/blocks/ListToolBar.tsx
@@ -0,0 +1,53 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+
+const ListToolbar = ({ createMember }: { createMember: () => void }) => {
+  const { table, reload } = useDataGrid();
+  const [   usernameFilter, setUsernameFilter] = useState('');
+  const [emailFilter, setEmailFilter] = useState('');
+
+  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUsernameFilter(e.target.value);
+    table.getColumn('username')?.setFilterValue(e.target.value);
+  };
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmailFilter(e.target.value);
+    table.getColumn('email')?.setFilterValue(e.target.value);
+  };
+
+  return (
+    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex gap-3 items-center">
+            <input
+              type="text"
+              placeholder="Search Username"
+              value={usernameFilter}
+              onChange={handleUsernameChange}
+              className="input input-sm w-40"
+            />
+          </div>
+          <div className="flex gap-3 items-center">
+            <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" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;