diff --git a/src/__tests__/changeCategories.test.ts b/src/__tests__/changeCategories.test.ts
new file mode 100644
index 0000000..a804afe
--- /dev/null
+++ b/src/__tests__/changeCategories.test.ts
@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { CHANGE_CATEGORIES, getChangeCategory, getChangeLabel } from '@/constants/changeCategories'
+
+describe('changeCategories', () => {
+  it('categorizes tags as live', () => {
+    expect(getChangeCategory('tags')).toBe('live')
+  })
+
+  it('categorizes name as live', () => {
+    expect(getChangeCategory('name')).toBe('live')
+  })
+
+  it('categorizes description as live', () => {
+    expect(getChangeCategory('description')).toBe('live')
+  })
+
+  it('categorizes cores as restart', () => {
+    expect(getChangeCategory('cores')).toBe('restart')
+  })
+
+  it('categorizes memory as restart', () => {
+    expect(getChangeCategory('memory')).toBe('restart')
+  })
+
+  it('returns human-readable labels', () => {
+    expect(getChangeLabel('cores')).toBe('CPU Cores')
+    expect(getChangeLabel('memory')).toBe('Memory')
+    expect(getChangeLabel('tags')).toBe('Tags')
+    expect(getChangeLabel('name')).toBe('Name')
+    expect(getChangeLabel('description')).toBe('Description')
+  })
+
+  it('returns unknown category for unmapped fields', () => {
+    expect(getChangeCategory('someFutureField')).toBe('redeploy')
+  })
+
+  it('has all fields in CHANGE_CATEGORIES', () => {
+    expect(Object.keys(CHANGE_CATEGORIES)).toEqual(
+      expect.arrayContaining(['tags', 'name', 'description', 'cores', 'memory'])
+    )
+  })
+})
diff --git a/src/__tests__/usePendingChanges.test.ts b/src/__tests__/usePendingChanges.test.ts
new file mode 100644
index 0000000..4e32609
--- /dev/null
+++ b/src/__tests__/usePendingChanges.test.ts
@@ -0,0 +1,119 @@
+import { describe, it, expect } from 'vitest'
+import { ref } from 'vue'
+import { usePendingChanges } from '@/composables/usePendingChanges'
+
+function makeNodeData(desired: Record<string, unknown>, actual: Record<string, unknown>) {
+  return ref({
+    deployed: true,
+    desiredConfig: desired,
+    actualConfig: actual,
+  })
+}
+
+describe('usePendingChanges', () => {
+  it('returns empty when desired matches actual', () => {
+    const data = makeNodeData(
+      { name: 'web01', cores: 2, memory: 2048, tags: ['admin'] },
+      { name: 'web01', cores: 2, memory: 2048, tags: ['admin'] },
+    )
+    const { pendingChanges, hasPendingChanges } = usePendingChanges(data)
+    expect(hasPendingChanges.value).toBe(false)
+    expect(pendingChanges.value).toHaveLength(0)
+  })
+
+  it('detects tag changes', () => {
+    const data = makeNodeData(
+      { tags: ['admin', 'web'] },
+      { tags: ['admin'] },
+    )
+    const { pendingChanges } = usePendingChanges(data)
+    expect(pendingChanges.value).toHaveLength(1)
+    expect(pendingChanges.value[0].field).toBe('tags')
+    expect(pendingChanges.value[0].category).toBe('live')
+  })
+
+  it('detects core changes as restart category', () => {
+    const data = makeNodeData({ cores: 4 }, { cores: 2 })
+    const { pendingChanges, restartChanges } = usePendingChanges(data)
+    expect(pendingChanges.value).toHaveLength(1)
+    expect(restartChanges.value).toHaveLength(1)
+    expect(restartChanges.value[0].field).toBe('cores')
+    expect(restartChanges.value[0].desired).toBe(4)
+    expect(restartChanges.value[0].actual).toBe(2)
+  })
+
+  it('detects memory changes as restart category', () => {
+    const data = makeNodeData({ memory: 4096 }, { memory: 2048 })
+    const { restartChanges } = usePendingChanges(data)
+    expect(restartChanges.value).toHaveLength(1)
+    expect(restartChanges.value[0].field).toBe('memory')
+  })
+
+  it('detects name changes as live category', () => {
+    const data = makeNodeData({ name: 'new-name' }, { name: 'old-name' })
+    const { liveChanges } = usePendingChanges(data)
+    expect(liveChanges.value).toHaveLength(1)
+    expect(liveChanges.value[0].field).toBe('name')
+  })
+
+  it('detects multiple changes across categories', () => {
+    const data = makeNodeData(
+      { name: 'new', cores: 4, tags: ['admin', 'web'] },
+      { name: 'old', cores: 2, tags: ['admin'] },
+    )
+    const { pendingChanges, liveChanges, restartChanges } = usePendingChanges(data)
+    expect(pendingChanges.value).toHaveLength(3)
+    expect(liveChanges.value).toHaveLength(2)
+    expect(restartChanges.value).toHaveLength(1)
+  })
+
+  it('revertField resets a single field', () => {
+    const data = makeNodeData({ name: 'new', cores: 4 }, { name: 'old', cores: 2 })
+    const { revertField, pendingChanges } = usePendingChanges(data)
+    expect(pendingChanges.value).toHaveLength(2)
+    revertField('name')
+    expect(data.value.desiredConfig.name).toBe('old')
+    expect(pendingChanges.value).toHaveLength(1)
+  })
+
+  it('revertAll resets all fields', () => {
+    const data = makeNodeData(
+      { name: 'new', cores: 4, tags: ['web'] },
+      { name: 'old', cores: 2, tags: ['admin'] },
+    )
+    const { revertAll, hasPendingChanges } = usePendingChanges(data)
+    expect(hasPendingChanges.value).toBe(true)
+    revertAll()
+    expect(hasPendingChanges.value).toBe(false)
+    expect(data.value.desiredConfig.name).toBe('old')
+    expect(data.value.desiredConfig.cores).toBe(2)
+    expect(data.value.desiredConfig.tags).toEqual(['admin'])
+  })
+
+  it('updateDesired changes a single field', () => {
+    const data = makeNodeData({ cores: 2 }, { cores: 2 })
+    const { updateDesired, pendingChanges } = usePendingChanges(data)
+    expect(pendingChanges.value).toHaveLength(0)
+    updateDesired('cores', 8)
+    expect(data.value.desiredConfig.cores).toBe(8)
+    expect(pendingChanges.value).toHaveLength(1)
+  })
+
+  it('returns empty when node is not deployed', () => {
+    const data = ref({ deployed: false, desiredConfig: { cores: 4 }, actualConfig: { cores: 2 } })
+    const { hasPendingChanges } = usePendingChanges(data)
+    expect(hasPendingChanges.value).toBe(false)
+  })
+
+  it('returns empty when configs are missing', () => {
+    const data = ref({ deployed: true })
+    const { hasPendingChanges } = usePendingChanges(data)
+    expect(hasPendingChanges.value).toBe(false)
+  })
+
+  it('handles tag order insensitivity', () => {
+    const data = makeNodeData({ tags: ['web', 'admin'] }, { tags: ['admin', 'web'] })
+    const { hasPendingChanges } = usePendingChanges(data)
+    expect(hasPendingChanges.value).toBe(false)
+  })
+})
diff --git a/src/components/ApplyChangesDialog.vue b/src/components/ApplyChangesDialog.vue
new file mode 100644
index 0000000..13e5e48
--- /dev/null
+++ b/src/components/ApplyChangesDialog.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { vm as vmApi } from '@/services/proxmox/api'
+import type { PendingChange } from '@/services/proxmox/types'
+
+const props = defineProps<{
+  node: { data: Record<string, unknown>; id: string }
+  pendingChanges: PendingChange[]
+}>()
+
+const emit = defineEmits<{
+  close: []
+  applied: []
+}>()
+
+const isApplying = ref(false)
+const applyError = ref<string | null>(null)
+const applyProgress = ref('')
+
+const liveChanges = computed(() => props.pendingChanges.filter(c => c.category === 'live'))
+const restartChanges = computed(() => props.pendingChanges.filter(c => c.category === 'restart'))
+const redeployChanges = computed(() => props.pendingChanges.filter(c => c.category === 'redeploy'))
+
+const needsRestart = computed(() => restartChanges.value.length > 0)
+const proxmoxNode = computed(() => (props.node.data.config as Record<string, unknown>)?.proxmoxNode as string || 'pve01')
+const vmId = computed(() => Number(props.node.data.vmId))
+const currentStatus = computed(() => props.node.data.status as string)
+
+function formatValue(value: unknown): string {
+  if (Array.isArray(value)) return value.join(', ') || '(none)'
+  if (value === undefined || value === null) return '(none)'
+  return String(value)
+}
+
+async function applyChange(change: PendingChange): Promise<void> {
+  const node = proxmoxNode.value
+  const id = vmId.value
+  switch (change.field) {
+    case 'tags':
+      await vmApi.setTags(node, id, change.desired as string[])
+      break
+    case 'name':
+      await vmApi.setName(node, id, change.desired as string)
+      break
+    case 'description':
+      await vmApi.setDescription(node, id, change.desired as string)
+      break
+    case 'cores':
+      await vmApi.setCpu(node, id, change.desired as number)
+      break
+    case 'memory':
+      await vmApi.setMemory(node, id, change.desired as number)
+      break
+  }
+}
+
+function waitForStatus(targetStatus: string, timeoutMs = 60000): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const start = Date.now()
+    const check = () => {
+      if (props.node.data.status === targetStatus) return resolve()
+      if (Date.now() - start > timeoutMs) return reject(new Error(`Timeout waiting for ${targetStatus}`))
+      setTimeout(check, 2000)
+    }
+    check()
+  })
+}
+
+async function handleApply() {
+  isApplying.value = true
+  applyError.value = null
+
+  try {
+    // 1. Apply live changes
+    if (liveChanges.value.length > 0) {
+      applyProgress.value = 'Applying live changes...'
+      await Promise.all(liveChanges.value.map(c => applyChange(c)))
+    }
+
+    // 2. Apply restart changes
+    if (restartChanges.value.length > 0) {
+      const wasRunning = currentStatus.value === 'running'
+
+      if (wasRunning) {
+        applyProgress.value = 'Stopping VM...'
+        await vmApi.stop({ proxmox_node: proxmoxNode.value, vm_id: String(vmId.value) })
+        await waitForStatus('stopped')
+      }
+
+      applyProgress.value = 'Applying config changes...'
+      await Promise.all(restartChanges.value.map(c => applyChange(c)))
+
+      if (wasRunning) {
+        applyProgress.value = 'Starting VM...'
+        await vmApi.start({ proxmox_node: proxmoxNode.value, vm_id: String(vmId.value) })
+        await waitForStatus('running')
+      }
+    }
+
+    // 3. Sync actualConfig to match desiredConfig
+    applyProgress.value = 'Syncing state...'
+    const desired = props.node.data.desiredConfig as Record<string, unknown>
+    if (desired) {
+      const newActual: Record<string, unknown> = {}
+      for (const [key, value] of Object.entries(desired)) {
+        newActual[key] = Array.isArray(value) ? [...value] : value
+      }
+      props.node.data.actualConfig = newActual // eslint-disable-line vue/no-mutating-props -- VueFlow nodes are reactive, direct mutation is the established pattern
+    }
+
+    emit('applied')
+  } catch (err) {
+    applyError.value = err instanceof Error ? err.message : 'Failed to apply changes'
+  } finally {
+    isApplying.value = false
+    applyProgress.value = ''
+  }
+}
+</script>
+
+<template>
+  <div class="modal modal-open">
+    <div class="modal-box max-w-md">
+      <h3 class="font-bold text-lg mb-4">
+        Apply Changes &mdash; {{ (node.data.desiredConfig as Record<string, unknown>)?.name || node.data.label }}
+      </h3>
+
+      <!-- Live changes -->
+      <div v-if="liveChanges.length > 0" class="mb-3">
+        <div class="text-xs font-semibold text-success uppercase tracking-wider mb-1">
+          Immediate (no downtime)
+        </div>
+        <div v-for="c in liveChanges" :key="c.field" class="flex items-center gap-2 text-sm py-1">
+          <span class="text-success">&#x2713;</span>
+          <span class="font-medium">{{ c.label }}:</span>
+          <span class="text-base-content/50">{{ formatValue(c.actual) }}</span>
+          <span>&rarr;</span>
+          <span>{{ formatValue(c.desired) }}</span>
+        </div>
+      </div>
+
+      <!-- Restart changes -->
+      <div v-if="restartChanges.length > 0" class="mb-3">
+        <div class="text-xs font-semibold text-warning uppercase tracking-wider mb-1">
+          Requires Restart
+        </div>
+        <div v-for="c in restartChanges" :key="c.field" class="flex items-center gap-2 text-sm py-1">
+          <span class="text-warning">&#x26A0;</span>
+          <span class="font-medium">{{ c.label }}:</span>
+          <span class="text-base-content/50">{{ formatValue(c.actual) }}</span>
+          <span>&rarr;</span>
+          <span>{{ formatValue(c.desired) }}</span>
+        </div>
+      </div>
+
+      <!-- Redeploy changes -->
+      <div v-if="redeployChanges.length > 0" class="mb-3">
+        <div class="text-xs font-semibold text-error uppercase tracking-wider mb-1">
+          Requires Redeployment
+        </div>
+        <div v-for="c in redeployChanges" :key="c.field" class="flex items-center gap-2 text-sm py-1">
+          <span class="text-error">&#x26D4;</span>
+          <span class="font-medium">{{ c.label }}:</span>
+          <span class="text-base-content/50">{{ formatValue(c.actual) }}</span>
+          <span>&rarr;</span>
+          <span>{{ formatValue(c.desired) }}</span>
+        </div>
+      </div>
+
+      <!-- Warning -->
+      <div v-if="needsRestart" class="alert alert-warning text-sm mb-4">
+        <span>The VM will be stopped and restarted to apply restart-required changes.</span>
+      </div>
+
+      <!-- Error -->
+      <div v-if="applyError" class="alert alert-error text-sm mb-4">
+        <span>{{ applyError }}</span>
+      </div>
+
+      <!-- Progress -->
+      <div v-if="isApplying" class="flex items-center gap-2 mb-4">
+        <span class="loading loading-spinner loading-sm"></span>
+        <span class="text-sm">{{ applyProgress }}</span>
+      </div>
+
+      <!-- Actions -->
+      <div class="modal-action">
+        <button class="btn btn-ghost" :disabled="isApplying" @click="emit('close')">Cancel</button>
+        <button
+          class="btn btn-warning"
+          :disabled="isApplying"
+          @click="handleApply"
+        >
+          {{ isApplying ? 'Applying...' : 'Apply Changes' }}
+        </button>
+      </div>
+    </div>
+    <div class="modal-backdrop" @click="!isApplying && emit('close')"></div>
+  </div>
+</template>
diff --git a/src/components/ConfigPanel.vue b/src/components/ConfigPanel.vue
index 9bc15ac..2e3d025 100644
--- a/src/components/ConfigPanel.vue
+++ b/src/components/ConfigPanel.vue
@@ -12,6 +12,8 @@ import { proxmoxApi } from '@/services/proxmox'
 import { proxmoxCache } from '@/services/proxmox/cache'
 import { PREDEFINED_TAGS, getTagColor } from '@/constants/tags'
 import { useTagSync } from '@/composables/useTagSync'
