diff --git a/webclient-vue/src/features/areas/components/AreaTreeNode.vue b/webclient-vue/src/features/areas/components/AreaTreeNode.vue
index b489a4f..74f398f 100644
--- a/webclient-vue/src/features/areas/components/AreaTreeNode.vue
+++ b/webclient-vue/src/features/areas/components/AreaTreeNode.vue
@@ -7,7 +7,7 @@
         type="button"
         :disabled="isLeaf"
         :aria-expanded="isOpen"
-        @click.stop="isOpen = !isOpen"
+        @click.stop="toggle"
       >
         {{ isLeaf ? "·" : isOpen ? "−" : "+" }}
       </button>
@@ -42,9 +42,10 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { useRouter } from "vue-router";
 import { GnBadge } from "gnexus-ui-kit/vue";
+import { useAreasStore } from "../../../stores/areas";
 import AreaFavoriteButton from "./AreaFavoriteButton.vue";
 
 const props = defineProps({
@@ -59,11 +60,17 @@
 });
 
 const router = useRouter();
-const isOpen = ref(false);
+const areasStore = useAreasStore();
+
+const isOpen = computed(() => areasStore.isNodeExpanded(props.area.id));
 const isLeaf = computed(() => !props.area.children?.length);
 const isCycle = computed(() => props.ancestors.includes(String(props.area.id)));
 const nextAncestors = computed(() => [...props.ancestors, String(props.area.id)]);
 
+function toggle() {
+  areasStore.toggleNode(props.area.id);
+}
+
 function goToDetail() {
   router.push({ name: "area-detail", params: { id: String(props.area.id) } });
 }
diff --git a/webclient-vue/src/features/areas/components/__tests__/AreaTreeNode.spec.js b/webclient-vue/src/features/areas/components/__tests__/AreaTreeNode.spec.js
index 2d0ea51..4f56f60 100644
--- a/webclient-vue/src/features/areas/components/__tests__/AreaTreeNode.spec.js
+++ b/webclient-vue/src/features/areas/components/__tests__/AreaTreeNode.spec.js
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mount } from "@vue/test-utils";
 import { setActivePinia, createPinia } from "pinia";
+import { useAreasStore } from "../../../../stores/areas";
 import { useFavoritesStore } from "../../../../stores/favorites";
 import AreaTreeNode from "../AreaTreeNode.vue";
 
@@ -55,6 +56,29 @@
     expect(wrapper.text()).toContain("Pantry");
   });
 
+  it("toggles expansion via store", async () => {
+    const areasStore = useAreasStore();
+    const area = makeArea({
+      children: [
+        { id: 2, display_name: "Pantry", type: "room", alias: "pantry", parent_id: 1, children: [] },
+      ],
+    });
+
+    const wrapper = mount(AreaTreeNode, {
+      props: { area },
+    });
+
+    expect(areasStore.isNodeExpanded(1)).toBe(false);
+
+    await wrapper.find(".tree-toggle").trigger("click");
+
+    expect(areasStore.isNodeExpanded(1)).toBe(true);
+
+    await wrapper.find(".tree-toggle").trigger("click");
+
+    expect(areasStore.isNodeExpanded(1)).toBe(false);
+  });
+
   it("navigates to area detail on card click", () => {
     const wrapper = mount(AreaTreeNode, {
       props: { area: makeArea() },
diff --git a/webclient-vue/src/stores/areas.js b/webclient-vue/src/stores/areas.js
index 1eb9539..c32f59b 100644
--- a/webclient-vue/src/stores/areas.js
+++ b/webclient-vue/src/stores/areas.js
@@ -45,6 +45,22 @@
 
   const areaTree = computed(() => buildAreaTree(areas.value));
 
+  const expandedNodeIds = ref(new Set());
+
+  function toggleNode(id) {
+    const next = new Set(expandedNodeIds.value);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    expandedNodeIds.value = next;
+  }
+
+  function isNodeExpanded(id) {
+    return expandedNodeIds.value.has(id);
+  }
+
   async function loadAreas() {
     return listRequest.execute(async (signal) => {
       const result = await areasApi.list({ signal });
@@ -222,6 +238,9 @@
     errorAreaDetail: detailRequest.error,
     areasById,
     areaTree,
+    expandedNodeIds,
+    toggleNode,
+    isNodeExpanded,
     loadAreas,
     loadAreaDetail,
     clearAreaDetail,