diff --git a/src/components/data-grid/DataGridLoader.tsx b/src/components/data-grid/DataGridLoader.tsx
index 03666a5..31334ad 100644
--- a/src/components/data-grid/DataGridLoader.tsx
+++ b/src/components/data-grid/DataGridLoader.tsx
@@ -4,9 +4,9 @@ import { RefreshCw } from 'lucide-react';
 
 export const DataGridLoader = () => {
   return (
-    <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">
+    <div className="absolute inset-0 bg-white/50 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
+      <div className="bg-white flex items-center rounded-3xl">
+        <div className="flex flex-col items-center p-5">
           <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
           <span className="text-slate-500 font-medium">Refreshing data...</span>
         </div>