diff --git a/web/components/groups/groups-button.tsx b/web/components/groups/groups-button.tsx
index 810a70bc..f60ed0af 100644
--- a/web/components/groups/groups-button.tsx
+++ b/web/components/groups/groups-button.tsx
@@ -72,29 +72,34 @@ function GroupsList(props: { groups: Group[] }) {
 
 function GroupItem(props: { group: Group; className?: string }) {
   const { group, className } = props
+  const user = useUser()
+  const memberIds = useMemberIds(group.id)
   return (
     <Row className={clsx('items-center justify-between gap-2 p-2', className)}>
       <Row className="line-clamp-1 items-center gap-2">
         <GroupLinkItem group={group} />
       </Row>
-      <JoinOrLeaveGroupButton group={group} />
+      <JoinOrLeaveGroupButton
+        group={group}
+        user={user}
+        isMember={user ? memberIds?.includes(user.id) : false}
+      />
     </Row>
   )
 }
 
 export function JoinOrLeaveGroupButton(props: {
   group: Group
+  isMember: boolean
+  user: User | undefined | null
   small?: boolean
   className?: string
 }) {
-  const { group, small, className } = props
-  const currentUser = useUser()
-  const memberIds = useMemberIds(group.id)
-  const isMember = memberIds?.includes(currentUser?.id ?? '') ?? false
+  const { group, small, className, isMember, user } = props
   const smallStyle =
     'btn !btn-xs border-2 border-gray-500 bg-white normal-case text-gray-500 hover:border-gray-500 hover:bg-white hover:text-gray-500'
 
-  if (!currentUser) {
+  if (!user) {
     if (!group.anyoneCanJoin)
       return <div className={clsx(className, 'text-gray-500')}>Closed</div>
     return (
@@ -107,12 +112,12 @@ export function JoinOrLeaveGroupButton(props: {
     )
   }
   const onJoinGroup = () => {
-    joinGroup(group, currentUser.id).catch(() => {
+    joinGroup(group, user.id).catch(() => {
       toast.error('Failed to join group')
     })
   }
   const onLeaveGroup = () => {
-    leaveGroup(group, currentUser.id).catch(() => {
+    leaveGroup(group, user.id).catch(() => {
       toast.error('Failed to leave group')
     })
   }
diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx
index 4626aa77..b4046c4c 100644
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@@ -331,6 +331,7 @@ function GroupOverview(props: {
   const shareUrl = `https://${ENV_CONFIG.domain}${groupPath(
     group.slug
   )}${postFix}`
+  const isMember = user ? members.map((m) => m.id).includes(user.id) : false
 
   return (
     <>
@@ -349,7 +350,11 @@ function GroupOverview(props: {
           ) : (
             user && (
               <Row>
-                <JoinOrLeaveGroupButton group={group} />
+                <JoinOrLeaveGroupButton
+                  group={group}
+                  user={user}
+                  isMember={isMember}
+                />
               </Row>
             )
           )}
diff --git a/web/pages/groups.tsx b/web/pages/groups.tsx
index 92a813aa..0afdaba5 100644
--- a/web/pages/groups.tsx
+++ b/web/pages/groups.tsx
@@ -134,6 +134,8 @@ export default function Groups(props: {
                           key={group.id}
                           group={group}
                           creator={creatorsDict[group.creatorId]}
+                          user={user}
+                          isMember={memberGroupIds.includes(group.id)}
                         />
                       ))}
                     </div>
@@ -159,6 +161,8 @@ export default function Groups(props: {
                             key={group.id}
                             group={group}
                             creator={creatorsDict[group.creatorId]}
+                            user={user}
+                            isMember={memberGroupIds.includes(group.id)}
                           />
                         ))}
                     </div>
@@ -173,8 +177,13 @@ export default function Groups(props: {
   )
 }
 
-export function GroupCard(props: { group: Group; creator: User | undefined }) {
-  const { group, creator } = props
+export function GroupCard(props: {
+  group: Group
+  creator: User | undefined
+  user: User | undefined | null
+  isMember: boolean
+}) {
+  const { group, creator, user, isMember } = props
   const { totalContracts } = group
   return (
     <Col className="relative min-w-[20rem]  max-w-xs gap-1 rounded-xl bg-white p-8 shadow-md hover:bg-gray-100">
@@ -201,7 +210,12 @@ export function GroupCard(props: { group: Group; creator: User | undefined }) {
         <div className="text-sm text-gray-500">{group.about}</div>
       </Row>
       <Col className={'mt-2 h-full items-start justify-end'}>
-        <JoinOrLeaveGroupButton group={group} className={'z-10 w-24'} />
+        <JoinOrLeaveGroupButton
+          group={group}
+          className={'z-10 w-24'}
+          user={user}
+          isMember={isMember}
+        />
       </Col>
     </Col>
   )