diff --git a/src/pages/groups/ManageGroups.tsx b/src/pages/groups/ManageGroups.tsx
index 5b8b5b9..460acc9 100644
--- a/src/pages/groups/ManageGroups.tsx
+++ b/src/pages/groups/ManageGroups.tsx
@@ -24,7 +24,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import Divider from '@mui/material/Divider';
 import ConfirmDialog from '@/components/confirm';
 import { toast } from 'sonner';
-import { Container, DataGridProvider, LoaderTransparant } from '@/components';
+import { Container, DataGridLoader, DataGridProvider, LoaderTransparant } from '@/components';
 import { ListToolBar } from './ListToolbar';
 import { RefreshCw } from 'lucide-react';
 import { setgroups } from 'process';
@@ -54,16 +54,15 @@ const ManageGroups = () => {
   const [isReloading, setIsReloading] = useState(false);
   // const closeDialog = () => {
   //   setIsDialogOpen(false);
-  //   setgroups(initGroup);
+  //   setgroups(initGroup);  
   // };
 
   useEffect(() => {
-    setLoading(true);
-    fetchGroups();
-    setLoading(false);
+   fetchGroups();
   }, []);
 
   async function fetchGroups(): Promise<void> {
+    setIsReloading(true);
     try {
       let groups = await axios.get(`${BASE_URL}/groups/list`, {
         params: {
@@ -88,7 +87,7 @@ const ManageGroups = () => {
       alert(error.message);
       console.log(error);
     } finally {
-      setLoading(false);
+      // setLoading(false);
       setIsReloading(false);
     }
   }
@@ -150,6 +149,7 @@ const ManageGroups = () => {
   };
 
   const handleYes = async () => {
+    setIsReloading(true);
     try {
       if (dialogType === 'create') {
         await axios.post(`${BASE_URL}/groups/create`, {
@@ -223,14 +223,15 @@ const ManageGroups = () => {
 
         <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
           {isReloading && (
-            <div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
-              <div className="bg-card flex items-center border shadow-sm rounded-md">
-                <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>
-            </div>
+            <DataGridLoader />
+            // <div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
+            //   <div className="bg-card flex items-center border shadow-sm rounded-md">
+            //     <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>
+            // </div>
           )}
           <DataGridProvider
             data={dataGroup}
diff --git a/src/pages/notification/hooks/ManageNotificationContext.tsx b/src/pages/notification/hooks/ManageNotificationContext.tsx
index e40e41b..8ec1253 100644
--- a/src/pages/notification/hooks/ManageNotificationContext.tsx
+++ b/src/pages/notification/hooks/ManageNotificationContext.tsx
@@ -73,7 +73,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
         },
         id: 'send',
         header: ({ column }) => <DataGridColumnHeader title="Send" column={column} />,
-        enableSorting: false,
+        enableSorting: true,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[200px]'
@@ -86,7 +86,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
         enableSorting: true,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[300px]'
+          headerClassName: 'w-[350px]'
         }
       },
       {