diff --git a/webclient-vue/src/composables/useAreaAssign.js b/webclient-vue/src/composables/useAreaAssign.js
index 2059797..8893adb 100644
--- a/webclient-vue/src/composables/useAreaAssign.js
+++ b/webclient-vue/src/composables/useAreaAssign.js
@@ -16,9 +16,13 @@
   const assignLoading = ref(false);
   const assignError = ref("");
 
+  const unassignLoading = ref(false);
+  const unassignError = ref("");
+
   function openAssign(currentAreaId) {
     selectedAreaId.value = currentAreaId ? String(currentAreaId) : "";
     assignError.value = "";
+    unassignError.value = "";
     showAssignModal.value = true;
   }
 
@@ -41,13 +45,35 @@
     return result;
   }
 
+  async function submitUnassignCore(itemId, unassignFn) {
+    if (!itemId || !unassignFn) {
+      return;
+    }
+    unassignLoading.value = true;
+    unassignError.value = "";
+
+    const result = await unassignFn(itemId);
+    unassignLoading.value = false;
+
+    if (!result.ok) {
+      unassignError.value = result.error?.message || "Failed to unassign";
+      return result;
+    }
+
+    showAssignModal.value = false;
+    return result;
+  }
+
   return {
     areaOptions,
     showAssignModal,
     selectedAreaId,
     assignLoading,
     assignError,
+    unassignLoading,
+    unassignError,
     openAssign,
     submitAssignCore,
+    submitUnassignCore,
   };
 }
diff --git a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
index 2a55d2a..36eb8e2 100644
--- a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
+++ b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
@@ -106,16 +106,25 @@
         :options="parentAreaOptions"
         icon="ph-map-trifold"
       />
-      <div v-if="assignError" class="form-group">
-        <GnAlert variant="danger">{{ assignError }}</GnAlert>
+      <div v-if="assignError || unassignError" class="form-group">
+        <GnAlert variant="danger">{{ assignError || unassignError }}</GnAlert>
       </div>
       <template #footer>
         <GnButton variant="secondary" @click="showAssignModal = false">Cancel</GnButton>
         <GnButton
+          v-if="area?.parent_id > 0"
+          variant="warning"
+          icon="ph-map-pin-slash"
+          :loading="unassignLoading"
+          @click="handleUnassignSubmit"
+        >
+          Unassign
+        </GnButton>
+        <GnButton
           variant="primary"
           icon="ph-check"
           :loading="assignLoading"
-          @click="() => { console.log('Assign button clicked'); handleAssignSubmit(); }"
+          @click="handleAssignSubmit"
         >
           Assign
         </GnButton>
@@ -179,21 +188,27 @@
   selectedAreaId,
   assignLoading,
   assignError,
+  unassignLoading,
+  unassignError,
   openAssign: openAssignModal,
   submitAssignCore,
