diff --git a/src/components/accounts/Account.tsx b/src/components/accounts/Account.tsx
index 8a6c996..90c091b 100644
--- a/src/components/accounts/Account.tsx
+++ b/src/components/accounts/Account.tsx
@@ -245,6 +245,7 @@ const Account = () => {
 
     return (
         <>
+        
             <Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
                 isLoading={isLoading} />
 
diff --git a/src/components/accounts/TransactionDataTable.tsx b/src/components/accounts/TransactionDataTable.tsx
index c5178fd..4784589 100644
--- a/src/components/accounts/TransactionDataTable.tsx
+++ b/src/components/accounts/TransactionDataTable.tsx
@@ -3,23 +3,24 @@ import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
 import api from '../../config/api';
 import { Transaction } from '../transactions/Transactions';
 import { useNavigate } from 'react-router-dom';
+
 import { FaCheck } from 'react-icons/fa';
 
 
 
+
 const formatDate = (timestamp: number) => {
     return new Date(timestamp * 1000).toLocaleString();
 };
 
 const TransactionDataTable = () => {
+    const navigate = useNavigate()
     const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
     const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
     const [activeAccountId, setActiveAccountId] = useState<string | null>(
         JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
     );
 
-    const navigate = useNavigate();
-
     const fetchTransactions = async () => {
         console.log("fetchTransactions")
         try {
@@ -47,6 +48,9 @@ const TransactionDataTable = () => {
         setCurrentEmailId(userDetails?.email)
     }, []);
 
+
+    
+
     return (
         <>
             {transactions.length > 0 && (
diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx
index da45268..b4cce43 100644
--- a/src/components/contacts/Contacts.tsx
+++ b/src/components/contacts/Contacts.tsx
@@ -1,20 +1,32 @@
 import { useEffect, useState, useRef } from 'react';
 import { FaEllipsisV } from 'react-icons/fa';
 import api from '../../config/api';
-import ContactFormModal from './ContactsFormModal';
+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,
+    firstName: string
+    lastName: string
+    email: string
+}]
 
 const Contacts = () => {
     const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
-    const [contacts, setContacts] = useState([]);
+    const [contacts, setContacts] = useState<ContactSchema>([]);
     const [loading, setLoading] = useState(true);
     const [openMenuId, setOpenMenuId] = useState(null);
     const blurTimeoutRef = useRef(null);
     const [createAndInviteLoader, setCreateAndInviteLoader] = useState(false);
     const [showModal, setShowModal] = useState(false)
+    const [editJsonData, setEditJsonData] = useState({})
+    const [actionStatus, setActionStatus] = useState("")
+    console.log("editJsonData", editJsonData)
 
     const fetchContacts = async () => {
+        setLoading(true)
         try {
             const res = await api.get(`/api/accounts/${activeAccountId}/contacts`);
             setContacts(res.data.content || []);
@@ -33,17 +45,27 @@ const Contacts = () => {
 
     const handleEdit = (contactId) => {
         console.log('Edit contact:', contactId);
+        let jsonEditData = contacts.find((prev) => prev.id === contactId)
+        setEditJsonData(jsonEditData)
+        setActionStatus("Edit")
+        setShowModal((prev) => !prev)
         setOpenMenuId(null);
     };
 
-    const handleDelete = async(contactId) => {
+    const handleDelete = async (contactId) => {
         console.log('Delete contact:', contactId);
-        setOpenMenuId(null);
+
         try {
-           let res = await api.delete(`/api/accounts/{accountId}/contacts/{contactId}`)
-           if (res?.data) {
-            
-           } 
+            let res = await api.delete(`/api/accounts/${activeAccountId}/contacts/${contactId}`)
+            if (res?.data) {
+                toast.error("Contact delete successfully!", {
+                    position: "top-center",
+                    autoClose: 1500,
+                    transition: Bounce,
+                });
+                fetchContacts()
+                setOpenMenuId(null);
+            }
         } catch (error) {
             console.log(error)
         }
@@ -61,10 +83,15 @@ const Contacts = () => {
         }, 100);
     };
 
-    const handleContactSubmit = async (data: ContactData) => {
+    const handleContactSubmit = async (data: ContactData, type: "") => {
         try {
+            let res;
             setCreateAndInviteLoader(true);
-            const res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]);
+            if (type === 'Edit') {
+                res = await api.put(`/api/accounts/${activeAccountId}/contacts`, [data])
+            } else {
+                res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]);
+            }
             if (res.status === 200) {
                 toast.success('Contact created successfully!', {
                     position: "top-center",
@@ -72,16 +99,16 @@ const Contacts = () => {
                     transition: Bounce,
                 });
                 setShowModal(false)
-                 fetchContacts();
+                fetchContacts();
             }
             // return res;
         } catch (err) {
             console.error("Error creating contact", err);
             toast.error("Failed to create contact", {
-                    position: "top-center",
-                    autoClose: 1500,
-                    transition: Bounce,
-                });
+                position: "top-center",
+                autoClose: 1500,
+                transition: Bounce,
+            });
             throw err;
         } finally {
             setCreateAndInviteLoader(false);
@@ -90,82 +117,84 @@ const Contacts = () => {
 
     return (
         <>
-            <div className='flex justify-end my-2 cursor-pointer'>
-                <div
-                    onClick={() => setShowModal((prev) => !prev)}
-                    className="flex items-center gap-2 bg-[var(--primary)] px-3 py-1.5 rounded-sm  hover:opacity-90 ">
-                    <IoMdAdd className="text-white" />
-                    <button
-                        className="text-white rounded text-sm hover:opacity-90 cursor-pointer">
-                        Add Contact
-                    </button>
+            <div className='px-1.5'>
+                <div className='flex justify-end my-2 cursor-pointer'>
+                    <div
+                        onClick={() => setShowModal((prev) => !prev)}
+                        className="flex items-center gap-2 bg-[var(--primary)] px-3 py-1.5 rounded-sm  hover:opacity-90 ">
+                        <IoMdAdd className="text-white" />
+                        <button
+                            className="text-white rounded text-sm hover:opacity-90 cursor-pointer">
+                            Add Contact
+                        </button>
+                    </div>
                 </div>
-            </div>
-            <div className="overflow-y-auto max-h-[79vh] border border-gray-200 rounded shadow-sm  no-scrollbar">
-                <table className="min-w-full text-sm bg-white">
-                    <thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider sticky top-0 z-10">
-                        <tr>
-                            <th className="px-4 py-3 text-left">First Name</th>
-                            <th className="px-4 py-3 text-left">Last Name</th>
-                            <th className="px-4 py-3 text-left">Email</th>
-                            <th className="px-4 py-3 text-center">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-200">
-                        {loading ? (
+                <div className="overflow-y-auto max-h-[79vh] border border-gray-200 rounded shadow-sm  no-scrollbar">
+                    <table className="min-w-full text-sm bg-white">
+                        <thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider sticky top-0 z-10">
                             <tr>
-                                <td colSpan="4" className="text-center py-4">Loading...</td>
+                                <th className="px-4 py-3 text-left">First Name</th>
+                                <th className="px-4 py-3 text-left">Last Name</th>
+                                <th className="px-4 py-3 text-left">Email</th>
+                                <th className="px-4 py-3 text-center">Actions</th>
                             </tr>
-                        ) : contacts.length === 0 ? (
-                            <tr>
-                                <td colSpan="4" className="text-center py-4">No contacts found.</td>
-                            </tr>
-                        ) : (
-                            contacts.map((contact) => (
-                                <tr key={contact.id} className="hover:bg-gray-50">
-                                    <td className="px-4 py-3">{contact.firstName}</td>
-                                    <td className="px-4 py-3">{contact.lastName}</td>
-                                    <td className="px-4 py-3">{contact.email}</td>
-                                    <td className="px-4 py-3 text-center">
-                                        <div
-                                            className="relative inline-block"
-                                            tabIndex={0}
-                                            onBlur={handleBlur}
-                                        >
-                                            <button
-                                                className="text-gray-600 hover:text-black p-1 focus:outline-none"
-                                                onClick={() => toggleMenu(contact.id)}
-                                            >
-                                                <FaEllipsisV />
-                                            </button>
-
-                                            {openMenuId === contact.id && (
-                                                <div className="absolute top-full right-0 mt-1 bg-white border border-gray-200 rounded shadow-lg z-20 min-w-[100px]">
-                                                    <button
-                                                        onClick={() => handleEdit(contact.id)}
-                                                        className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
-                                                    >
-                                                        Edit
-                                                    </button>
-                                                    <button
-                                                        onClick={() => handleDelete(contact.id)}
-                                                        className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
-                                                    >
-                                                        Delete
-                                                    </button>
-                                                </div>
-                                            )}
-                                        </div>
-                                    </td>
+                        </thead>
+                        <tbody className="divide-y divide-gray-200">
+                            {loading ? (
+                                <tr>
+                                    <td colSpan="4" className="relative h-100"><LoaderUi/></td>
                                 </tr>
-                            ))
-                        )}
-                    </tbody>
-                </table>
-                {showModal &&
-                    <ContactFormModal onSubmit={handleContactSubmit}
-                        loading={createAndInviteLoader} setShowModal={setShowModal}/>
-                }
+                            ) : contacts.length === 0 ? (
+                                <tr>
+                                    <td colSpan="4" className="text-center py-4">No contacts found.</td>
+                                </tr>
+                            ) : (
+                                contacts.map((contact) => (
+                                    <tr key={contact.id} className="hover:bg-gray-50">
+                                        <td className="px-4 py-3">{contact.firstName}</td>
+                                        <td className="px-4 py-3">{contact.lastName}</td>
+                                        <td className="px-4 py-3">{contact.email}</td>
+                                        <td className="px-4 py-3 text-center">
+                                            <div
+                                                className="relative inline-block"
+                                                tabIndex={0}
+                                                onBlur={handleBlur}
+                                            >
+                                                <button
+                                                    className="text-gray-600 hover:text-black p-1 focus:outline-none"
+                                                    onClick={() => toggleMenu(contact.id)}
+                                                >
+                                                    <FaEllipsisV />
+                                                </button>
+
+                                                {openMenuId === contact.id && (
+                                                    <div className="absolute top-full right-0 mt-1 bg-white border border-gray-200 rounded shadow-lg z-20 min-w-[100px]">
+                                                        <button
+                                                            onMouseDown={() => handleEdit(contact.id)}
+                                                            className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
+                                                        >
+                                                            Edit
+                                                        </button>
+                                                        <button
+                                                            onMouseDown={() => handleDelete(contact.id)}
+                                                            className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
+                                                        >
+                                                            Delete
+                                                        </button>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))
+                            )}
+                        </tbody>
+                    </table>
+                    {showModal &&
+                        <ContactFormModal onSubmit={handleContactSubmit}
+                            loading={createAndInviteLoader} setShowModal={setShowModal} actionStatus={actionStatus} editJsonData={editJsonData} />
+                    }
+                </div>
             </div>
         </>
     );
diff --git a/src/components/contacts/ContactsFormModal.tsx b/src/components/contacts/ContactsFormModal.tsx
index ea6416a..fcc25cc 100644
--- a/src/components/contacts/ContactsFormModal.tsx
+++ b/src/components/contacts/ContactsFormModal.tsx
@@ -1,5 +1,5 @@
 // ContactForm.tsx
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FaSpinner } from 'react-icons/fa';
 
 export interface ContactData {
@@ -17,9 +17,11 @@ interface Props {
     onSubmit: (data: ContactData) => void;
     loading: boolean;
     setShowModal: () => React.Dispatch<React.SetStateAction<boolean>>
+    actionStatus: string,
+    editJsonData: any
 }
 
-const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {
+const ContactFormModal = ({ onSubmit, loading, setShowModal, actionStatus, editJsonData }: Props) => {
     const [formData, setFormData] = useState<ContactData>({
         email: '',
         firstName: '',
@@ -32,6 +34,21 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {
 
     const [errors, setErrors] = useState<{ [key: string]: string }>({});
 
+    useEffect(() => {
+        if (actionStatus === 'Edit' && editJsonData) {
+            setFormData({
+                email: editJsonData.email,
+                firstName: editJsonData.firstName,
+                lastName: editJsonData.lastName,
+                title: editJsonData.title,
+                company: editJsonData.company,
+                website: editJsonData.website,
+                phones: editJsonData.phones,
+            })
+        }
+    }, [actionStatus, editJsonData])
+
+
     const handleChange = (field: keyof ContactData, value: string) => {
         setFormData((prev) => ({ ...prev, [field]: value }));
         if (errors[field]) {
@@ -115,13 +132,22 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {
 
     const handleSubmit = async () => {
         const validationErrors = validate();
+        let type = 'Add'
+        let payload = formData
         if (Object.keys(validationErrors).length > 0) {
             setErrors(validationErrors);
             return;
         }
-
         try {
-            await onSubmit(formData);
+            if (actionStatus === 'Edit') {
+                type = 'Edit'
+                payload = {
+                    ...formData,
+                    contactId: editJsonData.id
+                }
+            }
+            await onSubmit(payload, type);
+
 
             setFormData({
                 email: '',
@@ -158,7 +184,7 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {
                                 <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">{label}</label>
                                 <input
                                     type={field === 'email' ? 'email' : 'text'}
-                                    value={formData[field as keyof ContactData] as string}
+                                    value={(formData[field as keyof ContactData] as string) || ''}
                                     onChange={(e) => handleChange(field as keyof ContactData, e.target.value)}
                                     required={true}
                                     className="px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
@@ -172,7 +198,7 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {
                     <div>
                         <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">Phone Numbers</label>
                         <div className="space-y-2">
-                            {formData.phones.map((phone, index) => (
+                            {formData?.phones?.map((phone, index) => (
                                 <div key={index} className="flex flex-col gap-1">
                                     <div className="flex items-center gap-2">
                                         <input
@@ -229,8 +255,9 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {
                                     SAVING...
                                 </>
                             ) : (
-                                'SAVE CONTACT'
+                                `${actionStatus?.toUpperCase() || 'SAVE'} CONTACT`
                             )}
+
                         </button>
 
 
diff --git a/src/components/dashboard/Loader.tsx b/src/components/dashboard/Loader.tsx
index 3f1093e..8e094ca 100644
--- a/src/components/dashboard/Loader.tsx
+++ b/src/components/dashboard/Loader.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { LuSignature } from "react-icons/lu";
 import { useSelector } from 'react-redux';
 import { RootState } from '../../store/store';
diff --git a/src/components/templates/Templates.tsx b/src/components/templates/Templates.tsx
index 2d1bba3..140abf1 100644
--- a/src/components/templates/Templates.tsx
+++ b/src/components/templates/Templates.tsx
@@ -139,7 +139,15 @@ const Templates = () => {
             </tr>
           </thead>
 
-          {templates.length > 0 ? (
+          {loading ? (
+            <tbody>
+              <tr>
+                <td colSpan="6" className="relative h-100">
+                  <LoaderUi />
+                </td>
+              </tr>
+            </tbody>
+          ) : templates.length > 0 ? (
             <tbody className="divide-y divide-gray-200">
               {templates.map((item, index) => {
                 return (
@@ -200,18 +208,12 @@ const Templates = () => {
           ) : (
             <tbody>
               <tr>
-                <td colSpan="5">
-                  <div className="relative flex justify-center items-center h-100 w-full">
-                    {/* Pulsing background div */}
-                    <div className="absolute inset-0 bg-gradient-to-r from-gray-200 to-white animate-pulse"></div>
-
-                    {/* Loader stays on top, no animation */}
-                    <LoaderUi classStyle="relative h-16 w-16" />
-                  </div>
+                <td colSpan="6" className="text-center py-10 text-gray-500">
+                  No templates found.
                 </td>
-
               </tr>
             </tbody>
+
           )}
         </table>
       </div>
diff --git a/src/helper/LoaderUi.tsx b/src/helper/LoaderUi.tsx
index c118cb4..0113300 100644
--- a/src/helper/LoaderUi.tsx
+++ b/src/helper/LoaderUi.tsx
@@ -1,19 +1,22 @@
+import { LuSignature } from "react-icons/lu";
 
 interface StyleProps {
-  classStyle : string
+  classStyle?: string;
 }
 
-const LoaderUi = ({ classStyle }:StyleProps) => {
-    return (
-        <div className={classStyle}>
-            <svg viewBox="0 0 240 240" height="240" width="240" className="pl">
-                <circle strokeLinecap="round" strokeDashoffset="-330" strokeDasharray="0 660" strokeWidth="20" stroke="#000" fill="none" r="105" cy="120" cx="120" className="pl__ring pl__ring--a"></circle>
-                <circle strokeLinecap="round" strokeDashoffset="-110" strokeDasharray="0 220" strokeWidth="20" stroke="#000" fill="none" r="35" cy="120" cx="120" className="pl__ring pl__ring--b"></circle>
-                <circle strokeLinecap="round" strokeDasharray="0 440" strokeWidth="20" stroke="#000" fill="none" r="70" cy="120" cx="85" className="pl__ring pl__ring--c"></circle>
-                <circle strokeLinecap="round" strokeDasharray="0 440" strokeWidth="20" stroke="#000" fill="none" r="70" cy="120" cx="155" className="pl__ring pl__ring--d"></circle>
-            </svg>
-        </div>
-    )
-}
+const LoaderUi = ({ classStyle = '' }: StyleProps) => {
+  return (
+    <div className={`absolute inset-0 flex items-center justify-center z-50 ${classStyle}`}>
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black/30 opacity-60"></div>
 
-export default LoaderUi
\ No newline at end of file
+      {/* Loader box */}
+      <div className="relative z-10 bg-[var(--loaderBg)] flex flex-col justify-center items-center gap-2 px-16 py-8 rounded-md shadow-lg">
+        <LuSignature className="text-4xl font-bold animate-text" />
+        <p>Loading...!</p>
+      </div>
+    </div>
+  );
+};
+
+export default LoaderUi;