diff --git a/src/components/Project/ProjectCard.jsx b/src/components/Project/ProjectCard.jsx
index ffbce90f..e9f993a3 100644
--- a/src/components/Project/ProjectCard.jsx
+++ b/src/components/Project/ProjectCard.jsx
@@ -8,8 +8,11 @@ import ProjectRepository from "../../repositories/ProjectRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import {MANAGE_PROJECT} from "../../utils/constants";
-import { getProjectStatusColor,getProjectStatusName } from "../../utils/projectStatus";
+import { MANAGE_PROJECT } from "../../utils/constants";
+import {
+  getProjectStatusColor,
+  getProjectStatusName,
+} from "../../utils/projectStatus";
 
 const ProjectCard = ({ projectData }) => {
   const [projectInfo, setProjectInfo] = useState(projectData);
@@ -17,13 +20,16 @@ const ProjectCard = ({ projectData }) => {
   const [showModal, setShowModal] = useState(false);
   const navigate = useNavigate();
   const ManageProject = useHasUserPermission(MANAGE_PROJECT);
+  const [modifyProjectLoading, setMdifyProjectLoading] = useState(false);
 
   const handleShow = async () => {
     try {
+      setMdifyProjectLoading(true);
       const response = await ProjectRepository.getProjectByprojectId(
         projectInfo.id
       );
       setProjectDetails(response.data);
+      setMdifyProjectLoading(false);
       setShowModal(true);
     } catch (error) {
       showToast("Failed to load project details", "error");
@@ -39,7 +45,6 @@ const ProjectCard = ({ projectData }) => {
 
   const handleClose = () => setShowModal(false);
 
-
   const handleViewProject = () => {
     navigate(`/projects/${projectData.id}`);
   };
@@ -64,9 +69,11 @@ const ProjectCard = ({ projectData }) => {
           if (projects_list) {
             const updatedProjectsList = projects_list.map((project) =>
               project.id === projectInfo.id
-                ? { ...project, ...response.data, 
-                  // tenant: project.tenant 
-                }
+                ? {
+                    ...project,
+                    ...response.data,
+                    // tenant: project.tenant
+                  }
                 : project
             );
             cacheData("projectslist", updatedProjectsList);
@@ -81,6 +88,16 @@ const ProjectCard = ({ projectData }) => {
     }
   };
 
+  const handleModify = async (e) => {
+    e.stopPropagation(); // prevent event bubbling
+    setLoading(true);
+    try {
+      await handleShow(); // call your API or async function
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <>
       {showModal && projectDetails && (
@@ -133,14 +150,17 @@ const ProjectCard = ({ projectData }) => {
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
-                    <i
-                      className="bx bx-dots-vertical-rounded bx-sm text-muted"
-                      data-bs-toggle="tooltip"
-                      data-bs-offset="0,8"
-                      data-bs-placement="top"
-                      data-bs-custom-class="tooltip-dark"
-                      title="More Action"
-                    ></i>
+                    {modifyProjectLoading? <div class="spinner-border spinner-border-sm text-secondary" role="status">
+                      <span class="visually-hidden">Loading...</span>
+                    </div> :
+                      <i
+                        className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                        data-bs-toggle="tooltip"
+                        data-bs-offset="0,8"
+                        data-bs-placement="top"
+                        data-bs-custom-class="tooltip-dark"
+                        title="More Action"
+                      ></i>}
                   </button>
                   <ul className="dropdown-menu dropdown-menu-end">
                     <li>