diff --git a/packages/app/src/components/invite-members/index.tsx b/packages/app/src/components/invite-members/index.tsx
index 3376c9b0ea..253146f85f 100644
--- a/packages/app/src/components/invite-members/index.tsx
+++ b/packages/app/src/components/invite-members/index.tsx
@@ -4,6 +4,8 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
 import { useState } from 'react';
+import { inviteMember, getUserByEmail } from '@pathfinder/data-services';
+import { useAppState } from '@/providers/app-state-provider';
 
 interface LoginModalProps {
   open: boolean;
@@ -33,16 +35,32 @@ export const debounce = <T extends (...args: any) => any>(
     }, delay);
   };
 };
+
 const gmailReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@gmail\.com$/;
 export const InviteMembers = ({ open, onClose }: LoginModalProps) => {
   const [canInvite, setCanInvite] = useState<boolean>(true);
+  const [email, setEmail] = useState<string>('');
   const [showMember, setShowMember] = useState<boolean>(true);
-  const [showTip, setShowTip] = useState<boolean>(true);
-
-  const InputChange = (value: string) => {
+  const [showTip, setShowTip] = useState<boolean>(false);
+  const { currentWorkspaceId } = useAppState();
+  const inputChange = (value: string) => {
+    setEmail(value);
     setShowMember(true);
     if (gmailReg.test(value)) {
       setShowTip(false);
+      debounce(
+        () => {
+          getUserByEmail({ email: value }).then(data => {
+            console.log('data: ', data);
+            if (data) {
+              setCanInvite(false);
+            }
+          });
+        },
+        300,
+        true
+      )();
+    } else {
     }
   };
   return (
@@ -63,7 +81,8 @@ export const InviteMembers = ({ open, onClose }: LoginModalProps) => {
             <InviteBox>
               <Input
                 width={360}
-                onChange={InputChange}
+                value={email}
+                onChange={inputChange}
                 onBlur={() => {
                   setShowMember(false);
                 }}
@@ -89,7 +108,19 @@ export const InviteMembers = ({ open, onClose }: LoginModalProps) => {
             </InviteBox>
           </Content>
           <Footer>
-            <Button shape="circle" type="primary" disabled={canInvite}>
+            <Button
+              shape="circle"
+              type="primary"
+              onClick={() => {
+                inviteMember({ id: currentWorkspaceId, email: email })
+                  .then(res => {
+                    console.log(res);
+                  })
+                  .catch(err => {
+                    console.log(err);
+                  });
+              }}
+            >
               Invite
             </Button>
           </Footer>
diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx
index c315972d0d..ff25400507 100644
--- a/packages/app/src/components/workspace-setting/workspace-setting.tsx
+++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx
@@ -38,7 +38,7 @@ import {
 import { useEffect, useState } from 'react';
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
-
+import { InviteMembers } from '../invite-members/index';
 enum ActiveTab {
   'general' = 'general',
   'members' = 'members',
@@ -162,6 +162,7 @@ const GeneralPage = () => {
 };
 
 const MembersPage = () => {
+  const [isInviteModalShow, setIsInviteModalShow] = useState(false);
   return (
     <div>
       <StyledMemberTitleContainer>
@@ -184,10 +185,23 @@ const MembersPage = () => {
         </StyledMemberListItem>
       </StyledMemberListContainer>
       <StyledMemberButtonContainer>
-        <Button type="primary" shape="circle">
+        <Button
+          onClick={() => {
+            setIsInviteModalShow(true);
+          }}
+          type="primary"
+          shape="circle"
+        >
           Invite Members
         </Button>
+        <InviteMembers
+          onClose={() => {
+            setIsInviteModalShow(false);
+          }}
+          open={isInviteModalShow}
+        ></InviteMembers>
       </StyledMemberButtonContainer>
+      Inv
     </div>
   );
 };