+import { usePendingChanges } from '@/composables/usePendingChanges'
+import ApplyChangesDialog from '@/components/ApplyChangesDialog.vue'
 import { useConfirmDialog } from '@/composables/useConfirmDialog'
 import { useToast } from '@/composables/useToast'
 
@@ -204,56 +206,52 @@ const filteredPredefinedTags = computed(() => {
 function addTag() {
   const tag = tagInput.value.trim().toLowerCase()
   if (!tag || !props.node) return
-  const currentTags = props.node.data.tags || []
-  if (currentTags.includes(tag)) return
-  props.node.data.tags = [...currentTags, tag] // eslint-disable-line vue/no-mutating-props -- VueFlow nodes are reactive, direct mutation is the established pattern
+
+  if (props.node.data.deployed && props.node.data.desiredConfig) {
+    const currentTags = props.node.data.desiredConfig.tags || []
+    if (currentTags.includes(tag)) return
+    props.node.data.desiredConfig.tags = [...currentTags, tag] // eslint-disable-line vue/no-mutating-props -- VueFlow nodes are reactive
+    if (props.node.data.vmId) {
+      tagSync.pushTags('pve01', Number(props.node.data.vmId), props.node.data.desiredConfig.tags)
+    }
+  } else {
+    const currentTags = props.node.data.tags || []
+    if (currentTags.includes(tag)) return
+    props.node.data.tags = [...currentTags, tag] // eslint-disable-line vue/no-mutating-props
+  }
   tagInput.value = ''
   showTagDropdown.value = false
-  if (props.node.data.deployed && props.node.data.vmId) {
-    tagSync.pushTags('pve01', Number(props.node.data.vmId), props.node.data.tags)
-  }
 }
 
 function addPredefinedTag(tagName) {
   if (!props.node) return
-  const currentTags = props.node.data.tags || []
-  if (currentTags.includes(tagName)) return
-  props.node.data.tags = [...currentTags, tagName] // eslint-disable-line vue/no-mutating-props
-  showTagDropdown.value = false
-  if (props.node.data.deployed && props.node.data.vmId) {
-    tagSync.pushTags('pve01', Number(props.node.data.vmId), props.node.data.tags)
+  if (props.node.data.deployed && props.node.data.desiredConfig) {
+    const currentTags = props.node.data.desiredConfig.tags || []
+    if (currentTags.includes(tagName)) return
+    props.node.data.desiredConfig.tags = [...currentTags, tagName] // eslint-disable-line vue/no-mutating-props -- VueFlow nodes are reactive
+    if (props.node.data.vmId) {
+      tagSync.pushTags('pve01', Number(props.node.data.vmId), props.node.data.desiredConfig.tags)
+    }
+  } else {
+    const currentTags = props.node.data.tags || []
+    if (currentTags.includes(tagName)) return
+    props.node.data.tags = [...currentTags, tagName] // eslint-disable-line vue/no-mutating-props
   }
+  showTagDropdown.value = false
 }
 
 function removeTag(tagToRemove) {
   if (!props.node) return
-  props.node.data.tags = (props.node.data.tags || []).filter(t => t !== tagToRemove) // eslint-disable-line vue/no-mutating-props
-  if (props.node.data.deployed && props.node.data.vmId) {
-    tagSync.pushTags('pve01', Number(props.node.data.vmId), props.node.data.tags)
+  if (props.node.data.deployed && props.node.data.desiredConfig) {
+    props.node.data.desiredConfig.tags = (props.node.data.desiredConfig.tags || []).filter(t => t !== tagToRemove) // eslint-disable-line vue/no-mutating-props -- VueFlow nodes are reactive
+    if (props.node.data.vmId) {
+      tagSync.pushTags('pve01', Number(props.node.data.vmId), props.node.data.desiredConfig.tags)
+    }
+  } else {
+    props.node.data.tags = (props.node.data.tags || []).filter(t => t !== tagToRemove) // eslint-disable-line vue/no-mutating-props
   }
 }
 
-// Live metrics formatting helpers
-function formatBytes(bytes) {
-  if (!bytes) return '0 B'
-  if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(1) + ' GB'
-  if (bytes >= 1048576) return (bytes / 1048576).toFixed(0) + ' MB'
-  return (bytes / 1024).toFixed(0) + ' KB'
-}
-
-function formatUptime(seconds) {
-  if (!seconds) return '--'
-  const d = Math.floor(seconds / 86400)
-  const h = Math.floor((seconds % 86400) / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return d > 0 ? `${d}d ${h}h ${m}m` : `${h}h ${m}m`
-}
-
-function metricBarColor(percent) {
-  if (percent > 80) return '#ef4444'
-  if (percent > 50) return '#f59e0b'
-  return '#22c55e'
-}
 
 // VM actions for deployed nodes
 const actionLoading = ref(null)
@@ -270,6 +268,8 @@ async function handleVmAction(action) {
     switch (action) {
       case 'start': await proxmoxApi.vm.start(request); break
       case 'stop': await proxmoxApi.vm.stop(request); break
+      case 'pause': await proxmoxApi.vm.pause(request); break
+      case 'resume': await proxmoxApi.vm.resume(request); break
       case 'restart':
         await proxmoxApi.vm.stop(request)
         await new Promise(r => setTimeout(r, 3000))
@@ -344,6 +344,20 @@ watch(() => props.node, (newNode) => {
     }
   }
 }, { immediate: true })
+
+const nodeDataRef = computed(() => props.node?.data || {})
+const {
+  pendingChanges,
+  hasPendingChanges,
+  pendingCount,
+  revertField,
+  revertAll,
+  updateDesired,
+} = usePendingChanges(nodeDataRef)
+
+const showApplyDialog = ref(false)
+// Let the parent (node-card "Apply" strip) open the apply dialog directly.
+defineExpose({ openApplyDialog: () => { showApplyDialog.value = true } })
 </script>
 
 <template>
@@ -406,135 +420,133 @@ watch(() => props.node, (newNode) => {
 
         <!-- Deployed VM Status View -->
         <template v-if="node.type === 'vm' && node.data?.deployed">
-          <!-- Status Banner -->
-          <div class="flex items-center gap-3 px-4 py-3 rounded-lg border"
-            :class="node.data.status === 'running'
-              ? 'bg-success/5 border-success/20 text-success'
-              : node.data.status === 'stopped'
-                ? 'bg-base-200 border-base-300 text-base-content/50'
-                : 'bg-warning/5 border-warning/20 text-warning'"
-          >
-            <div class="w-2.5 h-2.5 rounded-full shrink-0"
-              :class="node.data.status === 'running'
-                ? 'bg-success shadow-[0_0_8px_theme(colors.success)]'
-                : node.data.status === 'stopped'
-                  ? 'bg-base-content/20'
-                  : 'bg-warning animate-pulse'"
-            ></div>
-            <span class="font-semibold text-sm uppercase tracking-wider">{{ node.data.status }}</span>
-            <div class="ml-auto flex items-center gap-2">
-              <span class="badge badge-sm badge-outline">VMID {{ config.vmid }}</span>
-              <span v-if="config.proxmoxNode" class="badge badge-sm badge-ghost">{{ config.proxmoxNode }}</span>
+          <!-- Editable Config Fields -->
+          <div class="space-y-3">
+            <!-- Name -->
+            <div class="form-control">
+              <label class="label py-0.5">
+                <span class="label-text text-xs">Name</span>
+                <button
+                  v-if="node.data.desiredConfig?.name !== node.data.actualConfig?.name"
+                  class="btn btn-ghost btn-xs text-warning"
+                  title="Revert to actual"
+                  @click="revertField('name')"
+                >&#x21A9;</button>
+              </label>
+              <input
+                type="text"
+                class="input input-sm input-bordered w-full"
+                :class="{ 'border-warning': node.data.desiredConfig?.name !== node.data.actualConfig?.name }"
+                :value="node.data.desiredConfig?.name || ''"
+                @input="updateDesired('name', $event.target.value)"
+              />
             </div>
-          </div>
 
-          <!-- Info Table -->
-          <div class="overflow-x-auto">
-            <table class="table table-sm">
-              <tbody>
-                <tr>
-                  <td class="text-base-content/50 w-32">Hostname</td>
-                  <td class="font-medium">{{ config.name }}</td>
-                </tr>
-                <tr>
-                  <td class="text-base-content/50">VMID</td>
-                  <td class="font-mono">{{ config.vmid }}</td>
-                </tr>
-                <tr>
-                  <td class="text-base-content/50">Node</td>
-                  <td>{{ config.proxmoxNode || '—' }}</td>
-                </tr>
-                <tr>
-                  <td class="text-base-content/50">Uptime</td>
-                  <td>{{ formatUptime(node.data.liveMetrics?.uptime || config.uptime) }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+            <!-- CPU Cores -->
+            <div class="form-control">
+              <label class="label py-0.5">
+                <span class="label-text text-xs">CPU Cores</span>
+                <button
+                  v-if="node.data.desiredConfig?.cores !== node.data.actualConfig?.cores"
+                  class="btn btn-ghost btn-xs text-warning"
+                  title="Revert to actual"
+                  @click="revertField('cores')"
+                >&#x21A9;</button>
+              </label>
+              <input
+                type="number"
+                min="1"
+                max="128"
+                class="input input-sm input-bordered w-full"
+                :class="{ 'border-warning': node.data.desiredConfig?.cores !== node.data.actualConfig?.cores }"
+                :value="node.data.desiredConfig?.cores || 1"
+                @input="updateDesired('cores', Number($event.target.value))"
+              />
+            </div>
 
-          <!-- Resource Cards -->
-          <div class="grid grid-cols-3 gap-3">
-            <!-- CPU -->
-            <div class="bg-base-200 rounded-lg p-3">
-              <div class="text-[10px] uppercase tracking-wider text-base-content/40 mb-1">CPU Usage</div>
-              <div class="flex items-baseline gap-1">
-                <span class="text-2xl font-bold" :style="{ color: metricBarColor(node.data.liveMetrics?.cpu || 0) }">
-                  {{ Math.round(node.data.liveMetrics?.cpu || 0) }}%
-                </span>
-                <span class="text-xs text-base-content/40">of {{ node.data.config?.cores || config.cores || '?' }} cores</span>
-              </div>
-              <div class="h-1.5 bg-base-content/10 rounded-full mt-2 overflow-hidden">
-                <div class="h-full rounded-full transition-all duration-500"
-                  :style="{ width: (node.data.liveMetrics?.cpu || 0) + '%', backgroundColor: metricBarColor(node.data.liveMetrics?.cpu || 0) }">
-                </div>
-              </div>
+            <!-- Memory -->
+            <div class="form-control">
+              <label class="label py-0.5">
+                <span class="label-text text-xs">Memory (MB)</span>
+                <button
+                  v-if="node.data.desiredConfig?.memory !== node.data.actualConfig?.memory"
+                  class="btn btn-ghost btn-xs text-warning"
+                  title="Revert to actual"
+                  @click="revertField('memory')"
+                >&#x21A9;</button>
+              </label>
+              <input
+                type="number"
+                min="128"
+                step="256"
+                class="input input-sm input-bordered w-full"
+                :class="{ 'border-warning': node.data.desiredConfig?.memory !== node.data.actualConfig?.memory }"
+                :value="node.data.desiredConfig?.memory || 0"
+                @input="updateDesired('memory', Number($event.target.value))"
+              />
             </div>
 
-            <!-- RAM -->
-            <div class="bg-base-200 rounded-lg p-3">
-              <div class="text-[10px] uppercase tracking-wider text-base-content/40 mb-1">Memory</div>
-              <div class="flex items-baseline gap-1">
-                <span class="text-2xl font-bold" :style="{ color: metricBarColor(node.data.liveMetrics?.memPercent || 0) }">
-                  {{ Math.round(node.data.liveMetrics?.memPercent || 0) }}%
-                </span>
-                <span class="text-xs text-base-content/40">
-                  {{ formatBytes(node.data.liveMetrics?.mem) }} / {{ formatBytes(node.data.liveMetrics?.maxmem) }}
-                </span>
-              </div>
-              <div class="h-1.5 bg-base-content/10 rounded-full mt-2 overflow-hidden">
-                <div class="h-full rounded-full transition-all duration-500"
-                  :style="{ width: (node.data.liveMetrics?.memPercent || 0) + '%', backgroundColor: metricBarColor(node.data.liveMetrics?.memPercent || 0) }">
-                </div>
-              </div>
+            <!-- Description -->
+            <div class="form-control">
+              <label class="label py-0.5">
+                <span class="label-text text-xs">Description</span>
+                <button
+                  v-if="(node.data.desiredConfig?.description || '') !== (node.data.actualConfig?.description || '')"
+                  class="btn btn-ghost btn-xs text-warning"
+                  title="Revert to actual"
+                  @click="revertField('description')"
+                >&#x21A9;</button>
+              </label>
+              <textarea
+                class="textarea textarea-sm textarea-bordered w-full"
+                :class="{ 'border-warning': (node.data.desiredConfig?.description || '') !== (node.data.actualConfig?.description || '') }"
+                rows="2"
+                :value="node.data.desiredConfig?.description || ''"
+                @input="updateDesired('description', $event.target.value)"
+              ></textarea>
             </div>
+          </div>
 
-            <!-- Disk -->
-            <div class="bg-base-200 rounded-lg p-3">
-              <div class="text-[10px] uppercase tracking-wider text-base-content/40 mb-1">Disk</div>
-              <div class="flex items-baseline gap-1">
-                <span class="text-2xl font-bold">
-                  {{ config.diskMax ? (config.diskMax / 1024 / 1024 / 1024).toFixed(0) : '—' }}
-                </span>
-                <span class="text-xs text-base-content/40">GB provisioned</span>
-              </div>
-              <div class="text-[10px] text-base-content/40 mt-2">Static allocation</div>
+          <!-- Live Status Section -->
+          <div class="divider text-xs text-base-content/40 my-2">Live Status</div>
+
+          <div class="flex items-center gap-2 mb-2">
+            <div
+              class="w-2.5 h-2.5 rounded-full"
+              :class="{
+                'bg-success': node.data.status === 'running',
+                'bg-error': node.data.status === 'error',
+                'bg-warning': node.data.status === 'paused',
+                'bg-base-content/30': node.data.status === 'stopped',
+              }"
+            ></div>
+            <span class="text-sm font-medium capitalize">{{ node.data.status }}</span>
+            <span v-if="node.data.vmId" class="text-xs text-base-content/50 ml-auto">VMID {{ node.data.vmId }}</span>
+          </div>
+
+          <div v-if="node.data.liveMetrics" class="grid grid-cols-2 gap-2 mb-3">
+            <div class="bg-base-200/50 rounded-lg p-2">
+              <div class="text-[10px] text-base-content/50">CPU</div>
+              <div class="text-sm font-bold">{{ Math.round(node.data.liveMetrics.cpu) }}%</div>
+            </div>
+            <div class="bg-base-200/50 rounded-lg p-2">
+              <div class="text-[10px] text-base-content/50">RAM</div>
+              <div class="text-sm font-bold">{{ node.data.liveMetrics.memPercent }}%</div>
             </div>
           </div>
 
           <!-- VM Actions -->
-          <div class="flex flex-wrap gap-2">
-            <button
-              class="btn btn-sm btn-success gap-1"
-              :disabled="actionLoading || node.data.status === 'running'"
-              @click="handleVmAction('start')"
-            >
-              <span v-if="actionLoading === 'start'" class="loading loading-spinner loading-xs"></span>
-              <AppIcon v-else name="play" class="w-4 h-4" /> Start
-            </button>
-            <button
-              class="btn btn-sm btn-warning gap-1"
-              :disabled="actionLoading || node.data.status === 'stopped'"
-              @click="handleVmAction('stop')"
-            >
-              <span v-if="actionLoading === 'stop'" class="loading loading-spinner loading-xs"></span>
-              <AppIcon v-else name="stop" class="w-4 h-4" /> Stop
-            </button>
-            <button
-              class="btn btn-sm btn-info gap-1"
-              :disabled="actionLoading || node.data.status === 'stopped'"
-              @click="handleVmAction('restart')"
-            >
-              <span v-if="actionLoading === 'restart'" class="loading loading-spinner loading-xs"></span>
-              <AppIcon v-else name="refresh" class="w-4 h-4" /> Restart
-            </button>
-            <button
-              class="btn btn-sm btn-error btn-outline gap-1"
-              :disabled="actionLoading"
-              @click="handleVmAction('delete')"
-            >
-              <span v-if="actionLoading === 'delete'" class="loading loading-spinner loading-xs"></span>
-              <AppIcon v-else name="trash" class="w-4 h-4" /> Delete VM
-            </button>
+          <div class="flex gap-1 mb-3">
+            <button class="btn btn-xs btn-success flex-1" :disabled="actionLoading" @click="handleVmAction('start')">Start</button>
+            <button class="btn btn-xs btn-warning flex-1" :disabled="actionLoading" @click="handleVmAction('stop')">Stop</button>
+            <button class="btn btn-xs btn-info flex-1" :disabled="actionLoading" @click="handleVmAction('pause')">Pause</button>
+          </div>
+
+          <!-- Pending Changes Actions -->
+          <div v-if="hasPendingChanges" class="flex items-center justify-between pt-2 border-t border-base-300">
+            <button class="btn btn-xs btn-ghost" @click="revertAll">Discard All</button>
+            <div class="text-[10px] text-base-content/50">{{ pendingCount }} change{{ pendingCount > 1 ? 's' : '' }}</div>
+            <button class="btn btn-xs btn-warning" @click="showApplyDialog = true">Apply</button>
           </div>
         </template>
 
@@ -1609,4 +1621,12 @@ watch(() => props.node, (newNode) => {
       </div>
     </div>
   </div>
+
+  <ApplyChangesDialog
+    v-if="showApplyDialog"
+    :node="node"
+    :pending-changes="pendingChanges"
+    @close="showApplyDialog = false"
+    @applied="showApplyDialog = false"
+  />
 </template>
\ No newline at end of file
diff --git a/src/components/nodes/InfraNodeVm.vue b/src/components/nodes/InfraNodeVm.vue
index 3a7837f..0710a40 100644
--- a/src/components/nodes/InfraNodeVm.vue
+++ b/src/components/nodes/InfraNodeVm.vue
@@ -3,9 +3,15 @@ import { computed } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
 import AppIcon from '@/components/icons/AppIcon.vue'
 import { getTagColor } from '@/constants/tags'
+import { usePendingChanges } from '@/composables/usePendingChanges'
 
 const props = defineProps(['data', 'selected'])
 
+const nodeDataRef = computed(() => props.data || {})
+const { hasPendingChanges, pendingCount } = usePendingChanges(nodeDataRef)
+
+const emit = defineEmits(['open-apply-dialog'])
+
 // Map status values to color scheme
 const statusColor = computed(() => {
   switch (props.data?.status) {
@@ -35,11 +41,15 @@ const ramMB = computed(() => {
   return m ? parseInt(m) : 0
 })
 const displayTags = computed(() => {
-  const tags = props.data?.tags || []
+  const tags = (props.data?.deployed && props.data?.desiredConfig?.tags)
+    ? props.data.desiredConfig.tags
+    : (props.data?.tags || [])
   return tags.slice(0, 3)
 })
 const overflowCount = computed(() => {
-  const tags = props.data?.tags || []
+  const tags = (props.data?.deployed && props.data?.desiredConfig?.tags)
+    ? props.data.desiredConfig.tags
+    : (props.data?.tags || [])
   return Math.max(0, tags.length - 3)
 })
 
@@ -136,5 +146,19 @@ function barColor(percent) {
     <!-- Connection Handles -->
     <Handle type="target" :position="Position.Top" class="!w-3 !h-3 !bg-blue-500 !border-2 !border-blue-600" />
     <Handle type="source" :position="Position.Bottom" class="!w-3 !h-3 !bg-blue-500 !border-2 !border-blue-600" />
+
+    <!-- Pending changes strip -->
+    <div
+      v-if="hasPendingChanges"
+      class="flex items-center justify-between px-2 py-0.5 mt-1.5 -mx-3 -mb-3 rounded-b-xl bg-amber-500/15 border-t border-amber-500/25"
+    >
+      <span class="text-[9px] font-medium text-amber-600 dark:text-amber-400">
+        {{ pendingCount }} unsaved
+      </span>
+      <button
+        class="text-[9px] font-medium text-amber-600 dark:text-amber-400 hover:text-amber-800 dark:hover:text-amber-200"
+        @click.stop="emit('open-apply-dialog')"
+      >Apply</button>
+    </div>
   </div>
 </template>
diff --git a/src/composables/useInfrastructureImport.ts b/src/composables/useInfrastructureImport.ts
index 36f5168..ecbae86 100644
--- a/src/composables/useInfrastructureImport.ts
+++ b/src/composables/useInfrastructureImport.ts
@@ -314,6 +314,17 @@ export function useInfrastructureImport() {
 
         // Create node
         const nodeId = `imported-${resource.type}-${resource.vmid}`
+        // Look up tags from the cached VM list
+        const cachedVm = proxmoxCache.vmCache.value.find(v => v.vmid === resource.vmid)
+        const vmTags = cachedVm?.tags ? cachedVm.tags.split(';').filter(Boolean) : []
+
+        const initialConfig = {
+          name: resource.name,
+          cores: config.cores || 1,
+          memory: typeof config.memory === 'string' ? parseInt(config.memory) : (config.memory || 0),
+          tags: vmTags,
+          description: '',
+        }
         result.nodes.push({
           id: nodeId,
           type: resource.type,
@@ -335,7 +346,9 @@ export function useInfrastructureImport() {
               cpuUsage: config.cpuUsage || 0,
               uptime: config.uptime || 0,
               proxmoxNode: config.node || '',
-            }
+            },
+            desiredConfig: { ...initialConfig },
+            actualConfig: { ...initialConfig },
           }
         })
 
diff --git a/src/composables/usePendingChanges.ts b/src/composables/usePendingChanges.ts
new file mode 100644
index 0000000..c6b655d
--- /dev/null
+++ b/src/composables/usePendingChanges.ts
@@ -0,0 +1,99 @@
+import { computed, type Ref } from 'vue'
+import { getChangeCategory, getChangeLabel } from '@/constants/changeCategories'
+import type { PendingChange } from '@/services/proxmox/types'
+
+const DIFFABLE_FIELDS = ['name', 'description', 'cores', 'memory', 'tags']
+
+function arraysEqual(a: unknown[], b: unknown[]): boolean {
+  if (a.length !== b.length) return false
+  const sortedA = [...a].sort()
+  const sortedB = [...b].sort()
+  return sortedA.every((v, i) => v === sortedB[i])
+}
+
+function fieldsEqual(desired: unknown, actual: unknown): boolean {
+  if (Array.isArray(desired) && Array.isArray(actual)) {
+    return arraysEqual(desired, actual)
+  }
+  return desired === actual
+}
+
+export function usePendingChanges(nodeData: Ref<Record<string, unknown>>) {
+  const pendingChanges = computed<PendingChange[]>(() => {
+    if (!nodeData.value?.deployed) return []
+    const desired = nodeData.value.desiredConfig as Record<string, unknown> | undefined
+    const actual = nodeData.value.actualConfig as Record<string, unknown> | undefined
+    if (!desired || !actual) return []
+
+    const changes: PendingChange[] = []
+    for (const field of DIFFABLE_FIELDS) {
+      const d = desired[field]
+      const a = actual[field]
+      if (d === undefined && a === undefined) continue
+      if (d === undefined || a === undefined || !fieldsEqual(d, a)) {
+        changes.push({
+          field,
+          label: getChangeLabel(field),
+          desired: d,
+          actual: a,
+          category: getChangeCategory(field),
+        })
+      }
+    }
+    return changes
+  })
+
+  const hasPendingChanges = computed(() => pendingChanges.value.length > 0)
+  const pendingCount = computed(() => pendingChanges.value.length)
+
+  const liveChanges = computed(() => pendingChanges.value.filter(c => c.category === 'live'))
+  const restartChanges = computed(() => pendingChanges.value.filter(c => c.category === 'restart'))
+  const redeployChanges = computed(() => pendingChanges.value.filter(c => c.category === 'redeploy'))
+
+  function revertField(field: string): void {
+    const desired = nodeData.value.desiredConfig as Record<string, unknown>
+    const actual = nodeData.value.actualConfig as Record<string, unknown>
+    if (!desired || !actual) return
+    if (Array.isArray(actual[field])) {
+      desired[field] = [...(actual[field] as unknown[])]
+    } else {
+      desired[field] = actual[field]
+    }
+  }
+
+  function revertAll(): void {
+    const actual = nodeData.value.actualConfig as Record<string, unknown>
+    const desired = nodeData.value.desiredConfig as Record<string, unknown>
+    if (!actual) return
+    const reverted: Record<string, unknown> = {}
+    for (const field of DIFFABLE_FIELDS) {
+      // Use actual value; fall back to current desired to avoid dropping fields
+      // that the WebSocket doesn't provide (e.g. cores, memory, description)
+      const source = actual[field] !== undefined ? actual : desired
+      if (source && source[field] !== undefined) {
+        reverted[field] = Array.isArray(source[field])
+          ? [...(source[field] as unknown[])]
+          : source[field]
+      }
+    }
+    nodeData.value.desiredConfig = reverted
+  }
+
+  function updateDesired(field: string, value: unknown): void {
+    const desired = nodeData.value.desiredConfig as Record<string, unknown>
+    if (!desired) return
+    desired[field] = value
+  }
+
+  return {
+    pendingChanges,
+    hasPendingChanges,
+    pendingCount,
+    liveChanges,
+    restartChanges,
+    redeployChanges,
+    revertField,
+    revertAll,
+    updateDesired,
+  }
+}
diff --git a/src/composables/useWebSocketStatus.ts b/src/composables/useWebSocketStatus.ts
index 1db7eec..981abfc 100644
--- a/src/composables/useWebSocketStatus.ts
+++ b/src/composables/useWebSocketStatus.ts
@@ -13,6 +13,7 @@ interface VmStatus {
   name: string
   status: string
   cpu: number       // 0-100 percentage
+  cores: number     // vCPU count
   mem: number       // bytes used
   maxmem: number    // bytes total
   uptime: number    // seconds
diff --git a/src/constants/changeCategories.ts b/src/constants/changeCategories.ts
new file mode 100644
index 0000000..be30834
--- /dev/null
+++ b/src/constants/changeCategories.ts
@@ -0,0 +1,22 @@
+export type ChangeCategory = 'live' | 'restart' | 'redeploy'
+
+interface ChangeCategoryDef {
+  category: ChangeCategory
+  label: string
+}
+
+export const CHANGE_CATEGORIES: Record<string, ChangeCategoryDef> = {
+  tags:        { category: 'live',    label: 'Tags' },
+  name:        { category: 'live',    label: 'Name' },
+  description: { category: 'live',    label: 'Description' },
+  cores:       { category: 'restart', label: 'CPU Cores' },
+  memory:      { category: 'restart', label: 'Memory' },
+}
+
+export function getChangeCategory(field: string): ChangeCategory {
+  return CHANGE_CATEGORIES[field]?.category ?? 'redeploy'
+}
+
+export function getChangeLabel(field: string): string {
+  return CHANGE_CATEGORIES[field]?.label ?? field
+}
diff --git a/src/services/proxmox/api.ts b/src/services/proxmox/api.ts
index fbb32fd..be97d6c 100644
--- a/src/services/proxmox/api.ts
+++ b/src/services/proxmox/api.ts
@@ -323,10 +323,54 @@ export const vm = {
    * Set VM tags
    */
   async setTags(node: ProxmoxNode, vmId: number, tags: string[]): Promise<ApiResponse> {
-    return post('/v0/admin/proxmox/vms/vm_id/config/set-tags', {
+    return post('/v0/admin/proxmox/vms/vm_id/config/vm_set_tag', {
       proxmox_node: node,
-      vm_id: vmId,
-      tags: tags.join(','),
+      vm_id: String(vmId),
+      vm_tag_name: tags.join(','),
+    })
+  },
+
+  /**
+   * Set VM name
+   */
+  async setName(node: ProxmoxNode, vmId: number, name: string): Promise<ApiResponse> {
+    return post('/v0/admin/proxmox/vms/vm_id/config/vm_set_name', {
+      proxmox_node: node,
+      vm_id: String(vmId),
+      vm_name: name,
+    })
+  },
+
+  /**
+   * Set VM description
+   */
+  async setDescription(node: ProxmoxNode, vmId: number, description: string): Promise<ApiResponse> {
+    return post('/v0/admin/proxmox/vms/vm_id/config/vm_set_description', {
+      proxmox_node: node,
+      vm_id: String(vmId),
+      vm_description: description,
+    })
+  },
+
+  /**
+   * Set VM CPU cores
+   */
+  async setCpu(node: ProxmoxNode, vmId: number, cores: number): Promise<ApiResponse> {
+    return post('/v0/admin/proxmox/vms/vm_id/config/vm_set_cpu', {
+      proxmox_node: node,
+      vm_id: String(vmId),
+      vm_cores: cores,
+    })
+  },
+
+  /**
+   * Set VM memory (MB)
+   */
+  async setMemory(node: ProxmoxNode, vmId: number, memory: number): Promise<ApiResponse> {
+    return post('/v0/admin/proxmox/vms/vm_id/config/vm_set_memory', {
+      proxmox_node: node,
+      vm_id: String(vmId),
+      vm_memory: memory,
     })
   },
 }
diff --git a/src/services/proxmox/types.ts b/src/services/proxmox/types.ts
index 50a9566..da1a475 100644
--- a/src/services/proxmox/types.ts
+++ b/src/services/proxmox/types.ts
@@ -263,6 +263,30 @@ export interface BaseNodeData {
   tags?: string[]
 }
 
+export interface VmDesiredConfig {
+  name?: string
+  cores?: number
+  memory?: number
+  tags?: string[]
+  description?: string
+}
+
+export interface VmActualConfig {
+  name?: string
+  cores?: number
+  memory?: number
+  tags?: string[]
+  description?: string
+}
+
+export interface PendingChange {
+  field: string
+  label: string
+  desired: unknown
+  actual: unknown
+  category: 'live' | 'restart' | 'redeploy'
+}
+
 export interface LiveMetrics {
   cpu: number          // 0-100 percentage
   mem: number          // bytes used
diff --git a/src/stores/deploymentStore.ts b/src/stores/deploymentStore.ts
index 9e574b0..a6d5ea9 100644
--- a/src/stores/deploymentStore.ts
+++ b/src/stores/deploymentStore.ts
@@ -442,6 +442,18 @@ export const useDeploymentStore = defineStore('deployment', () => {
 
     node.data.deployed = true
     node.data.vmId = payload.vm_id ? Number(payload.vm_id) : undefined
+
+    // Initialize desired/actual config from the deployment config
+    const initialConfig = {
+      name: node.data.config?.name || '',
+      cores: node.data.config?.cores ? Number(node.data.config.cores) : 1,
+      memory: node.data.config?.memory ? Number(node.data.config.memory) : 0,
+      tags: node.data.tags ? [...node.data.tags] : [],
+      description: node.data.config?.description || '',
+    }
+    node.data.desiredConfig = { ...initialConfig }
+    node.data.actualConfig = { ...initialConfig }
+
     projectStore.updateProject(currentPlan.value.projectId, { nodes: project.nodes })
   }
 
diff --git a/src/views/ProjectEditor.vue b/src/views/ProjectEditor.vue
index 7641fcd..93fbd08 100644
--- a/src/views/ProjectEditor.vue
+++ b/src/views/ProjectEditor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted, watch, computed, provide } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed, provide, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
@@ -87,7 +87,7 @@ const {
   loadProjectData
 } = useInfraBuilder()
 
-const { getNodes: flowGetNodes, getEdges: flowGetEdges, addNodes: vfAddNodes, addEdges: vfAddEdges, updateNodeData, onNodesInitialized } = useVueFlow()
+const { getNodes: flowGetNodes, getEdges: flowGetEdges, addNodes: vfAddNodes, addEdges: vfAddEdges, updateNodeData, onNodesInitialized, findNode } = useVueFlow()
 
 // Bumped when VueFlow finishes measuring node dimensions, so the network-zone
 // overlay recomputes its geometry off real (not fallback) sizes on first paint.
@@ -99,6 +99,7 @@ const dragAndDropComposable = useDragAndDrop()
 const { onDragOver, onDrop, onDragLeave, isDragOver } = dragAndDropComposable || {}
 
 const showConfigPanel = ref(false)
+const configPanelRef = ref(null)
 const showExportModal = ref(false)
 const showProxmoxSettings = ref(false)
 const showDeploymentPanel = ref(false)
@@ -294,12 +295,13 @@ watch(() => wsStatus.vmStatuses.value, (statuses) => {
     const dataUpdate = {}
     let needsUpdate = false
 
+    // Runtime status: always sync
     if (node.data.status !== newStatus) {
       dataUpdate.status = newStatus
       needsUpdate = true
     }
 
-    // Sync live metrics
+    // Live metrics: always sync
     if (vm.status === 'running') {
       dataUpdate.liveMetrics = {
         cpu: vm.cpu,
@@ -314,14 +316,45 @@ watch(() => wsStatus.vmStatuses.value, (statuses) => {
       needsUpdate = true
     }
 
-    // Sync tags from WebSocket (semicolon-separated)
-    if (vm.tags) {
-      const wsTags = vm.tags.split(';').filter(Boolean)
-      const currentTags = node.data.tags || []
-      if (JSON.stringify(wsTags) !== JSON.stringify(currentTags)) {
-        dataUpdate.tags = wsTags
+    // For deployed nodes: update actualConfig (not top-level tags)
+    if (node.data.deployed) {
+      const wsTags = vm.tags ? vm.tags.split(';').filter(Boolean) : []
+      const currentActual = node.data.actualConfig || {}
+
+      const newActual = {
+        ...currentActual,
+        tags: wsTags,
+        name: vm.name,
+        cores: vm.cores || currentActual.cores,
+        memory: vm.maxmem ? Math.floor(vm.maxmem / 1024 / 1024) : currentActual.memory,
+      }
+
+      if (JSON.stringify(newActual) !== JSON.stringify(currentActual)) {
+        dataUpdate.actualConfig = newActual
+        needsUpdate = true
+      }
+
+      // Initialize desiredConfig on first sync if missing
+      if (!node.data.desiredConfig) {
+        dataUpdate.desiredConfig = {
+          ...newActual,
+          cores: node.data.config?.cores ? Number(node.data.config.cores) : undefined,
+          memory: typeof node.data.config?.memory === 'string'
+            ? parseInt(node.data.config.memory)
+            : node.data.config?.memory,
+        }
         needsUpdate = true
       }
+    } else {
+      // Non-deployed nodes: sync tags to top-level (legacy behavior for draft nodes)
+      if (vm.tags) {
+        const wsTags = vm.tags.split(';').filter(Boolean)
+        const currentTags = node.data.tags || []
+        if (JSON.stringify(wsTags) !== JSON.stringify(currentTags)) {
+          dataUpdate.tags = wsTags
+          needsUpdate = true
+        }
+      }
     }
 
     if (needsUpdate) {
@@ -541,6 +574,15 @@ const closeConfigPanel = () => {
   selectedNode.value = null
 }
 
+// Node-card "Apply" strip → open that node's ConfigPanel and surface the apply dialog.
+const onNodeApply = (slotProps) => {
+  const n = findNode(slotProps.id)
+  if (!n) return
+  selectedNode.value = n
+  showConfigPanel.value = true
+  nextTick(() => configPanelRef.value?.openApplyDialog?.())
+}
+
 /**
  * Keyboard navigation on the canvas (Plan C §C5.3):
  *  - Arrow keys move selection to the nearest node in that cardinal direction.
@@ -1155,7 +1197,7 @@ const handleInfrastructureImport = (result) => {
 
           <!-- Compute -->
           <template #node-vm="props">
-            <InfraNodeVm v-bind="props" />
+            <InfraNodeVm v-bind="props" @open-apply-dialog="onNodeApply(props)" />
           </template>
 
           <template #node-lxc="props">
@@ -1268,6 +1310,7 @@ const handleInfrastructureImport = (result) => {
 
     <!-- Config Panel (node config — only on canvas tab) -->
     <ConfigPanel
+      ref="configPanelRef"
       v-if="selectedNode && showConfigPanel && tab === 'canvas'"
       :node="selectedNode"
       @close="closeConfigPanel"