diff --git a/webclient-vue/src/composables/useAreaAssign.js b/webclient-vue/src/composables/useAreaAssign.js
index 8893adb..2059797 100644
--- a/webclient-vue/src/composables/useAreaAssign.js
+++ b/webclient-vue/src/composables/useAreaAssign.js
@@ -16,13 +16,9 @@
   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;
   }
 
@@ -45,35 +41,13 @@
     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 4141266..f79a4ba 100644
--- a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
+++ b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
@@ -112,21 +112,12 @@
           At least one root area must remain.
         </GnAlert>
       </div>
-      <div v-if="assignError || unassignError" class="form-group">
-        <GnAlert variant="danger">{{ assignError || unassignError }}</GnAlert>
+      <div v-if="assignError" class="form-group">
+        <GnAlert variant="danger">{{ assignError }}</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
           v-if="!isLastRoot"
           variant="primary"
           icon="ph-check"
@@ -139,6 +130,23 @@
     </GnModal>
 
     <GnModal
+      :open="showUnassignDialog"
+      title="Unassign from parent"
+      @update:open="showUnassignDialog = $event"
+    >
+      <p>{{ unassignDialogMessage }}</p>
+      <div v-if="unassignError" class="form-group">
+        <GnAlert variant="danger">{{ unassignError }}</GnAlert>
+      </div>
+      <template #footer>
+        <GnButton variant="secondary" @click="showUnassignDialog = false">Cancel</GnButton>
+        <GnButton variant="warning" icon="ph-x-circle" :loading="unassignLoading" @click="submitUnassign">
+          Unassign
+        </GnButton>
+      </template>
+    </GnModal>
+
+    <GnModal
       :open="showRemoveDialog"
       title="Remove area"
       @update:open="showRemoveDialog = $event"
@@ -195,11 +203,8 @@
   selectedAreaId,
   assignLoading,
   assignError,
-  unassignLoading,
-  unassignError,
   openAssign: openAssignModal,
   submitAssignCore,
-  submitUnassignCore,
 } = useAreaAssign();
 
 const area = computed(() => areasStore.areasById[String(route.params.id)] || null);
@@ -211,7 +216,7 @@
   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 }
