diff --git a/web/components/workspace/settings/members-list-item.tsx b/web/components/workspace/settings/members-list-item.tsx
index 751fc14e1..7cd7010f2 100644
--- a/web/components/workspace/settings/members-list-item.tsx
+++ b/web/components/workspace/settings/members-list-item.tsx
@@ -40,7 +40,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
   const { workspaceSlug } = router.query;
   // store
   const {
-    workspaceMember: { removeMember, updateMember, deleteWorkspaceInvitation },
+    workspaceMember: { removeMember, updateMember, updateMemberInvitation, deleteWorkspaceInvitation },
     user: { currentWorkspaceMemberInfo, currentWorkspaceRole, currentUser, currentUserSettings, leaveWorkspace },
   } = useMobxStore();
   // states
@@ -126,6 +126,10 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
 
   if (!currentWorkspaceMemberInfo) return null;
 
+  console.log("---");
+  console.log("member", member?.status, member);
+  console.log("---");
+
   return (
     <>
       <ConfirmWorkspaceMemberRemove
@@ -206,15 +210,26 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
             onChange={(value: TUserWorkspaceRole | undefined) => {
               if (!workspaceSlug || !value) return;
 
-              updateMember(workspaceSlug.toString(), member.id, {
-                role: value,
-              }).catch(() => {
-                setToastAlert({
-                  type: "error",
-                  title: "Error!",
-                  message: "An error occurred while updating member role. Please try again.",
+              if (!member?.status)
+                updateMemberInvitation(workspaceSlug.toString(), member.id, {
+                  role: value,
+                }).catch(() => {
+                  setToastAlert({
+                    type: "error",
+                    title: "Error!",
+                    message: "An error occurred while updating member role. Please try again.",
+                  });
+                });
+              else
+                updateMember(workspaceSlug.toString(), member.id, {
+                  role: value,
+                }).catch(() => {
+                  setToastAlert({
+                    type: "error",
+                    title: "Error!",
+                    message: "An error occurred while updating member role. Please try again.",
+                  });
                 });
-              });
             }}
             disabled={!hasRoleChangeAccess}
             placement="bottom-end"
diff --git a/web/services/workspace.service.ts b/web/services/workspace.service.ts
index 812e67735..42cfef450 100644
--- a/web/services/workspace.service.ts
+++ b/web/services/workspace.service.ts
@@ -166,6 +166,18 @@ export class WorkspaceService extends APIService {
       });
   }
 
+  async updateWorkspaceInvitation(
+    workspaceSlug: string,
+    invitationId: string,
+    data: Partial<IWorkspaceMember>
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async deleteWorkspaceInvitations(workspaceSlug: string, invitationId: string): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`)
       .then((response) => response?.data)
diff --git a/web/store/workspace/workspace-member.store.ts b/web/store/workspace/workspace-member.store.ts
index cc70f78cf..def30ea59 100644
--- a/web/store/workspace/workspace-member.store.ts
+++ b/web/store/workspace/workspace-member.store.ts
@@ -19,6 +19,11 @@ export interface IWorkspaceMemberStore {
   updateMember: (workspaceSlug: string, memberId: string, data: Partial<IWorkspaceMember>) => Promise<void>;
   removeMember: (workspaceSlug: string, memberId: string) => Promise<void>;
   inviteMembersToWorkspace: (workspaceSlug: string, data: IWorkspaceBulkInviteFormData) => Promise<any>;
+  updateMemberInvitation: (
+    workspaceSlug: string,
+    memberId: string,
+    data: Partial<IWorkspaceMemberInvitation>
+  ) => Promise<void>;
   deleteWorkspaceInvitation: (workspaceSlug: string, memberId: string) => Promise<void>;
   // computed
   workspaceMembers: IWorkspaceMember[] | null;
@@ -53,6 +58,7 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
       updateMember: action,
       removeMember: action,
       inviteMembersToWorkspace: action,
+      updateMemberInvitation: action,
       deleteWorkspaceInvitation: action,
       // computed
       workspaceMembers: computed,
@@ -183,6 +189,55 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
     }
   };
 
+  /**
+   * update workspace member invitation using workspace slug and member id and data
+   * @param workspaceSlug
+   * @param memberId
+   * @param data
+   */
+  updateMemberInvitation = async (
+    workspaceSlug: string,
+    memberId: string,
+    data: Partial<IWorkspaceMemberInvitation>
+  ) => {
+    const originalMemberInvitations = [...this.memberInvitations?.[workspaceSlug]]; // in case of error, we will revert back to original members
+
+    const memberInvitations = [...this.memberInvitations?.[workspaceSlug]];
+
+    const index = memberInvitations.findIndex((m) => m.id === memberId);
+    memberInvitations[index] = { ...memberInvitations[index], ...data };
+
+    // optimistic update
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+      this.memberInvitations = {
+        ...this.memberInvitations,
+        [workspaceSlug]: memberInvitations,
+      };
+    });
+
+    try {
+      await this.workspaceService.updateWorkspaceInvitation(workspaceSlug, memberId, data);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+        this.memberInvitations = {
+          ...this.memberInvitations,
+          [workspaceSlug]: originalMemberInvitations,
+        };
+      });
+
+      throw error;
+    }
+  };
+
   /**
    * delete the workspace invitation
    * @param workspaceSlug