diff --git a/Hub/ui/src/views/NodeDetailView.vue b/Hub/ui/src/views/NodeDetailView.vue
index b732edd..6989d52 100644
--- a/Hub/ui/src/views/NodeDetailView.vue
+++ b/Hub/ui/src/views/NodeDetailView.vue
@@ -584,7 +584,7 @@ const applyHighlighting = () => {
                 </div>
             </div>
 
-            <div v-if="node.hasPendingConfig" class="flex items-center justify-between bg-high/10 border border-high/30 rounded-lg p-4 transition-all duration-normal">
+            <div v-if="node.hasPendingConfig" class="flex items-center justify-between w-full max-w-xl bg-high/10 border border-high/30 rounded-lg p-4 transition-all duration-normal">
                 <div class="flex items-start gap-3">
                     <svg class="w-5 h-5 text-high mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                     <div>
@@ -598,7 +598,7 @@ const applyHighlighting = () => {
             <div class="grid grid-cols-1 xl:grid-cols-2 gap-5">
                 
                 <!-- Sensor Volume (24h) -->
-                <div class="bg-bg-surface border border-border-default rounded-lg p-5 shadow-sm flex flex-col">
+                <div class="bg-bg-surface w-full max-w-2xl border border-border-default rounded-lg p-5 shadow-sm flex flex-col">
                     <h3 class="text-sm font-semibold text-text-h mb-4">Sensor Volume (24h)</h3>
                     <div v-if="topSensors.length > 0" class="space-y-3 overflow-y-auto custom-scroll max-h-[240px] pr-1">
                         <div v-for="sensor in topSensors" :key="sensor.id">
@@ -748,74 +748,89 @@ const applyHighlighting = () => {
         </BaseModal>
 
         <!-- Sync Compose Modal -->
-        <BaseModal :show="showSyncModal" @close="showSyncModal = false" title="Synchronize Node">
-            <div class="space-y-6">
-                
-                <div>
-                    <h3 class="text-sm font-semibold text-text-h mb-2">Automatic Deployment (Recommended)</h3>
-                    <p class="text-sm text-text-m mb-4">
-                        Run the HoneyWire Wizard on your server to automatically reconcile this node's configuration.
-                    </p>
+        <Teleport to="body">
+            <transition enter-active-class="transition duration-normal ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100" leave-active-class="transition duration-[var(--duration-fast)] ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
+                <div v-if="showSyncModal" class="fixed inset-0 z-[var(--z-modal)] flex justify-center items-center p-4 sm:p-6 bg-black/60 backdrop-blur-sm" @click.self="showSyncModal = false">
                     
-                    <div class="bg-bg-inset border border-border-default rounded-md p-4 relative group flex flex-col gap-3">
-                        <code class="text-success-main text-xs font-mono whitespace-pre-wrap break-all leading-relaxed">{{ syncCommand }}</code>
+                    <div class="bg-bg-base w-full max-w-2xl max-h-[85vh] rounded-lg shadow-2xl flex flex-col overflow-hidden border border-border-default transform transition-all">
                         
-                        <button @click="handleCopy('sync-cmd', syncCommand)"
-                                class="self-end px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-[var(--duration-fast)] shadow-sm active:scale-95 focus:outline-none border"
-                                :class="copiedStates['sync-cmd'] ? 'bg-success-bg text-success-text border-success-border' : 'bg-bg-surface text-text-h border-border-default hover:bg-secondary-hover'">
-                            {{ copiedStates['sync-cmd'] ? 'Copied!' : 'Copy Command' }}
-                        </button>
-                    </div>
-                </div>
-
-                <div class="border-t border-border-default pt-5">
-                    <button @click="showManualSync = !showManualSync" class="flex items-center justify-between w-full text-left group outline-none">
-                        <span class="text-sm font-semibold text-text-h group-hover:text-primary-main transition-colors">Advanced / Manual Deployment</span>
-                        <svg class="w-4 h-4 text-text-m transition-transform duration-normal" :class="showManualSync ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
-                    </button>
-                    
-                    <div v-show="showManualSync" class="mt-4 space-y-4">
-                        <p class="text-sm text-text-m">
-                            For air-gapped environments or manual orchestration, save the following configuration to <code class="px-1.5 py-0.5 bg-bg-inset border border-border-default rounded text-xs font-mono">/opt/honeywire/sensors/docker-compose.yml</code>.
-                        </p>
-                        
-                        <div class="relative bg-bg-surface border border-border-default rounded-lg p-4 font-mono text-sm text-text-h overflow-auto max-h-[30vh] custom-scroll">
-                            <button @click="handleCopy('sync-yaml', syncComposeYaml)"
-                                    class="absolute top-3 right-3 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all duration-[var(--duration-fast)] shadow-sm active:scale-95 z-10 focus:outline-none border"
-                                    :class="copiedStates['sync-yaml'] ? 'bg-success-bg text-success-text border-success-border' : 'bg-secondary-main text-secondary-text border-secondary-border hover:bg-secondary-hover hover:text-text-h'">
-                                {{ copiedStates['sync-yaml'] ? 'Copied!' : 'Copy YAML' }}
+                        <div class="px-6 py-5 border-b border-border-default flex justify-between items-center bg-bg-surface shrink-0">
+                            <h2 class="text-base font-semibold text-text-h">Synchronize Node</h2>
+                            <button @click="showSyncModal = false" class="p-2 -mr-2 text-text-m hover:text-text-h transition-colors duration-[var(--duration-fast)] rounded-full hover:bg-secondary-hover focus:outline-none">
+                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
                             </button>
-                            <pre class="whitespace-pre-wrap break-words pr-20">{{ syncComposeYaml || 'No compose output available.' }}</pre>
                         </div>
 
-                        <p class="text-sm text-text-m">
-                            Then, apply the configuration using Docker Compose:
-                        </p>
-
-                        <div class="bg-bg-inset border border-border-default rounded-md p-4 relative group flex flex-col gap-3">
-                            <code class="text-text-h text-xs font-mono break-all leading-relaxed">cd /opt/honeywire/sensors<br/>docker compose -p honeywire up -d --remove-orphans</code>
+                        <div class="flex-1 overflow-y-auto custom-scroll bg-bg-base p-6 md:p-8 space-y-6">
                             
-                            <button @click="handleCopy('manual-cmd', 'cd /opt/honeywire/sensors\ndocker compose -p honeywire up -d --remove-orphans')"
-                                    class="self-end px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-[var(--duration-fast)] shadow-sm active:scale-95 focus:outline-none border"
-                                    :class="copiedStates['manual-cmd'] ? 'bg-success-bg text-success-text border-success-border' : 'bg-bg-surface text-text-h border-border-default hover:bg-secondary-hover'">
-                                {{ copiedStates['manual-cmd'] ? 'Copied!' : 'Copy Command' }}
-                            </button>
+                            <div>
+                                <h3 class="text-sm font-semibold text-text-h mb-2">Automatic Deployment (Recommended)</h3>
+                                <p class="text-sm text-text-m mb-4">
+                                    Run the HoneyWire Wizard on your server to automatically reconcile this node's configuration.
+                                </p>
+                                
+                                <div class="bg-bg-inset border border-border-default rounded-md p-4 relative group flex flex-col gap-3">
+                                    <code class="text-success-text text-xs font-mono whitespace-pre-wrap break-all leading-relaxed">{{ syncCommand }}</code>
+                                    
+                                    <button @click="handleCopy('sync-cmd', syncCommand)"
+                                            class="self-end px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-[var(--duration-fast)] shadow-sm active:scale-95 focus:outline-none border"
+                                            :class="copiedStates['sync-cmd'] ? 'bg-success-bg text-success-text border-success-border' : 'bg-bg-surface text-text-h border-border-default hover:bg-secondary-hover'">
+                                        {{ copiedStates['sync-cmd'] ? 'Copied!' : 'Copy' }}
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="border-t border-border-default pt-6">
+                                <button @click="showManualSync = !showManualSync" class="flex items-center justify-between w-full text-left group outline-none">
+                                    <span class="text-sm font-semibold text-text-h group-hover:text-primary-main transition-colors">Advanced / Manual Deployment</span>
+                                    <svg class="w-4 h-4 text-text-m transition-transform duration-normal" :class="showManualSync ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                                </button>
+                                
+                                <div v-show="showManualSync" class="mt-4 space-y-4">
+                                    <p class="text-sm text-text-m">
+                                        Save the following configuration to <code class="px-1.5 py-0.5 bg-bg-inset border border-border-default rounded text-xs font-mono">/opt/honeywire/sensors/honeywire-compose.yml</code>.
+                                    </p>
+                                    
+                                    <div class="relative bg-bg-surface border border-border-default rounded-lg p-4 font-mono text-sm text-text-h overflow-auto max-h-[30vh] custom-scroll">
+                                        <button @click="handleCopy('sync-yaml', syncComposeYaml)"
+                                                class="absolute top-3 right-3 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all duration-[var(--duration-fast)] shadow-sm active:scale-95 z-10 focus:outline-none border"
+                                                :class="copiedStates['sync-yaml'] ? 'bg-success-bg text-success-text border-success-border' : 'bg-secondary-main text-secondary-text border-secondary-border hover:bg-secondary-hover hover:text-text-h'">
+                                            {{ copiedStates['sync-yaml'] ? 'Copied!' : 'Copy' }}
+                                        </button>
+                                        <pre class="whitespace-pre-wrap break-words pr-16">{{ syncComposeYaml || 'No compose output available.' }}</pre>
+                                    </div>
+
+                                    <p class="text-sm text-text-m">
+                                        Then, apply the configuration using Docker Compose:
+                                    </p>
+
+                                    <div class="bg-bg-inset border border-border-default rounded-md p-4 relative group flex flex-col gap-3">
+                                        <code class="text-text-h text-xs font-mono break-all leading-relaxed">cd /opt/honeywire/sensors<br/>docker compose -f honeywire-compose.yml -p honeywire up -d --remove-orphans</code>
+                                        
+                                        <button @click="handleCopy('manual-cmd', 'cd /opt/honeywire/sensors\ndocker compose -p honeywire up -d --remove-orphans')"
+                                                class="self-end px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-[var(--duration-fast)] shadow-sm active:scale-95 focus:outline-none border"
+                                                :class="copiedStates['manual-cmd'] ? 'bg-success-bg text-success-text border-success-border' : 'bg-bg-surface text-text-h border-border-default hover:bg-secondary-hover'">
+                                            {{ copiedStates['manual-cmd'] ? 'Copied!' : 'Copy' }}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="px-6 py-4 border-t border-border-default bg-bg-surface flex justify-end shrink-0">
+                            <BaseButton variant="secondary" @click="showSyncModal = false">Done</BaseButton>
                         </div>
                     </div>
                 </div>
-
-                <div class="flex justify-end pt-5 border-t border-border-default">
-                    <BaseButton variant="secondary" @click="showSyncModal = false">Done</BaseButton>
-                </div>
-            </div>
-        </BaseModal>
+            </transition>
+        </Teleport>
 
         <!-- Sensor Deployment Modal -->
         <Teleport to="body">
             <transition enter-active-class="transition duration-normal ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100" leave-active-class="transition duration-[var(--duration-fast)] ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
                 <div v-if="selectedSensor" class="fixed inset-0 z-[var(--z-modal)] flex justify-center items-center p-4 sm:p-6 bg-black/60 backdrop-blur-sm" @click.self="closeSensor">
                     
-                    <div class="bg-bg-base w-full max-w-4xl h-full max-h-[85vh] rounded-lg shadow-2xl flex flex-col overflow-hidden border border-border-default transform transition-all">
+                    <div class="bg-bg-base w-full max-w-3xl h-full max-h-[85vh] rounded-lg shadow-2xl flex flex-col overflow-hidden border border-border-default transform transition-all">
                         
                         <div class="px-6 py-5 border-b border-border-default flex justify-between items-start bg-bg-surface shrink-0">
                             <div class="flex items-center gap-4">