+      { label: "Unassign from parent", icon: "ph-x-circle", onSelect: openUnassign }
     );
   } else {
     actions.push({
@@ -280,6 +285,11 @@
 const removeLoading = ref(false);
 const removeError = ref("");
 
+const showUnassignDialog = ref(false);
+const unassignDialogMessage = ref("");
+const unassignLoading = ref(false);
+const unassignError = ref("");
+
 function openRename() {
   if (!area.value) return;
   renameForm.areaId = area.value.id;
@@ -342,17 +352,28 @@
   }
 }
 
-async function handleUnassign() {
+function openUnassign() {
   if (!area.value) return;
-  await handleUnassignSubmit();
+  unassignDialogMessage.value = `Are you sure you want to unassign area "${area.value.display_name}" from its parent?`;
+  unassignError.value = "";
+  showUnassignDialog.value = true;
 }
 
-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 submitUnassign() {
+  if (!area.value) return;
+  unassignLoading.value = true;
+  unassignError.value = "";
+
+  const result = await areasStore.unassignArea(area.value.id);
+  unassignLoading.value = false;
+
+  if (!result.ok) {
+    unassignError.value = result.error?.message || "Failed to unassign area";
+    return;
   }
+
+  showUnassignDialog.value = false;
+  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 f9fdf3e..b72822f 100644
--- a/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
+++ b/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
@@ -116,21 +116,12 @@
         :options="areaOptions"
         icon="ph-map-trifold"
       />
-      <div v-if="assignError || unassignError" class="form-group">
-        <GnAlert variant="danger">{{ assignError || unassignError }}</GnAlert>
+      <div v-if="assignError" class="form-group">
+        <GnAlert variant="danger">{{ assignError }}</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"
@@ -142,6 +133,23 @@
     </GnModal>
 
     <GnModal
+      :open="showUnassignDialog"
+      title="Unassign from area"
+      @update:open="showUnassignDialog = $event"
+    >
+      <p>{{ unassignDialogMessage }}</p>
+      <div v-if="unassignError" class="form-group">
+        <GnAlert variant="danger">{{ unassignError }}</GnAlert>
+      </div>
+      <template #footer>
+        <GnButton variant="secondary" @click="showUnassignDialog = false">Cancel</GnButton>
+        <GnButton variant="warning" icon="ph-x-circle" :loading="unassignLoading" @click="submitUnassign">
+          Unassign
+        </GnButton>
+      </template>
+    </GnModal>
+
+    <GnModal
       :open="showRemoveDialog"
       title="Remove device"
       @update:open="showRemoveDialog = $event"
@@ -196,11 +204,8 @@
   selectedAreaId,
   assignLoading,
   assignError,
-  unassignLoading,
-  unassignError,
   openAssign: openAssignModal,
   submitAssignCore,
-  submitUnassignCore,
 } = useAreaAssign();
 
 const deviceId = computed(() => route.params.id);
@@ -228,6 +233,11 @@
 const removeLoading = ref(false);
 const removeError = ref("");
 
+const showUnassignDialog = ref(false);
+const unassignDialogMessage = ref("");
+const unassignLoading = ref(false);
+const unassignError = ref("");
+
 
 const deviceActions = computed(() => {
   const actions = [{ label: "Edit", icon: "ph-pencil", onSelect: openEdit }];
@@ -235,7 +245,7 @@
   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 }
+      { label: "Unassign from area", icon: "ph-x-circle", onSelect: openUnassign }
     );
   } else {
     actions.push({ label: "Assign to area", icon: "ph-map-pin", onSelect: openAssign });
@@ -297,16 +307,28 @@
   }
 }
 
-async function handleUnassign() {
+function openUnassign() {
   if (!device.value) return;
-  await handleUnassignSubmit();
+  unassignDialogMessage.value = `Are you sure you want to unassign device "${device.value.name || device.value.alias}" from its area?`;
+  unassignError.value = "";
+  showUnassignDialog.value = true;
 }
 
-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" });
+async function submitUnassign() {
+  if (!device.value) return;
+  unassignLoading.value = true;
+  unassignError.value = "";
+
+  const result = await devicesStore.unassignDevice(deviceId.value);
+  unassignLoading.value = false;
+
+  if (!result.ok) {
+    unassignError.value = result.error?.message || "Failed to unassign device";
+    return;
   }
+
+  showUnassignDialog.value = false;
+  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 04dccce..1203869 100644
--- a/webclient-vue/src/features/scripts/pages/ScriptDetailPage.vue
+++ b/webclient-vue/src/features/scripts/pages/ScriptDetailPage.vue
@@ -134,21 +134,12 @@
         :options="areaOptions"
         icon="ph-map-trifold"
       />
-      <div v-if="assignError || unassignError" class="form-group">
-        <GnAlert variant="danger">{{ assignError || unassignError }}</GnAlert>
+      <div v-if="assignError" class="form-group">
+        <GnAlert variant="danger">{{ assignError }}</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"
@@ -158,6 +149,23 @@
         </GnButton>
       </template>
     </GnModal>
+
+    <GnModal
+      :open="showUnassignDialog"
+      title="Unassign from area"
+      @update:open="showUnassignDialog = $event"
+    >
+      <p>{{ unassignDialogMessage }}</p>
+      <div v-if="unassignError" class="form-group">
+        <GnAlert variant="danger">{{ unassignError }}</GnAlert>
+      </div>
+      <template #footer>
+        <GnButton variant="secondary" @click="showUnassignDialog = false">Cancel</GnButton>
+        <GnButton variant="warning" icon="ph-x-circle" :loading="unassignLoading" @click="submitUnassign">
+          Unassign
+        </GnButton>
+      </template>
+    </GnModal>
   </section>
 </template>
 
@@ -199,11 +207,8 @@
   selectedAreaId,
   assignLoading,
   assignError,
-  unassignLoading,
-  unassignError,
   openAssign: openAssignModal,
   submitAssignCore,
-  submitUnassignCore,
 } = useAreaAssign();
 
 const scriptType = computed(() => route.params.type);
@@ -219,7 +224,7 @@
     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 }
+        { label: "Unassign from area", icon: "ph-x-circle", onSelect: openUnassign }
       );
     } else {
       actions.push({ label: "Assign to area", icon: "ph-map-pin", onSelect: openAssign });
@@ -358,17 +363,33 @@
   }
 }
 
-async function handleUnassign() {
+const showUnassignDialog = ref(false);
+const unassignDialogMessage = ref("");
+const unassignLoading = ref(false);
+const unassignError = ref("");
+
+function openUnassign() {
   if (!script.value) return;
-  await handleUnassignSubmit();
+  unassignDialogMessage.value = `Are you sure you want to unassign script "${script.value.name || script.value.alias}" from its area?`;
+  unassignError.value = "";
+  showUnassignDialog.value = true;
 }
 
-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 submitUnassign() {
+  if (!script.value) return;
+  unassignLoading.value = true;
+  unassignError.value = "";
+
+  const result = await scriptsStore.unassignFromArea(script.value.id);
+  unassignLoading.value = false;
+
+  if (!result.ok) {
+    unassignError.value = result.error?.message || "Failed to unassign script";
+    return;
   }
+
+  showUnassignDialog.value = false;
+  toast.success({ title: "Unassigned", text: "Script unassigned from area successfully" });
 }
 
 async function loadCode() {