diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx
index e164dfd..b4cce43 100644
--- a/src/components/contacts/Contacts.tsx
+++ b/src/components/contacts/Contacts.tsx
@@ -4,6 +4,7 @@ import api from '../../config/api';
 import ContactFormModal, { ContactData } from './ContactsFormModal';
 import { Bounce, toast } from 'react-toastify';
 import { IoMdAdd } from 'react-icons/io';
+import LoaderUi from '../../helper/LoaderUi';
 
 type ContactSchema = [{
     id: number,
@@ -25,6 +26,7 @@ const Contacts = () => {
     console.log("editJsonData", editJsonData)
 
     const fetchContacts = async () => {
+        setLoading(true)
         try {
             const res = await api.get(`/api/accounts/${activeAccountId}/contacts`);
             setContacts(res.data.content || []);
@@ -140,7 +142,7 @@ const Contacts = () => {
                         <tbody className="divide-y divide-gray-200">
                             {loading ? (
                                 <tr>
-                                    <td colSpan="4" className="text-center py-4">Loading...</td>
+                                    <td colSpan="4" className="relative h-100"><LoaderUi/></td>
                                 </tr>
                             ) : contacts.length === 0 ? (
                                 <tr>