+  submitUnassignCore,
 } = useAreaAssign();
 
 const area = computed(() => areasStore.areasById[String(route.params.id)] || null);
 const isFavorite = computed(() => (area.value ? favoritesStore.has(area.value.id) : false));
 
 const areaActions = computed(() => {
-  const actions = [
-    { label: "Rename", icon: "ph-pencil", onSelect: openRename },
-  ];
+  const actions = [{ label: "Rename", icon: "ph-pencil", onSelect: openRename }];
 
-  if (!isLastRoot.value) {
+  if (area.value?.parent_id > 0) {
+    actions.push(
+      { label: "Change parent area", icon: "ph-map-pin", onSelect: openAssign },
+      { label: "Unassign from parent", icon: "ph-map-pin-slash", onSelect: handleUnassign }
+    );
+  } else if (!isLastRoot.value) {
     actions.push({
-      label: area.value?.parent_id > 0 ? "Change parent area" : "Assign to area",
+      label: "Assign to area",
       icon: "ph-map-pin",
       onSelect: openAssign,
     });
@@ -320,9 +335,17 @@
   }
 }
 
-async function unassign() {
+async function handleUnassign() {
   if (!area.value) return;
-  await areasStore.unassignArea(area.value.id);
+  await handleUnassignSubmit();
+}
+
+async function handleUnassignSubmit() {
+  const id = area.value?.id;
+  const result = await submitUnassignCore(id, areasStore.unassignArea.bind(areasStore));
+  if (result?.ok) {
+    toast.success({ title: "Unassigned", text: "Area unassigned from parent successfully" });
+  }
 }
 
 async function init() {
diff --git a/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue b/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
index 58eaf9e..f9fdf3e 100644
--- a/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
+++ b/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
@@ -116,12 +116,21 @@
         :options="areaOptions"
         icon="ph-map-trifold"
       />
-      <div v-if="assignError" class="form-group">
-        <GnAlert variant="danger">{{ assignError }}</GnAlert>
+      <div v-if="assignError || unassignError" class="form-group">
+        <GnAlert variant="danger">{{ assignError || unassignError }}</GnAlert>
       </div>
       <template #footer>
         <GnButton variant="secondary" @click="showAssignModal = false">Cancel</GnButton>
         <GnButton
+          v-if="device?.area_id"
+          variant="warning"
+          icon="ph-map-pin-slash"
+          :loading="unassignLoading"
+          @click="handleUnassignSubmit"
+        >
+          Unassign
+        </GnButton>
+        <GnButton
           variant="primary"
           icon="ph-check"
           :loading="assignLoading"
@@ -187,8 +196,11 @@
   selectedAreaId,
   assignLoading,
   assignError,
+  unassignLoading,
+  unassignError,
   openAssign: openAssignModal,
   submitAssignCore,
+  submitUnassignCore,
 } = useAreaAssign();
 
 const deviceId = computed(() => route.params.id);
@@ -217,21 +229,30 @@
 const removeError = ref("");
 
 
-const deviceActions = computed(() => [
-  { label: "Edit", icon: "ph-pencil", onSelect: openEdit },
-  {
-    label: device.value?.area_id ? "Change area" : "Assign to area",
-    icon: "ph-map-pin",
-    onSelect: openAssign,
-  },
-  {
-    label: "Reboot",
-    icon: "ph-arrow-clockwise",
-    disabled: devicesStore.isRebooting(device.value?.id),
-    onSelect: reboot,
-  },
-  { label: "Remove", icon: "ph-trash", danger: true, onSelect: remove },
-]);
+const deviceActions = computed(() => {
+  const actions = [{ label: "Edit", icon: "ph-pencil", onSelect: openEdit }];
+
+  if (device.value?.area_id) {
+    actions.push(
+      { label: "Change area", icon: "ph-map-pin", onSelect: openAssign },
+      { label: "Unassign from area", icon: "ph-map-pin-slash", onSelect: handleUnassign }
+    );
+  } else {
+    actions.push({ label: "Assign to area", icon: "ph-map-pin", onSelect: openAssign });
+  }
+
+  actions.push(
+    {
+      label: "Reboot",
+      icon: "ph-arrow-clockwise",
+      disabled: devicesStore.isRebooting(device.value?.id),
+      onSelect: reboot,
+    },
+    { label: "Remove", icon: "ph-trash", danger: true, onSelect: remove }
+  );
+
+  return actions;
+});
 
 function openEdit() {
   if (!device.value) return;
@@ -276,9 +297,16 @@
   }
 }
 
-async function unassign() {
+async function handleUnassign() {
   if (!device.value) return;
-  await devicesStore.unassignDevice(deviceId.value);
+  await handleUnassignSubmit();
+}
+
+async function handleUnassignSubmit() {
+  const result = await submitUnassignCore(deviceId.value, devicesStore.unassignDevice.bind(devicesStore));
+  if (result?.ok) {
+    toast.success({ title: "Unassigned", text: "Device unassigned from area successfully" });
+  }
 }
 
 function remove() {
diff --git a/webclient-vue/src/features/scripts/pages/ScriptDetailPage.vue b/webclient-vue/src/features/scripts/pages/ScriptDetailPage.vue
index 5557bc0..04dccce 100644
--- a/webclient-vue/src/features/scripts/pages/ScriptDetailPage.vue
+++ b/webclient-vue/src/features/scripts/pages/ScriptDetailPage.vue
@@ -134,12 +134,21 @@
         :options="areaOptions"
         icon="ph-map-trifold"
       />
-      <div v-if="assignError" class="form-group">
-        <GnAlert variant="danger">{{ assignError }}</GnAlert>
+      <div v-if="assignError || unassignError" class="form-group">
+        <GnAlert variant="danger">{{ assignError || unassignError }}</GnAlert>
       </div>
       <template #footer>
         <GnButton variant="secondary" @click="showAssignModal = false">Cancel</GnButton>
         <GnButton
+          v-if="script?.area_id"
+          variant="warning"
+          icon="ph-map-pin-slash"
+          :loading="unassignLoading"
+          @click="handleUnassignSubmit"
+        >
+          Unassign
+        </GnButton>
+        <GnButton
           variant="primary"
           icon="ph-check"
           :loading="assignLoading"
@@ -190,8 +199,11 @@
   selectedAreaId,
   assignLoading,
   assignError,
+  unassignLoading,
+  unassignError,
   openAssign: openAssignModal,
   submitAssignCore,
+  submitUnassignCore,
 } = useAreaAssign();
 
 const scriptType = computed(() => route.params.type);
@@ -204,11 +216,14 @@
 const scriptActions = computed(() => {
   const actions = [];
   if (!isScope.value) {
-    actions.push({
-      label: script.value?.area_id ? "Change area" : "Assign to area",
-      icon: "ph-map-pin",
-      onSelect: openAssign,
-    });
+    if (script.value?.area_id) {
+      actions.push(
+        { label: "Change area", icon: "ph-map-pin", onSelect: openAssign },
+        { label: "Unassign from area", icon: "ph-map-pin-slash", onSelect: handleUnassign }
+      );
+    } else {
+      actions.push({ label: "Assign to area", icon: "ph-map-pin", onSelect: openAssign });
+    }
   }
   if (isAction.value) {
     actions.push({
@@ -343,6 +358,19 @@
   }
 }
 
+async function handleUnassign() {
+  if (!script.value) return;
+  await handleUnassignSubmit();
+}
+
+async function handleUnassignSubmit() {
+  const id = script.value?.id;
+  const result = await submitUnassignCore(id, scriptsStore.unassignFromArea.bind(scriptsStore));
+  if (result?.ok) {
+    toast.success({ title: "Unassigned", text: "Script unassigned from area successfully" });
+  }
+}
+
 async function loadCode() {
   const id = scriptId.value;
   if (!id || !isScope.value) return;