diff --git a/src/pages/members/manage-members/Columns.tsx b/src/pages/members/manage-members/Columns.tsx
index 6039aba..ae7159d 100644
--- a/src/pages/members/manage-members/Columns.tsx
+++ b/src/pages/members/manage-members/Columns.tsx
@@ -62,6 +62,20 @@ export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members
       );
     }
   },
+  {
+    accessorKey: 'msisdn',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Phone Number
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
   {
     accessorKey: 'group_name',
     header: ({ column }) => {
diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx
index d87a38a..545b816 100644
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@@ -11,10 +11,12 @@ 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_CUSTOMER = apiConfig.service_customer;
 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 +26,7 @@ const ManageMembers = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
+  const [groups, setGroups] = useState([]);
   const [isReloading, setIsReloading] = useState(false);
   const closeDialog = () => {
     setIsDialogOpen(false);
@@ -69,6 +72,16 @@ const ManageMembers = () => {
         }
       });
       setProfession(getProfession.data.data.list);
+      let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
+          params: {
+            limit: 50,
+            page: 1,
+            with_deleted: false,
+            order_field: 'name',
+            order_direction: 'ASC'
+          }
+      });
+      setGroups(getGroups.data.data.list);
     } catch (error: any) {
       toast.error(error.message);
       console.log(error);
@@ -259,6 +272,7 @@ const ManageMembers = () => {
                 createMember={createMember}
                 onReload={handleReload}
                 isReloading={isReloading}
+                groups={groups}
               />
             }
             onRowSelectionChange={(selected, table: any) => {
diff --git a/src/pages/members/manage-members/blocks/ListToolBar.tsx b/src/pages/members/manage-members/blocks/ListToolBar.tsx
index 89c8a1c..3815442 100644
--- a/src/pages/members/manage-members/blocks/ListToolBar.tsx
+++ b/src/pages/members/manage-members/blocks/ListToolBar.tsx
@@ -3,14 +3,22 @@ import { UserPlus } from 'lucide-react';
 import { KeenIcon, useDataGrid } from '@/components';
 import { DefaultTooltip } from '@/components';
 import { useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
 
 interface ListToolbarProps {
   createMember: () => void;
   onReload: () => void;
   isReloading: boolean;
+  groups: any;
 }
 
-const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps) => {
+const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolbarProps) => {
 
   const [groupFilter, setGroupFilter] = useState('');
   const [usernameFilter, setUsernameFilter] = useState('');
@@ -20,9 +28,11 @@ const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps)
     table.getColumn('username')?.setFilterValue(e.target.value);
   };
 
-  const handleGroupChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setGroupFilter(e.target.value);
-    table.getColumn('group_name')?.setFilterValue(e.target.value);
+  const handleGroupChange = (e: any) => {
+    let value = e.target.value;
+    if (value === '__all__') value = '';
+    setGroupFilter(value);
+    table.getColumn('group_name')?.setFilterValue(value);
   };
 
   return (
@@ -35,15 +45,21 @@ const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps)
               placeholder="Search Username"
               value={usernameFilter}
               onChange={handleUsernameChange}
-              className="input input-sm w-40"
-            />
-            <input
-              type="text"
-              placeholder="Search Group"
-              value={groupFilter}
-              onChange={handleGroupChange}
-              className="input input-sm w-40"
+              className="input w-40"
             />
+            <Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}>
+              <SelectTrigger className="input input-sm w-40 text-gray-500">
+                <SelectValue placeholder="Select Group" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={"__all__"}>All Group</SelectItem>
+                {groups.map((el: any, idx: any) => (
+                  <SelectItem key={idx} value={el.name}>
+                    {el.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
           <div className="flex gap-3 items-center">
             <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>