diff --git a/web/components/project/join-project-modal.tsx b/web/components/project/join-project-modal.tsx
index 22fc2e9f5..67adc881d 100644
--- a/web/components/project/join-project-modal.tsx
+++ b/web/components/project/join-project-modal.tsx
@@ -21,22 +21,21 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
   // states
   const [isJoiningLoading, setIsJoiningLoading] = useState(false);
   // store
-  const { project: projectStore } = useMobxStore();
+  const {
+    project: { joinProject },
+  } = useMobxStore();
   // router
   const router = useRouter();
 
   const handleJoin = () => {
     setIsJoiningLoading(true);
 
-    projectStore
-      .joinProject(workspaceSlug, [project.id])
+    joinProject(workspaceSlug, [project.id])
       .then(() => {
-        setIsJoiningLoading(false);
-
         router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
         handleClose();
       })
-      .catch(() => {
+      .finally(() => {
         setIsJoiningLoading(false);
       });
   };
@@ -73,8 +72,9 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
                     Join Project?
                   </Dialog.Title>
                   <p>
-                    Are you sure you want to join the project <span className="font-semibold break-words">{project?.name}</span>?
-                    Please click the &apos;Join Project&apos; button below to continue.
+                    Are you sure you want to join the project{" "}
+                    <span className="font-semibold break-words">{project?.name}</span>? Please click the &apos;Join
+                    Project&apos; button below to continue.
                   </p>
                   <div className="space-y-3" />
                 </div>
diff --git a/web/services/project/project.service.ts b/web/services/project/project.service.ts
index e4f1149f2..5fb0e4a10 100644
--- a/web/services/project/project.service.ts
+++ b/web/services/project/project.service.ts
@@ -69,7 +69,7 @@ export class ProjectService extends APIService {
   }
 
   async joinProject(workspaceSlug: string, project_ids: string[]): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/join/`, { project_ids })
+    return this.post(`/api/users/me/workspaces/${workspaceSlug}/projects/invitations/`, { project_ids })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;