diff --git a/webclient-vue/src/components/area/AreaAssignSection.vue b/webclient-vue/src/components/area/AreaAssignSection.vue
index 38fec6d..b8012c8 100644
--- a/webclient-vue/src/components/area/AreaAssignSection.vue
+++ b/webclient-vue/src/components/area/AreaAssignSection.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="devices-panel">
-    <div class="block-title">Area</div>
+    <div class="block-title">{{ title }}</div>
     <div v-if="area" class="area-assigned">
       <router-link
         :to="{ name: 'area-detail', params: { id: area.id } }"
@@ -36,6 +36,8 @@
 
 const props = defineProps({
   item: { type: Object, default: null },
+  areaId: { type: [Number, String], default: null },
+  title: { type: String, default: "Area" },
   emptyMessage: {
     type: String,
     default: "This item is not assigned to any area.",
@@ -47,9 +49,9 @@
 const areasStore = useAreasStore();
 
 const area = computed(() => {
-  const areaId = props.item?.area_id;
-  if (!areaId) return null;
-  return areasStore.areasById[String(areaId)] || null;
+  const id = props.areaId != null ? props.areaId : props.item?.area_id;
+  if (!id) return null;
+  return areasStore.areasById[String(id)] || null;
 });
 </script>
 
diff --git a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
index 08611d0..23e4cca 100644
--- a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
+++ b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
@@ -21,12 +21,11 @@
         <template #actions>
           <GnButton variant="secondary" icon="ph-pencil" @click="openRename">Rename</GnButton>
           <GnButton
-            variant="secondary"
-            icon="ph-arrow-up"
-            :disabled="area.parent_id == null || area.parent_id === 0"
-            @click="unassign"
+            variant="primary"
+            icon="ph-map-pin"
+            @click="openAssign"
           >
-            Unassign
+            {{ area.parent_id > 0 ? 'Change parent area' : 'Assign to area' }}
           </GnButton>
           <GnButton
             :variant="isFavorite ? 'warning' : 'secondary'"
@@ -42,9 +41,26 @@
       <div class="area-meta">
         <GnBadge variant="secondary">{{ area.type }}</GnBadge>
         <code>{{ area.alias }}</code>
-        <span v-if="area.parent_id" class="area-parent">Parent: {{ parentArea?.display_name || area.parent_id }}</span>
+        <AreaBadgeLink :area="parentArea" :areaId="area.parent_id" />
       </div>
 
+      <AreaAssignSection
+        :areaId="area.parent_id > 0 ? area.parent_id : null"
+        title="Parent area"
+        emptyMessage="This area is not assigned to any parent area."
+        @assign="openAssign"
+      >
+        <template #action>
+          <GnButton
+            variant="primary"
+            icon="ph-map-pin"
+            @click="openAssign"
+          >
+            {{ area.parent_id > 0 ? 'Change parent area' : 'Assign to area' }}
+          </GnButton>
+        </template>
+      </AreaAssignSection>
+
       <div class="devices-panel">
         <div class="block-title">Devices ({{ areasStore.currentAreaDevices.length }})</div>
         <AppEmptyState
@@ -93,6 +109,33 @@
       </template>
     </GnModal>
 
+    <GnModal
+      :open="showAssignModal"
+      title="Assign to parent area"
+      @update:open="showAssignModal = $event"
+    >
+      <GnSelect
+        v-model="selectedAreaId"
+        label="Parent area"
+        :options="parentAreaOptions"
+        icon="ph-map-trifold"
+      />
+      <div v-if="assignError" class="form-group">
+        <GnAlert variant="danger">{{ assignError }}</GnAlert>
+      </div>
+      <template #footer>
+        <GnButton variant="secondary" @click="showAssignModal = false">Cancel</GnButton>
+        <GnButton
+          variant="primary"
+          icon="ph-check"
+          :loading="assignLoading"
+          @click="submitAssign"
+        >
+          Assign
+        </GnButton>
+      </template>
+    </GnModal>
+
     <GnConfirmDialog
       :open="showRemoveDialog"
       title="Remove area"
@@ -111,6 +154,7 @@
 import { useRoute, useRouter } from "vue-router";
 import { useAreasStore } from "../../../stores/areas";
 import { useFavoritesStore } from "../../../stores/favorites";
+import { useAreaAssign } from "../../../composables/useAreaAssign";
 import {
   GnPageHeader,
   GnButton,
@@ -119,24 +163,61 @@
   GnInput,
   GnAlert,
   GnTable,
+  GnSelect,
   GnConfirmDialog,
 } from "gnexus-ui-kit/vue";
 import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";
 import AppErrorState from "../../../components/feedback/AppErrorState.vue";
 import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
+import AreaBadgeLink from "../../../components/area/AreaBadgeLink.vue";
+import AreaAssignSection from "../../../components/area/AreaAssignSection.vue";
 
 const route = useRoute();
 const router = useRouter();
 const areasStore = useAreasStore();
 const favoritesStore = useFavoritesStore();
 
+const {
+  showAssignModal,
+  selectedAreaId,
+  assignLoading,
+  assignError,
+  openAssign: openAssignModal,
+  submitAssign: submitAssignCore,
+} = useAreaAssign();
+
 const area = computed(() => areasStore.areasById[String(route.params.id)] || null);
 const isFavorite = computed(() => (area.value ? favoritesStore.has(area.value.id) : false));
 const parentArea = computed(() => {
-  if (!area.value?.parent_id) return null;
+  if (!area.value || area.value.parent_id <= 0) return null;
   return areasStore.areasById[String(area.value.parent_id)] || null;
 });
 
+function getDescendantIds(areaId) {
+  const result = new Set();
+  const queue = [areaId];
+  while (queue.length) {
+    const current = queue.shift();
+    const children = areasStore.areas.filter((a) => a.parent_id === current);
+    for (const child of children) {
+      result.add(child.id);
+      queue.push(child.id);
+    }
+  }
+  return result;
+}
+
+const parentAreaOptions = computed(() => {
+  if (!area.value) return [];
+  const excluded = new Set([area.value.id, ...getDescendantIds(area.value.id)]);
+  return areasStore.areas
+    .filter((a) => !excluded.has(a.id))
+    .map((a) => ({
+      value: String(a.id),
+      label: `${a.display_name} (${a.type})`,
+    }));
+});
+
 const showRenameModal = ref(false);
 const renameLoading = ref(false);
 const renameError = ref("");
@@ -192,6 +273,15 @@
   router.push({ name: "areas-tree" });
 }
 
+function openAssign() {
+  openAssignModal(area.value?.parent_id > 0 ? area.value.parent_id : "");
+}
+
+async function submitAssign() {
+  const id = area.value?.id;
+  await submitAssignCore(id, (itemId, parentId) => areasStore.assignToArea(itemId, parentId));
+}
+
 async function unassign() {
   if (!area.value) return;
   await areasStore.unassignArea(area.value.id);
diff --git a/webclient-vue/src/stores/__tests__/areas.spec.js b/webclient-vue/src/stores/__tests__/areas.spec.js
index bb5c50f..52146c6 100644
--- a/webclient-vue/src/stores/__tests__/areas.spec.js
+++ b/webclient-vue/src/stores/__tests__/areas.spec.js
@@ -9,6 +9,7 @@
     updateDisplayName: vi.fn(),
     remove: vi.fn(),
     unassign: vi.fn(),
+    placeInArea: vi.fn(),
   },
 }));
 
