diff --git a/src/lib/feature/community/CommunityItem.svelte b/src/lib/feature/community/CommunityItem.svelte
index 40c43636..5c60bfa5 100644
--- a/src/lib/feature/community/CommunityItem.svelte
+++ b/src/lib/feature/community/CommunityItem.svelte
@@ -27,6 +27,29 @@
     showCounts = true,
     children,
   }: Props = $props()
+
+  // Optimistic subscribe state lives locally instead of mutating the
+  // `community` prop, which this component does not own (the list passes it
+  // unbound). Server state wins again on the next load.
+  let subscribedOverride = $state<boolean | undefined>(undefined)
+  let subscribed = $derived(
+    subscribedOverride ?? community.viewer?.subscribed === true,
+  )
+
+  async function toggleSubscribe(): Promise<void> {
+    const wasSubscribed = subscribed
+    try {
+      if (wasSubscribed) {
+        await coves().unsubscribe({ community: community.did })
+      } else {
+        await coves().subscribe({ community: community.did })
+      }
+      subscribedOverride = !wasSubscribed
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err)
+      toast({ content: errorMsg, type: 'error' })
+    }
+  }
 </script>
 
 {#snippet communityInfo()}
@@ -61,27 +84,9 @@
       <Icon src={InformationCircle} size="16" mini />
     </Button>
     {#if profile.current?.jwt}
-      {@const subscribed = community.viewer?.subscribed === true}
       <Button
         disabled={!profile.current?.jwt}
-        onclick={async () => {
-          const wasSubscribed = community.viewer?.subscribed === true
-          try {
-            if (wasSubscribed) {
-              await coves().unsubscribe({ community: community.did })
-            } else {
-              await coves().subscribe({ community: community.did })
-            }
-            if (community.viewer) {
-              community.viewer.subscribed = !wasSubscribed
-            } else {
-              community.viewer = { subscribed: !wasSubscribed }
-            }
-          } catch (err) {
-            const errorMsg = err instanceof Error ? err.message : String(err)
-            toast({ content: errorMsg, type: 'error' })
-          }
-        }}
+        onclick={toggleSubscribe}
         size="custom"
         title={subscribed
           ? $t('cards.community.subscribed')
diff --git a/src/lib/feature/community/CommunityItemBig.svelte b/src/lib/feature/community/CommunityItemBig.svelte
index 6788151c..e2121442 100644
--- a/src/lib/feature/community/CommunityItemBig.svelte
+++ b/src/lib/feature/community/CommunityItemBig.svelte
@@ -32,6 +32,29 @@
 
   let banner = $derived(getBanner(community))
   let bannerError = $state(false)
+
+  // Optimistic subscribe state lives locally instead of mutating the
+  // `community` prop, which this component does not own (the list passes it
+  // unbound). Server state wins again on the next load.
+  let subscribedOverride = $state<boolean | undefined>(undefined)
+  let subscribed = $derived(
+    subscribedOverride ?? community.viewer?.subscribed === true,
+  )
+
+  async function toggleSubscribe(): Promise<void> {
+    const wasSubscribed = subscribed
+    try {
+      if (wasSubscribed) {
+        await coves().unsubscribe({ community: community.did })
+      } else {
+        await coves().subscribe({ community: community.did })
+      }
+      subscribedOverride = !wasSubscribed
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err)
+      toast({ content: errorMsg, type: 'error' })
+    }
+  }
 </script>
 
 {#snippet communityInfo()}
@@ -104,27 +127,9 @@
       <Icon src={InformationCircle} size="16" mini />
     </Button>
     {#if profile.current?.jwt}
-      {@const subscribed = community.viewer?.subscribed === true}
       <Button
         disabled={!profile.current?.jwt}
-        onclick={async () => {
-          const wasSubscribed = community.viewer?.subscribed === true
-          try {
-            if (wasSubscribed) {
-              await coves().unsubscribe({ community: community.did })
-            } else {
-              await coves().subscribe({ community: community.did })
-            }
-            if (community.viewer) {
-              community.viewer.subscribed = !wasSubscribed
-            } else {
-              community.viewer = { subscribed: !wasSubscribed }
-            }
-          } catch (err) {
-            const errorMsg = err instanceof Error ? err.message : String(err)
-            toast({ content: errorMsg, type: 'error' })
-          }
-        }}
+        onclick={toggleSubscribe}
         title={subscribed
           ? $t('cards.community.subscribed')
           : $t('cards.community.subscribe')}