@@ -161,4 +162,17 @@
       expect(store.areas[0].parent_id).toBe(0);
     });
   });
+
+  describe("assignToArea", () => {
+    it("sets parent_id on success", async () => {
+      areasApi.placeInArea.mockResolvedValue({ ok: true });
+
+      const store = useAreasStore();
+      store.areas = [{ id: 1, parent_id: 0 }];
+
+      await store.assignToArea(1, 2);
+
+      expect(store.areas[0].parent_id).toBe(2);
+    });
+  });
 });
diff --git a/webclient-vue/src/stores/areas.js b/webclient-vue/src/stores/areas.js
index f6a6bef..ced4ba3 100644
--- a/webclient-vue/src/stores/areas.js
+++ b/webclient-vue/src/stores/areas.js
@@ -176,13 +176,26 @@
       return result;
     },
 
+    async assignToArea(areaId, parentAreaId) {
+      const result = await areasApi.placeInArea({ target_id: areaId, place_in_area_id: parentAreaId });
+
+      if (result.ok) {
+        const idx = this.areas.findIndex((a) => a.id === areaId);
+        if (idx !== -1) {
+          this.areas.splice(idx, 1, { ...this.areas[idx], parent_id: Number(parentAreaId) });
+        }
+      }
+
+      return result;
+    },
+
     async unassignArea(areaId) {
       const result = await areasApi.unassign(areaId);
 
       if (result.ok) {
         const idx = this.areas.findIndex((a) => a.id === areaId);
         if (idx !== -1) {
-          this.areas[idx] = { ...this.areas[idx], parent_id: 0 };
+          this.areas.splice(idx, 1, { ...this.areas[idx], parent_id: 0 });
         }
       }