diff --git a/eslint.config.ts b/eslint.config.ts
index 04f4b2578f..3d3d06d9e7 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -98,6 +98,12 @@ export default defineConfig([
       // */
       'vue/one-component-per-file': 'off', // TODO: fix
       'vue/require-default-prop': 'off', // TODO: fix -- this one is very worthwhile
+      'vue/block-order': [
+        'error',
+        {
+          order: ['docs', 'script', 'template', 'i18n', 'style']
+        }
+      ],
       // Restrict deprecated PrimeVue components
       'no-restricted-imports': [
         'error',
diff --git a/src/App.vue b/src/App.vue
index 5e183c4305..89b36febe3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,3 @@
-<template>
-  <router-view />
-  <ProgressSpinner
-    v-if="isLoading"
-    class="absolute inset-0 flex justify-center items-center h-[unset]"
-  />
-  <GlobalDialog />
-  <BlockUI full-screen :blocked="isLoading" />
-</template>
-
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import BlockUI from 'primevue/blockui'
@@ -55,3 +45,13 @@ onMounted(() => {
   void conflictDetection.initializeConflictDetection()
 })
 </script>
+
+<template>
+  <router-view />
+  <ProgressSpinner
+    v-if="isLoading"
+    class="absolute inset-0 flex justify-center items-center h-[unset]"
+  />
+  <GlobalDialog />
+  <BlockUI full-screen :blocked="isLoading" />
+</template>
diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 6e3cd5842a..ae30cbac7c 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import Splitter from 'primevue/splitter'
+import SplitterPanel from 'primevue/splitterpanel'
+import { computed } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+
+const settingStore = useSettingStore()
+const sidebarLocation = computed<'left' | 'right'>(() =>
+  settingStore.get('Comfy.Sidebar.Location')
+)
+
+const unifiedWidth = computed(() =>
+  settingStore.get('Comfy.Sidebar.UnifiedWidth')
+)
+
+const sidebarPanelVisible = computed(
+  () => useSidebarTabStore().activeSidebarTab !== null
+)
+const bottomPanelVisible = computed(
+  () => useBottomPanelStore().bottomPanelVisible
+)
+const activeSidebarTabId = computed(
+  () => useSidebarTabStore().activeSidebarTabId
+)
+
+const sidebarStateKey = computed(() => {
+  return unifiedWidth.value ? 'unified-sidebar' : activeSidebarTabId.value ?? ''
+})
+</script>
+
 <template>
   <Splitter
     :key="sidebarStateKey"
@@ -45,39 +78,6 @@
   </Splitter>
 </template>
 
-<script setup lang="ts">
-import Splitter from 'primevue/splitter'
-import SplitterPanel from 'primevue/splitterpanel'
-import { computed } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
-
-const settingStore = useSettingStore()
-const sidebarLocation = computed<'left' | 'right'>(() =>
-  settingStore.get('Comfy.Sidebar.Location')
-)
-
-const unifiedWidth = computed(() =>
-  settingStore.get('Comfy.Sidebar.UnifiedWidth')
-)
-
-const sidebarPanelVisible = computed(
-  () => useSidebarTabStore().activeSidebarTab !== null
-)
-const bottomPanelVisible = computed(
-  () => useBottomPanelStore().bottomPanelVisible
-)
-const activeSidebarTabId = computed(
-  () => useSidebarTabStore().activeSidebarTabId
-)
-
-const sidebarStateKey = computed(() => {
-  return unifiedWidth.value ? 'unified-sidebar' : activeSidebarTabId.value ?? ''
-})
-</script>
-
 <style scoped>
 @reference '../assets/css/style.css';
 
diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue
index d0856362f6..7817d9bbb5 100644
--- a/src/components/MenuHamburger.vue
+++ b/src/components/MenuHamburger.vue
@@ -1,24 +1,3 @@
-<template>
-  <div
-    v-show="workspaceState.focusMode"
-    class="comfy-menu-hamburger no-drag"
-    :style="positionCSS"
-  >
-    <Button
-      v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
-      icon="pi pi-bars"
-      severity="secondary"
-      text
-      size="large"
-      :aria-label="$t('menu.showMenu')"
-      aria-live="assertive"
-      @click="exitFocusMode"
-      @contextmenu="showNativeSystemMenu"
-    />
-    <div v-show="menuSetting !== 'Bottom'" class="window-actions-spacer" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import type { CSSProperties } from 'vue'
@@ -56,6 +35,27 @@ const positionCSS = computed<CSSProperties>(() =>
 )
 </script>
 
+<template>
+  <div
+    v-show="workspaceState.focusMode"
+    class="comfy-menu-hamburger no-drag"
+    :style="positionCSS"
+  >
+    <Button
+      v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
+      icon="pi pi-bars"
+      severity="secondary"
+      text
+      size="large"
+      :aria-label="$t('menu.showMenu')"
+      aria-live="assertive"
+      @click="exitFocusMode"
+      @contextmenu="showNativeSystemMenu"
+    />
+    <div v-show="menuSetting !== 'Bottom'" class="window-actions-spacer" />
+  </div>
+</template>
+
 <style scoped>
 @reference '../assets/css/style.css';
 
diff --git a/src/components/actionbar/BatchCountEdit.vue b/src/components/actionbar/BatchCountEdit.vue
index 603ca6067e..9029f21146 100644
--- a/src/components/actionbar/BatchCountEdit.vue
+++ b/src/components/actionbar/BatchCountEdit.vue
@@ -1,3 +1,34 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import InputNumber from 'primevue/inputnumber'
+import { computed } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useQueueSettingsStore } from '@/stores/queueStore'
+
+const queueSettingsStore = useQueueSettingsStore()
+const { batchCount } = storeToRefs(queueSettingsStore)
+const minQueueCount = 1
+
+const settingStore = useSettingStore()
+const maxQueueCount = computed(() =>
+  settingStore.get('Comfy.QueueButton.BatchCountLimit')
+)
+
+const handleClick = (increment: boolean) => {
+  let newCount: number
+  if (increment) {
+    const originalCount = batchCount.value - 1
+    newCount = Math.min(originalCount * 2, maxQueueCount.value)
+  } else {
+    const originalCount = batchCount.value + 1
+    newCount = Math.floor(originalCount / 2)
+  }
+
+  batchCount.value = newCount
+}
+</script>
+
 <template>
   <div
     v-tooltip.bottom="{
@@ -32,37 +63,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import InputNumber from 'primevue/inputnumber'
-import { computed } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useQueueSettingsStore } from '@/stores/queueStore'
-
-const queueSettingsStore = useQueueSettingsStore()
-const { batchCount } = storeToRefs(queueSettingsStore)
-const minQueueCount = 1
-
-const settingStore = useSettingStore()
-const maxQueueCount = computed(() =>
-  settingStore.get('Comfy.QueueButton.BatchCountLimit')
-)
-
-const handleClick = (increment: boolean) => {
-  let newCount: number
-  if (increment) {
-    const originalCount = batchCount.value - 1
-    newCount = Math.min(originalCount * 2, maxQueueCount.value)
-  } else {
-    const originalCount = batchCount.value + 1
-    newCount = Math.floor(originalCount / 2)
-  }
-
-  batchCount.value = newCount
-}
-</script>
-
 <style scoped>
 :deep(.p-inputtext) {
   border-top-left-radius: 0;
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index e05a106197..bdffe004d3 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -1,16 +1,3 @@
-<template>
-  <Panel
-    class="actionbar w-fit"
-    :style="style"
-    :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
-  >
-    <div ref="panelRef" class="actionbar-content flex items-center select-none">
-      <span ref="dragHandleRef" class="drag-handle cursor-move mr-2" />
-      <ComfyQueueButton />
-    </div>
-  </Panel>
-</template>
-
 <script lang="ts" setup>
 import {
   useDraggable,
@@ -228,6 +215,19 @@ watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => {
 })
 </script>
 
+<template>
+  <Panel
+    class="actionbar w-fit"
+    :style="style"
+    :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
+  >
+    <div ref="panelRef" class="actionbar-content flex items-center select-none">
+      <span ref="dragHandleRef" class="drag-handle cursor-move mr-2" />
+      <ComfyQueueButton />
+    </div>
+  </Panel>
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/actionbar/ComfyQueueButton.vue b/src/components/actionbar/ComfyQueueButton.vue
index 3b5b29dfc7..7d4585eca6 100644
--- a/src/components/actionbar/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyQueueButton.vue
@@ -1,3 +1,74 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Button from 'primevue/button'
+import ButtonGroup from 'primevue/buttongroup'
+import SplitButton from 'primevue/splitbutton'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+import {
+  useQueuePendingTaskCountStore,
+  useQueueSettingsStore
+} from '@/stores/queueStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+
+import BatchCountEdit from './BatchCountEdit.vue'
+
+const workspaceStore = useWorkspaceStore()
+const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
+const { mode: queueMode } = storeToRefs(useQueueSettingsStore())
+
+const { t } = useI18n()
+const queueModeMenuItemLookup = computed(() => ({
+  disabled: {
+    key: 'disabled',
+    label: t('menu.run'),
+    tooltip: t('menu.disabledTooltip'),
+    command: () => {
+      queueMode.value = 'disabled'
+    }
+  },
+  instant: {
+    key: 'instant',
+    label: `${t('menu.run')} (${t('menu.instant')})`,
+    tooltip: t('menu.instantTooltip'),
+    command: () => {
+      queueMode.value = 'instant'
+    }
+  },
+  change: {
+    key: 'change',
+    label: `${t('menu.run')} (${t('menu.onChange')})`,
+    tooltip: t('menu.onChangeTooltip'),
+    command: () => {
+      queueMode.value = 'change'
+    }
+  }
+}))
+
+const activeQueueModeMenuItem = computed(
+  () => queueModeMenuItemLookup.value[queueMode.value]
+)
+const queueModeMenuItems = computed(() =>
+  Object.values(queueModeMenuItemLookup.value)
+)
+
+const executingPrompt = computed(() => !!queueCountStore.count.value)
+const hasPendingTasks = computed(
+  () => queueCountStore.count.value > 1 || queueMode.value !== 'disabled'
+)
+
+const commandStore = useCommandStore()
+const queuePrompt = async (e: Event) => {
+  const commandId =
+    'shiftKey' in e && e.shiftKey
+      ? 'Comfy.QueuePromptFront'
+      : 'Comfy.QueuePrompt'
+  await commandStore.execute(commandId)
+}
+</script>
+
 <template>
   <div class="queue-button-group flex">
     <SplitButton
@@ -72,77 +143,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
-import ButtonGroup from 'primevue/buttongroup'
-import SplitButton from 'primevue/splitbutton'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useCommandStore } from '@/stores/commandStore'
-import {
-  useQueuePendingTaskCountStore,
-  useQueueSettingsStore
-} from '@/stores/queueStore'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-
-import BatchCountEdit from './BatchCountEdit.vue'
-
-const workspaceStore = useWorkspaceStore()
-const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
-const { mode: queueMode } = storeToRefs(useQueueSettingsStore())
-
-const { t } = useI18n()
-const queueModeMenuItemLookup = computed(() => ({
-  disabled: {
-    key: 'disabled',
-    label: t('menu.run'),
-    tooltip: t('menu.disabledTooltip'),
-    command: () => {
-      queueMode.value = 'disabled'
-    }
-  },
-  instant: {
-    key: 'instant',
-    label: `${t('menu.run')} (${t('menu.instant')})`,
-    tooltip: t('menu.instantTooltip'),
-    command: () => {
-      queueMode.value = 'instant'
-    }
-  },
-  change: {
-    key: 'change',
-    label: `${t('menu.run')} (${t('menu.onChange')})`,
-    tooltip: t('menu.onChangeTooltip'),
-    command: () => {
-      queueMode.value = 'change'
-    }
-  }
-}))
-
-const activeQueueModeMenuItem = computed(
-  () => queueModeMenuItemLookup.value[queueMode.value]
-)
-const queueModeMenuItems = computed(() =>
-  Object.values(queueModeMenuItemLookup.value)
-)
-
-const executingPrompt = computed(() => !!queueCountStore.count.value)
-const hasPendingTasks = computed(
-  () => queueCountStore.count.value > 1 || queueMode.value !== 'disabled'
-)
-
-const commandStore = useCommandStore()
-const queuePrompt = async (e: Event) => {
-  const commandId =
-    'shiftKey' in e && e.shiftKey
-      ? 'Comfy.QueuePromptFront'
-      : 'Comfy.QueuePrompt'
-  await commandStore.execute(commandId)
-}
-</script>
-
 <style scoped>
 .comfyui-queue-button :deep(.p-splitbutton-dropdown) {
   border-top-right-radius: 0;
diff --git a/src/components/bottomPanel/BottomPanel.vue b/src/components/bottomPanel/BottomPanel.vue
index 0ed71bffa5..4df5a6379c 100644
--- a/src/components/bottomPanel/BottomPanel.vue
+++ b/src/components/bottomPanel/BottomPanel.vue
@@ -1,3 +1,46 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import Tabs from 'primevue/tabs'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import type { BottomPanelExtension } from '@/types/extensionTypes'
+
+const bottomPanelStore = useBottomPanelStore()
+const dialogService = useDialogService()
+const { t } = useI18n()
+
+const isShortcutsTabActive = computed(() => {
+  const activeTabId = bottomPanelStore.activeBottomPanelTabId
+  return (
+    activeTabId === 'shortcuts-essentials' ||
+    activeTabId === 'shortcuts-view-controls'
+  )
+})
+
+const shouldCapitalizeTab = (tabId: string): boolean => {
+  return tabId !== 'shortcuts-essentials' && tabId !== 'shortcuts-view-controls'
+}
+
+const getTabDisplayTitle = (tab: BottomPanelExtension): string => {
+  const title = tab.titleKey ? t(tab.titleKey) : tab.title || ''
+  return shouldCapitalizeTab(tab.id) ? title.toUpperCase() : title
+}
+
+const openKeybindingSettings = async () => {
+  dialogService.showSettingsDialog('keybinding')
+}
+
+const closeBottomPanel = () => {
+  bottomPanelStore.activePanel = null
+}
+</script>
+
 <template>
   <div class="flex flex-col h-full">
     <Tabs
@@ -52,46 +95,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import Tabs from 'primevue/tabs'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
-import { useDialogService } from '@/services/dialogService'
-import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
-import type { BottomPanelExtension } from '@/types/extensionTypes'
-
-const bottomPanelStore = useBottomPanelStore()
-const dialogService = useDialogService()
-const { t } = useI18n()
-
-const isShortcutsTabActive = computed(() => {
-  const activeTabId = bottomPanelStore.activeBottomPanelTabId
-  return (
-    activeTabId === 'shortcuts-essentials' ||
-    activeTabId === 'shortcuts-view-controls'
-  )
-})
-
-const shouldCapitalizeTab = (tabId: string): boolean => {
-  return tabId !== 'shortcuts-essentials' && tabId !== 'shortcuts-view-controls'
-}
-
-const getTabDisplayTitle = (tab: BottomPanelExtension): string => {
-  const title = tab.titleKey ? t(tab.titleKey) : tab.title || ''
-  return shouldCapitalizeTab(tab.id) ? title.toUpperCase() : title
-}
-
-const openKeybindingSettings = async () => {
-  dialogService.showSettingsDialog('keybinding')
-}
-
-const closeBottomPanel = () => {
-  bottomPanelStore.activePanel = null
-}
-</script>
diff --git a/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue b/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue
index 459d095ae2..082888025f 100644
--- a/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue
+++ b/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue
@@ -1,14 +1,3 @@
-<template>
-  <div class="h-full flex flex-col p-4">
-    <div class="flex-1 min-h-0 overflow-auto">
-      <ShortcutsList
-        :commands="essentialsCommands"
-        :subcategories="essentialsSubcategories"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -31,3 +20,14 @@ const { subcategories: essentialsSubcategories } = useCommandSubcategories(
   ESSENTIALS_CONFIG
 )
 </script>
+
+<template>
+  <div class="h-full flex flex-col p-4">
+    <div class="flex-1 min-h-0 overflow-auto">
+      <ShortcutsList
+        :commands="essentialsCommands"
+        :subcategories="essentialsSubcategories"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
index 7bc8cbf25f..b552fecdbc 100644
--- a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
+++ b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
@@ -1,50 +1,3 @@
-<template>
-  <div class="shortcuts-list flex justify-center">
-    <div class="grid gap-4 md:gap-24 h-full grid-cols-1 md:grid-cols-3 w-[90%]">
-      <div
-        v-for="(subcategoryCommands, subcategory) in filteredSubcategories"
-        :key="subcategory"
-        class="flex flex-col"
-      >
-        <h3
-          class="subcategory-title text-xs font-bold uppercase tracking-wide text-surface-600 dark-theme:text-surface-400 mb-4"
-        >
-          {{ getSubcategoryTitle(subcategory) }}
-        </h3>
-
-        <div class="flex flex-col gap-1">
-          <div
-            v-for="command in subcategoryCommands"
-            :key="command.id"
-            class="shortcut-item flex justify-between items-center py-2 rounded hover:bg-surface-100 dark-theme:hover:bg-surface-700 transition-colors duration-200"
-          >
-            <div class="shortcut-info grow pr-4">
-              <div class="shortcut-name text-sm font-medium">
-                {{ t(`commands.${normalizeI18nKey(command.id)}.label`) }}
-              </div>
-            </div>
-
-            <div class="keybinding-display shrink-0">
-              <div
-                class="keybinding-combo flex gap-1"
-                :aria-label="`Keyboard shortcut: ${command.keybinding!.combo.getKeySequences().join(' + ')}`"
-              >
-                <span
-                  v-for="key in command.keybinding!.combo.getKeySequences()"
-                  :key="key"
-                  class="key-badge px-2 py-1 text-xs font-mono bg-surface-200 dark-theme:bg-surface-600 rounded border min-w-6 text-center"
-                >
-                  {{ formatKey(key) }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -101,6 +54,53 @@ const formatKey = (key: string): string => {
 }
 </script>
 
+<template>
+  <div class="shortcuts-list flex justify-center">
+    <div class="grid gap-4 md:gap-24 h-full grid-cols-1 md:grid-cols-3 w-[90%]">
+      <div
+        v-for="(subcategoryCommands, subcategory) in filteredSubcategories"
+        :key="subcategory"
+        class="flex flex-col"
+      >
+        <h3
+          class="subcategory-title text-xs font-bold uppercase tracking-wide text-surface-600 dark-theme:text-surface-400 mb-4"
+        >
+          {{ getSubcategoryTitle(subcategory) }}
+        </h3>
+
+        <div class="flex flex-col gap-1">
+          <div
+            v-for="command in subcategoryCommands"
+            :key="command.id"
+            class="shortcut-item flex justify-between items-center py-2 rounded hover:bg-surface-100 dark-theme:hover:bg-surface-700 transition-colors duration-200"
+          >
+            <div class="shortcut-info grow pr-4">
+              <div class="shortcut-name text-sm font-medium">
+                {{ t(`commands.${normalizeI18nKey(command.id)}.label`) }}
+              </div>
+            </div>
+
+            <div class="keybinding-display shrink-0">
+              <div
+                class="keybinding-combo flex gap-1"
+                :aria-label="`Keyboard shortcut: ${command.keybinding!.combo.getKeySequences().join(' + ')}`"
+              >
+                <span
+                  v-for="key in command.keybinding!.combo.getKeySequences()"
+                  :key="key"
+                  class="key-badge px-2 py-1 text-xs font-mono bg-surface-200 dark-theme:bg-surface-600 rounded border min-w-6 text-center"
+                >
+                  {{ formatKey(key) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .subcategory-title {
   color: var(--p-text-muted-color);
diff --git a/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue b/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue
index 4852e9d0ac..a91d81d329 100644
--- a/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue
+++ b/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue
@@ -1,14 +1,3 @@
-<template>
-  <div class="h-full flex flex-col p-4">
-    <div class="flex-1 min-h-0 overflow-auto">
-      <ShortcutsList
-        :commands="viewControlsCommands"
-        :subcategories="viewControlsSubcategories"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -31,3 +20,14 @@ const { subcategories: viewControlsSubcategories } = useCommandSubcategories(
   VIEW_CONTROLS_CONFIG
 )
 </script>
+
+<template>
+  <div class="h-full flex flex-col p-4">
+    <div class="flex-1 min-h-0 overflow-auto">
+      <ShortcutsList
+        :commands="viewControlsCommands"
+        :subcategories="viewControlsSubcategories"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
index 8e6a54e041..952398326e 100644
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -1,27 +1,3 @@
-<template>
-  <div ref="rootEl" class="relative overflow-hidden h-full w-full bg-black">
-    <div class="p-terminal rounded-none h-full w-full p-2">
-      <div ref="terminalEl" class="h-full terminal-host" />
-    </div>
-    <Button
-      v-tooltip.left="{
-        value: tooltipText,
-        showDelay: 300
-      }"
-      icon="pi pi-copy"
-      severity="secondary"
-      size="small"
-      :class="
-        cn('absolute top-2 right-8 transition-opacity', {
-          'opacity-0 pointer-events-none select-none': !isHovered
-        })
-      "
-      :aria-label="tooltipText"
-      @click="handleCopy"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useElementHover, useEventListener } from '@vueuse/core'
 import type { IDisposable } from '@xterm/xterm'
@@ -97,6 +73,30 @@ onUnmounted(() => {
 })
 </script>
 
+<template>
+  <div ref="rootEl" class="relative overflow-hidden h-full w-full bg-black">
+    <div class="p-terminal rounded-none h-full w-full p-2">
+      <div ref="terminalEl" class="h-full terminal-host" />
+    </div>
+    <Button
+      v-tooltip.left="{
+        value: tooltipText,
+        showDelay: 300
+      }"
+      icon="pi pi-copy"
+      severity="secondary"
+      size="small"
+      :class="
+        cn('absolute top-2 right-8 transition-opacity', {
+          'opacity-0 pointer-events-none select-none': !isHovered
+        })
+      "
+      :aria-label="tooltipText"
+      @click="handleCopy"
+    />
+  </div>
+</template>
+
 <style scoped>
 :deep(.p-terminal) .xterm {
   overflow-x: auto;
diff --git a/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue b/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
index f32357c486..8329f7ab7e 100644
--- a/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
@@ -1,7 +1,3 @@
-<template>
-  <BaseTerminal @created="terminalCreated" />
-</template>
-
 <script setup lang="ts">
 import type { IDisposable } from '@xterm/xterm'
 import type { Ref } from 'vue'
@@ -58,6 +54,10 @@ const terminalCreated = (
 }
 </script>
 
+<template>
+  <BaseTerminal @created="terminalCreated" />
+</template>
+
 <style scoped>
 :deep(.p-terminal) .xterm {
   overflow-x: auto;
diff --git a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
index 68f643218f..24592caca9 100644
--- a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="bg-black h-full w-full">
-    <p v-if="errorMessage" class="p-4 text-center">
-      {{ errorMessage }}
-    </p>
-    <ProgressSpinner
-      v-else-if="loading"
-      class="relative inset-0 flex justify-center items-center h-full z-10"
-    />
-    <BaseTerminal v-show="!loading" @created="terminalCreated" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
@@ -88,6 +75,19 @@ const terminalCreated = (
 }
 </script>
 
+<template>
+  <div class="bg-black h-full w-full">
+    <p v-if="errorMessage" class="p-4 text-center">
+      {{ errorMessage }}
+    </p>
+    <ProgressSpinner
+      v-else-if="loading"
+      class="relative inset-0 flex justify-center items-center h-full z-10"
+    />
+    <BaseTerminal v-show="!loading" @created="terminalCreated" />
+  </div>
+</template>
+
 <style scoped>
 :deep(.p-terminal) .xterm {
   overflow-x: auto;
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index fb218ab1e2..3934c7695f 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -1,36 +1,3 @@
-<template>
-  <div
-    class="subgraph-breadcrumb w-auto"
-    :class="{
-      'subgraph-breadcrumb-collapse': collapseTabs,
-      'subgraph-breadcrumb-overflow': overflowingTabs
-    }"
-    :style="{
-      '--p-breadcrumb-gap': `${ITEM_GAP}px`,
-      '--p-breadcrumb-item-min-width': `${MIN_WIDTH}px`,
-      '--p-breadcrumb-item-padding': `${ITEM_PADDING}px`,
-      '--p-breadcrumb-icon-width': `${ICON_WIDTH}px`
-    }"
-  >
-    <Breadcrumb
-      ref="breadcrumbRef"
-      class="bg-transparent p-0"
-      :model="items"
-      aria-label="Graph navigation"
-    >
-      <template #item="{ item }">
-        <SubgraphBreadcrumbItem
-          :item="item"
-          :is-active="item === items.at(-1)"
-        />
-      </template>
-      <template #separator
-        ><span style="transform: scale(1.5)"> / </span></template
-      >
-    </Breadcrumb>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Breadcrumb from 'primevue/breadcrumb'
 import type { MenuItem } from 'primevue/menuitem'
@@ -160,6 +127,39 @@ onUpdated(() => {
 })
 </script>
 
+<template>
+  <div
+    class="subgraph-breadcrumb w-auto"
+    :class="{
+      'subgraph-breadcrumb-collapse': collapseTabs,
+      'subgraph-breadcrumb-overflow': overflowingTabs
+    }"
+    :style="{
+      '--p-breadcrumb-gap': `${ITEM_GAP}px`,
+      '--p-breadcrumb-item-min-width': `${MIN_WIDTH}px`,
+      '--p-breadcrumb-item-padding': `${ITEM_PADDING}px`,
+      '--p-breadcrumb-icon-width': `${ICON_WIDTH}px`
+    }"
+  >
+    <Breadcrumb
+      ref="breadcrumbRef"
+      class="bg-transparent p-0"
+      :model="items"
+      aria-label="Graph navigation"
+    >
+      <template #item="{ item }">
+        <SubgraphBreadcrumbItem
+          :item="item"
+          :is-active="item === items.at(-1)"
+        />
+      </template>
+      <template #separator
+        ><span style="transform: scale(1.5)"> / </span></template
+      >
+    </Breadcrumb>
+  </div>
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index a8162b21b6..c23ad0d44e 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -1,50 +1,3 @@
-<template>
-  <a
-    ref="wrapperRef"
-    v-tooltip.bottom="{
-      value: item.label,
-      showDelay: 512
-    }"
-    href="#"
-    class="cursor-pointer p-breadcrumb-item-link"
-    :class="{
-      'flex items-center gap-1': isActive,
-      'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible,
-      'p-breadcrumb-item-link-icon-visible': isActive,
-      'active-breadcrumb-item': isActive
-    }"
-    @click="handleClick"
-  >
-    <span class="p-breadcrumb-item-label">{{ item.label }}</span>
-    <Tag v-if="item.isBlueprint" :value="'Blueprint'" severity="primary" />
-    <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
-  </a>
-  <Menu
-    v-if="isActive"
-    ref="menu"
-    :model="menuItems"
-    :popup="true"
-    :pt="{
-      root: {
-        style: 'background-color: var(--comfy-menu-secondary-bg)'
-      },
-      itemLink: {
-        class: 'py-2'
-      }
-    }"
-  />
-  <InputText
-    v-if="isEditing"
-    ref="itemInputRef"
-    v-model="itemLabel"
-    class="fixed z-10000 text-[.8rem] px-2 py-2"
-    @blur="inputBlur(true)"
-    @click.stop
-    @keydown.enter="inputBlur(true)"
-    @keydown.esc="inputBlur(false)"
-  />
-</template>
-
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
 import type { MenuState } from 'primevue/menu'
@@ -230,6 +183,53 @@ const inputBlur = async (doRename: boolean) => {
 }
 </script>
 
+<template>
+  <a
+    ref="wrapperRef"
+    v-tooltip.bottom="{
+      value: item.label,
+      showDelay: 512
+    }"
+    href="#"
+    class="cursor-pointer p-breadcrumb-item-link"
+    :class="{
+      'flex items-center gap-1': isActive,
+      'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible,
+      'p-breadcrumb-item-link-icon-visible': isActive,
+      'active-breadcrumb-item': isActive
+    }"
+    @click="handleClick"
+  >
+    <span class="p-breadcrumb-item-label">{{ item.label }}</span>
+    <Tag v-if="item.isBlueprint" :value="'Blueprint'" severity="primary" />
+    <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
+  </a>
+  <Menu
+    v-if="isActive"
+    ref="menu"
+    :model="menuItems"
+    :popup="true"
+    :pt="{
+      root: {
+        style: 'background-color: var(--comfy-menu-secondary-bg)'
+      },
+      itemLink: {
+        class: 'py-2'
+      }
+    }"
+  />
+  <InputText
+    v-if="isEditing"
+    ref="itemInputRef"
+    v-model="itemLabel"
+    class="fixed z-10000 text-[.8rem] px-2 py-2"
+    @blur="inputBlur(true)"
+    @click.stop
+    @keydown.enter="inputBlur(true)"
+    @keydown.esc="inputBlur(false)"
+  />
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/button/IconButton.vue b/src/components/button/IconButton.vue
index 5de7adfcd5..e5678c0758 100644
--- a/src/components/button/IconButton.vue
+++ b/src/components/button/IconButton.vue
@@ -1,15 +1,3 @@
-<template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
-    <slot></slot>
-  </Button>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
@@ -50,3 +38,15 @@ const buttonStyle = computed(() => {
   return cn(baseClasses, sizeClasses, typeClasses, className)
 })
 </script>
+
+<template>
+  <Button
+    v-bind="$attrs"
+    unstyled
+    :class="buttonStyle"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <slot></slot>
+  </Button>
+</template>
diff --git a/src/components/button/IconGroup.vue b/src/components/button/IconGroup.vue
index 9c5bbd40c4..1c4751fae1 100644
--- a/src/components/button/IconGroup.vue
+++ b/src/components/button/IconGroup.vue
@@ -1,9 +1,3 @@
-<template>
-  <div :class="iconGroupClasses">
-    <slot></slot>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { cn } from '@/utils/tailwindUtil'
 
@@ -15,3 +9,9 @@ const iconGroupClasses = cn(
   'cursor-pointer'
 )
 </script>
+
+<template>
+  <div :class="iconGroupClasses">
+    <slot></slot>
+  </div>
+</template>
diff --git a/src/components/button/IconTextButton.vue b/src/components/button/IconTextButton.vue
index a62aab08b9..e72f91021e 100644
--- a/src/components/button/IconTextButton.vue
+++ b/src/components/button/IconTextButton.vue
@@ -1,17 +1,3 @@
-<template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
-    <slot v-if="iconPosition !== 'right'" name="icon"></slot>
-    <span>{{ label }}</span>
-    <slot v-if="iconPosition === 'right'" name="icon"></slot>
-  </Button>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
@@ -56,3 +42,17 @@ const buttonStyle = computed(() => {
   return cn(baseClasses, sizeClasses, typeClasses, className)
 })
 </script>
+
+<template>
+  <Button
+    v-bind="$attrs"
+    unstyled
+    :class="buttonStyle"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <slot v-if="iconPosition !== 'right'" name="icon"></slot>
+    <span>{{ label }}</span>
+    <slot v-if="iconPosition === 'right'" name="icon"></slot>
+  </Button>
+</template>
diff --git a/src/components/button/MoreButton.vue b/src/components/button/MoreButton.vue
index 0ea645c7b2..2710e12542 100644
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -1,26 +1,3 @@
-<template>
-  <div class="relative inline-flex items-center">
-    <IconButton @click="toggle">
-      <i-lucide:more-vertical class="text-sm" />
-    </IconButton>
-
-    <Popover
-      ref="popover"
-      :append-to="'body'"
-      :auto-z-index="true"
-      :base-z-index="1000"
-      :dismissable="true"
-      :close-on-escape="true"
-      unstyled
-      :pt="pt"
-    >
-      <div class="flex flex-col gap-2 p-2 min-w-40">
-        <slot :close="hide" />
-      </div>
-    </Popover>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
@@ -54,3 +31,26 @@ const pt = computed(() => ({
   }
 }))
 </script>
+
+<template>
+  <div class="relative inline-flex items-center">
+    <IconButton @click="toggle">
+      <i-lucide:more-vertical class="text-sm" />
+    </IconButton>
+
+    <Popover
+      ref="popover"
+      :append-to="'body'"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="pt"
+    >
+      <div class="flex flex-col gap-2 p-2 min-w-40">
+        <slot :close="hide" />
+      </div>
+    </Popover>
+  </div>
+</template>
diff --git a/src/components/button/TextButton.vue b/src/components/button/TextButton.vue
index 4dbe53b9cd..a65cf7f6e2 100644
--- a/src/components/button/TextButton.vue
+++ b/src/components/button/TextButton.vue
@@ -1,15 +1,3 @@
-<template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
-    <span>{{ label }}</span>
-  </Button>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
@@ -52,3 +40,15 @@ const buttonStyle = computed(() => {
   return cn(baseClasses, sizeClasses, typeClasses, className)
 })
 </script>
+
+<template>
+  <Button
+    v-bind="$attrs"
+    unstyled
+    :class="buttonStyle"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <span>{{ label }}</span>
+  </Button>
+</template>
diff --git a/src/components/card/CardBottom.vue b/src/components/card/CardBottom.vue
index 7f35754e6c..08377f0051 100644
--- a/src/components/card/CardBottom.vue
+++ b/src/components/card/CardBottom.vue
@@ -1,7 +1,7 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="flex-1 w-full h-full">
     <slot></slot>
   </div>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/src/components/card/CardContainer.vue b/src/components/card/CardContainer.vue
index 1a17d5659b..889d79c5a0 100644
--- a/src/components/card/CardContainer.vue
+++ b/src/components/card/CardContainer.vue
@@ -1,10 +1,3 @@
-<template>
-  <div :class="containerClasses">
-    <slot name="top"></slot>
-    <slot name="bottom"></slot>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -25,3 +18,10 @@ const containerClasses = computed(() => {
   return `${baseClasses} ${ratioClasses[ratio]}`
 })
 </script>
+
+<template>
+  <div :class="containerClasses">
+    <slot name="top"></slot>
+    <slot name="bottom"></slot>
+  </div>
+</template>
diff --git a/src/components/card/CardDescription.vue b/src/components/card/CardDescription.vue
index 6085fcf8e3..3c0dea66c6 100644
--- a/src/components/card/CardDescription.vue
+++ b/src/components/card/CardDescription.vue
@@ -1,7 +1,7 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="text-zinc-500 dark-theme:text-zinc-400 text-xs line-clamp-2 h-7">
     <slot></slot>
   </div>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/src/components/card/CardTitle.vue b/src/components/card/CardTitle.vue
index ff0ed236ac..d40f92ca17 100644
--- a/src/components/card/CardTitle.vue
+++ b/src/components/card/CardTitle.vue
@@ -1,7 +1,7 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="text-neutral text-sm">
     <slot></slot>
   </div>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/src/components/card/CardTop.vue b/src/components/card/CardTop.vue
index ed7e26089b..e74dd8d19e 100644
--- a/src/components/card/CardTop.vue
+++ b/src/components/card/CardTop.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const { ratio = 'square' } = defineProps<{
+  ratio?: 'square' | 'landscape'
+}>()
+
+const topStyle = computed(() => {
+  const baseClasses = 'relative p-0'
+
+  const ratioClasses = {
+    square: 'aspect-square',
+    landscape: 'aspect-48/27'
+  }
+
+  return `${baseClasses} ${ratioClasses[ratio]}`
+})
+</script>
+
 <template>
   <div :class="topStyle">
     <slot class="absolute top-0 left-0 w-full h-full"></slot>
@@ -19,22 +38,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const { ratio = 'square' } = defineProps<{
-  ratio?: 'square' | 'landscape'
-}>()
-
-const topStyle = computed(() => {
-  const baseClasses = 'relative p-0'
-
-  const ratioClasses = {
-    square: 'aspect-square',
-    landscape: 'aspect-48/27'
-  }
-
-  return `${baseClasses} ${ratioClasses[ratio]}`
-})
-</script>
diff --git a/src/components/chip/SquareChip.vue b/src/components/chip/SquareChip.vue
index c886b089b2..e576013bc5 100644
--- a/src/components/chip/SquareChip.vue
+++ b/src/components/chip/SquareChip.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+const { label } = defineProps<{
+  label: string
+}>()
+</script>
 <template>
   <div
     class="inline-flex justify-center items-center gap-1 shrink-0 py-1 px-2 text-xs bg-[#D9D9D966]/40 rounded font-bold text-white/90"
@@ -6,8 +11,3 @@
     <span>{{ label }}</span>
   </div>
 </template>
-<script setup lang="ts">
-const { label } = defineProps<{
-  label: string
-}>()
-</script>
diff --git a/src/components/common/BackgroundImageUpload.vue b/src/components/common/BackgroundImageUpload.vue
index 46105e537a..4c6d70662b 100644
--- a/src/components/common/BackgroundImageUpload.vue
+++ b/src/components/common/BackgroundImageUpload.vue
@@ -1,36 +1,3 @@
-<template>
-  <div class="flex gap-2">
-    <InputText
-      v-model="modelValue"
-      class="flex-1"
-      :placeholder="$t('g.imageUrl')"
-    />
-    <Button
-      v-tooltip="$t('g.upload')"
-      :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
-      size="small"
-      :disabled="isUploading"
-      @click="triggerFileInput"
-    />
-    <Button
-      v-tooltip="$t('g.clear')"
-      outlined
-      icon="pi pi-trash"
-      severity="danger"
-      size="small"
-      :disabled="!modelValue"
-      @click="clearImage"
-    />
-    <input
-      ref="fileInput"
-      type="file"
-      class="hidden"
-      accept="image/*"
-      @change="handleFileUpload"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
@@ -101,3 +68,36 @@ const clearImage = () => {
   }
 }
 </script>
+
+<template>
+  <div class="flex gap-2">
+    <InputText
+      v-model="modelValue"
+      class="flex-1"
+      :placeholder="$t('g.imageUrl')"
+    />
+    <Button
+      v-tooltip="$t('g.upload')"
+      :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
+      size="small"
+      :disabled="isUploading"
+      @click="triggerFileInput"
+    />
+    <Button
+      v-tooltip="$t('g.clear')"
+      outlined
+      icon="pi pi-trash"
+      severity="danger"
+      size="small"
+      :disabled="!modelValue"
+      @click="clearImage"
+    />
+    <input
+      ref="fileInput"
+      type="file"
+      class="hidden"
+      accept="image/*"
+      @change="handleFileUpload"
+    />
+  </div>
+</template>
diff --git a/src/components/common/ColorCustomizationSelector.vue b/src/components/common/ColorCustomizationSelector.vue
index b25d265ea0..febbce245c 100644
--- a/src/components/common/ColorCustomizationSelector.vue
+++ b/src/components/common/ColorCustomizationSelector.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    class="color-customization-selector-container flex flex-row items-center gap-2"
-  >
-    <SelectButton
-      v-model="selectedColorOption"
-      :options="colorOptionsWithCustom"
-      option-label="name"
-      data-key="value"
-      :allow-empty="false"
-    >
-      <template #option="slotProps">
-        <div
-          v-if="slotProps.option.name !== '_custom'"
-          :style="{
-            width: '20px',
-            height: '20px',
-            backgroundColor: slotProps.option.value,
-            borderRadius: '50%'
-          }"
-        />
-        <i v-else class="pi pi-palette text-lg" />
-      </template>
-    </SelectButton>
-    <ColorPicker
-      v-if="selectedColorOption.name === '_custom'"
-      v-model="customColorValue"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import ColorPicker from 'primevue/colorpicker'
 import SelectButton from 'primevue/selectbutton'
@@ -86,3 +55,34 @@ watch(customColorValue, (newValue) => {
   }
 })
 </script>
+
+<template>
+  <div
+    class="color-customization-selector-container flex flex-row items-center gap-2"
+  >
+    <SelectButton
+      v-model="selectedColorOption"
+      :options="colorOptionsWithCustom"
+      option-label="name"
+      data-key="value"
+      :allow-empty="false"
+    >
+      <template #option="slotProps">
+        <div
+          v-if="slotProps.option.name !== '_custom'"
+          :style="{
+            width: '20px',
+            height: '20px',
+            backgroundColor: slotProps.option.value,
+            borderRadius: '50%'
+          }"
+        />
+        <i v-else class="pi pi-palette text-lg" />
+      </template>
+    </SelectButton>
+    <ColorPicker
+      v-if="selectedColorOption.name === '_custom'"
+      v-model="customColorValue"
+    />
+  </div>
+</template>
diff --git a/src/components/common/ComfyImage.vue b/src/components/common/ComfyImage.vue
index aa6a66c55f..d3bc6a3f07 100644
--- a/src/components/common/ComfyImage.vue
+++ b/src/components/common/ComfyImage.vue
@@ -1,4 +1,25 @@
 <!-- A image with placeholder fallback on error -->
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const {
+  src,
+  class: classProp,
+  contain = false,
+  alt = 'Image content'
+} = defineProps<{
+  src: string
+  class?: any
+  contain?: boolean
+  alt?: string
+}>()
+
+const imageBroken = ref(false)
+const handleImageError = () => {
+  imageBroken.value = true
+}
+</script>
+
 <template>
   <span
     v-if="!imageBroken"
@@ -28,27 +49,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const {
-  src,
-  class: classProp,
-  contain = false,
-  alt = 'Image content'
-} = defineProps<{
-  src: string
-  class?: any
-  contain?: boolean
-  alt?: string
-}>()
-
-const imageBroken = ref(false)
-const handleImageError = () => {
-  imageBroken.value = true
-}
-</script>
-
 <style scoped>
 .comfy-image-wrap {
   display: contents;
diff --git a/src/components/common/ContentDivider.vue b/src/components/common/ContentDivider.vue
index f8cd836634..78a8673724 100644
--- a/src/components/common/ContentDivider.vue
+++ b/src/components/common/ContentDivider.vue
@@ -1,16 +1,3 @@
-<template>
-  <div
-    :class="{
-      'content-divider': true,
-      'content-divider--horizontal': orientation === 'horizontal',
-      'content-divider--vertical': orientation === 'vertical'
-    }"
-    :style="{
-      backgroundColor: isLightTheme ? '#DCDAE1' : '#2C2C2C'
-    }"
-  />
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -27,6 +14,19 @@ const isLightTheme = computed(
 )
 </script>
 
+<template>
+  <div
+    :class="{
+      'content-divider': true,
+      'content-divider--horizontal': orientation === 'horizontal',
+      'content-divider--vertical': orientation === 'vertical'
+    }"
+    :style="{
+      backgroundColor: isLightTheme ? '#DCDAE1' : '#2C2C2C'
+    }"
+  />
+</template>
+
 <style scoped>
 .content-divider {
   display: inline-block;
diff --git a/src/components/common/CustomFormValue.vue b/src/components/common/CustomFormValue.vue
index cf94da51cf..b572ea56ed 100644
--- a/src/components/common/CustomFormValue.vue
+++ b/src/components/common/CustomFormValue.vue
@@ -1,7 +1,3 @@
-<template>
-  <div ref="container" />
-</template>
-
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 
@@ -23,3 +19,7 @@ onMounted(renderContent)
 
 watch(() => props.renderFunction, renderContent)
 </script>
+
+<template>
+  <div ref="container" />
+</template>
diff --git a/src/components/common/CustomizationDialog.vue b/src/components/common/CustomizationDialog.vue
index af624bfa5a..d951ce7c71 100644
--- a/src/components/common/CustomizationDialog.vue
+++ b/src/components/common/CustomizationDialog.vue
@@ -1,48 +1,3 @@
-<template>
-  <Dialog v-model:visible="visible" :header="$t('g.customizeFolder')">
-    <div class="p-fluid">
-      <div class="field icon-field">
-        <label for="icon">{{ $t('g.icon') }}</label>
-        <SelectButton
-          v-model="selectedIcon"
-          :options="iconOptions"
-          option-label="name"
-          data-key="value"
-        >
-          <template #option="slotProps">
-            <i
-              :class="['pi', slotProps.option.value, 'mr-2']"
-              :style="{ color: finalColor }"
-            />
-          </template>
-        </SelectButton>
-      </div>
-      <Divider />
-      <div class="field color-field">
-        <label for="color">{{ $t('g.color') }}</label>
-        <ColorCustomizationSelector
-          v-model="finalColor"
-          :color-options="colorOptions"
-        />
-      </div>
-    </div>
-    <template #footer>
-      <Button
-        :label="$t('g.reset')"
-        icon="pi pi-refresh"
-        class="p-button-text"
-        @click="resetCustomization"
-      />
-      <Button
-        :label="$t('g.confirm')"
-        icon="pi pi-check"
-        autofocus
-        @click="confirmCustomization"
-      />
-    </template>
-  </Dialog>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
@@ -133,6 +88,51 @@ watch(
 )
 </script>
 
+<template>
+  <Dialog v-model:visible="visible" :header="$t('g.customizeFolder')">
+    <div class="p-fluid">
+      <div class="field icon-field">
+        <label for="icon">{{ $t('g.icon') }}</label>
+        <SelectButton
+          v-model="selectedIcon"
+          :options="iconOptions"
+          option-label="name"
+          data-key="value"
+        >
+          <template #option="slotProps">
+            <i
+              :class="['pi', slotProps.option.value, 'mr-2']"
+              :style="{ color: finalColor }"
+            />
+          </template>
+        </SelectButton>
+      </div>
+      <Divider />
+      <div class="field color-field">
+        <label for="color">{{ $t('g.color') }}</label>
+        <ColorCustomizationSelector
+          v-model="finalColor"
+          :color-options="colorOptions"
+        />
+      </div>
+    </div>
+    <template #footer>
+      <Button
+        :label="$t('g.reset')"
+        icon="pi pi-refresh"
+        class="p-button-text"
+        @click="resetCustomization"
+      />
+      <Button
+        :label="$t('g.confirm')"
+        icon="pi pi-check"
+        autofocus
+        @click="confirmCustomization"
+      />
+    </template>
+  </Dialog>
+</template>
+
 <style scoped>
 .p-selectbutton .p-button {
   padding: 0.5rem;
diff --git a/src/components/common/DeviceInfo.vue b/src/components/common/DeviceInfo.vue
index 8e00fd16ba..b8748a34be 100644
--- a/src/components/common/DeviceInfo.vue
+++ b/src/components/common/DeviceInfo.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="grid grid-cols-2 gap-2">
-    <template v-for="col in deviceColumns" :key="col.field">
-      <div class="font-medium">
-        {{ col.header }}
-      </div>
-      <div>
-        {{ formatValue(props.device[col.field], col.field) }}
-      </div>
-    </template>
-  </div>
-</template>
-
 <script setup lang="ts">
 import type { DeviceStats } from '@/schemas/apiSchema'
 import { formatSize } from '@/utils/formatUtil'
@@ -39,3 +26,16 @@ const formatValue = (value: any, field: string) => {
   return value
 }
 </script>
+
+<template>
+  <div class="grid grid-cols-2 gap-2">
+    <template v-for="col in deviceColumns" :key="col.field">
+      <div class="font-medium">
+        {{ col.header }}
+      </div>
+      <div>
+        {{ formatValue(props.device[col.field], col.field) }}
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/src/components/common/DotSpinner.vue b/src/components/common/DotSpinner.vue
index 548737bdf5..1b2f760871 100644
--- a/src/components/common/DotSpinner.vue
+++ b/src/components/common/DotSpinner.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
+const { size = 24, duration = '2s' } = defineProps<{
+  size?: number
+  duration?: string
+}>()
+
+const colorPaletteStore = useColorPaletteStore()
+
+const color = computed(() =>
+  colorPaletteStore.completedActivePalette.light_theme ? '#2C2B30' : '#D4D4D4'
+)
+</script>
+
 <template>
   <div
     class="inline-flex items-center justify-center"
@@ -95,23 +112,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-
-const { size = 24, duration = '2s' } = defineProps<{
-  size?: number
-  duration?: string
-}>()
-
-const colorPaletteStore = useColorPaletteStore()
-
-const color = computed(() =>
-  colorPaletteStore.completedActivePalette.light_theme ? '#2C2B30' : '#D4D4D4'
-)
-</script>
-
 <style scoped>
 .dot-animation {
   animation: dot-pulse 1s ease-in-out infinite;
diff --git a/src/components/common/EditableText.vue b/src/components/common/EditableText.vue
index 625df22a0c..3743aad568 100644
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -1,30 +1,3 @@
-<template>
-  <div class="editable-text">
-    <span v-if="!isEditing">
-      {{ modelValue }}
-    </span>
-    <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
-    <InputText
-      v-else
-      ref="inputRef"
-      v-model:model-value="inputValue"
-      v-focus
-      type="text"
-      size="small"
-      fluid
-      :pt="{
-        root: {
-          onBlur: finishEditing,
-          ...inputAttrs
-        }
-      }"
-      @keyup.enter="blurInputElement"
-      @keyup.escape="cancelEditing"
-      @click.stop
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
 import { nextTick, ref, watch } from 'vue'
@@ -90,6 +63,33 @@ const vFocus = {
 }
 </script>
 
+<template>
+  <div class="editable-text">
+    <span v-if="!isEditing">
+      {{ modelValue }}
+    </span>
+    <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
+    <InputText
+      v-else
+      ref="inputRef"
+      v-model:model-value="inputValue"
+      v-focus
+      type="text"
+      size="small"
+      fluid
+      :pt="{
+        root: {
+          onBlur: finishEditing,
+          ...inputAttrs
+        }
+      }"
+      @keyup.enter="blurInputElement"
+      @keyup.escape="cancelEditing"
+      @click.stop
+    />
+  </div>
+</template>
+
 <style scoped>
 .editable-text {
   display: inline;
diff --git a/src/components/common/ElectronFileDownload.vue b/src/components/common/ElectronFileDownload.vue
index e09dce0d0b..47bbb50d3e 100644
--- a/src/components/common/ElectronFileDownload.vue
+++ b/src/components/common/ElectronFileDownload.vue
@@ -1,4 +1,58 @@
 <!-- A Electron-backed download button with a label, size hint and progress bar -->
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ProgressBar from 'primevue/progressbar'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useDownload } from '@/composables/useDownload'
+import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+import { formatSize } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  url: string
+  hint?: string
+  label?: string
+  error?: string
+}>()
+
+const { t } = useI18n()
+const label = computed(() => props.label || props.url.split('/').pop())
+const hint = computed(() => props.hint || props.url)
+const download = useDownload(props.url)
+const downloadProgress = ref<number>(0)
+const status = ref<string | null>(null)
+const fileSize = computed(() =>
+  download.fileSize.value ? formatSize(download.fileSize.value) : '?'
+)
+const electronDownloadStore = useElectronDownloadStore()
+// @ts-expect-error fixme ts strict error
+const [savePath, filename] = props.label.split('/')
+
+electronDownloadStore.$subscribe((_, { downloads }) => {
+  const download = downloads.find((download) => props.url === download.url)
+
+  if (download) {
+    // @ts-expect-error fixme ts strict error
+    downloadProgress.value = Number((download.progress * 100).toFixed(1))
+    // @ts-expect-error fixme ts strict error
+    status.value = download.status
+  }
+})
+
+const triggerDownload = async () => {
+  await electronDownloadStore.start({
+    url: props.url,
+    savePath: savePath.trim(),
+    filename: filename.trim()
+  })
+}
+
+const triggerCancelDownload = () => electronDownloadStore.cancel(props.url)
+const triggerPauseDownload = () => electronDownloadStore.pause(props.url)
+const triggerResumeDownload = () => electronDownloadStore.resume(props.url)
+</script>
+
 <template>
   <div class="flex flex-col">
     <div class="flex flex-row items-center gap-2">
@@ -73,57 +127,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import ProgressBar from 'primevue/progressbar'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useDownload } from '@/composables/useDownload'
-import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
-import { formatSize } from '@/utils/formatUtil'
-
-const props = defineProps<{
-  url: string
-  hint?: string
-  label?: string
-  error?: string
-}>()
-
-const { t } = useI18n()
-const label = computed(() => props.label || props.url.split('/').pop())
-const hint = computed(() => props.hint || props.url)
-const download = useDownload(props.url)
-const downloadProgress = ref<number>(0)
-const status = ref<string | null>(null)
-const fileSize = computed(() =>
-  download.fileSize.value ? formatSize(download.fileSize.value) : '?'
-)
-const electronDownloadStore = useElectronDownloadStore()
-// @ts-expect-error fixme ts strict error
-const [savePath, filename] = props.label.split('/')
-
-electronDownloadStore.$subscribe((_, { downloads }) => {
-  const download = downloads.find((download) => props.url === download.url)
-
-  if (download) {
-    // @ts-expect-error fixme ts strict error
-    downloadProgress.value = Number((download.progress * 100).toFixed(1))
-    // @ts-expect-error fixme ts strict error
-    status.value = download.status
-  }
-})
-
-const triggerDownload = async () => {
-  await electronDownloadStore.start({
-    url: props.url,
-    savePath: savePath.trim(),
-    filename: filename.trim()
-  })
-}
-
-const triggerCancelDownload = () => electronDownloadStore.cancel(props.url)
-const triggerPauseDownload = () => electronDownloadStore.pause(props.url)
-const triggerResumeDownload = () => electronDownloadStore.resume(props.url)
-</script>
diff --git a/src/components/common/ExtensionSlot.vue b/src/components/common/ExtensionSlot.vue
index 6819e494e7..f04be5070b 100644
--- a/src/components/common/ExtensionSlot.vue
+++ b/src/components/common/ExtensionSlot.vue
@@ -1,19 +1,3 @@
-<template>
-  <component :is="extension.component" v-if="extension.type === 'vue'" />
-  <div
-    v-else
-    :ref="
-      (el) => {
-        if (el)
-          mountCustomExtension(
-            props.extension as CustomExtension,
-            el as HTMLElement
-          )
-      }
-    "
-  />
-</template>
-
 <script setup lang="ts">
 import { onBeforeUnmount } from 'vue'
 
@@ -33,3 +17,19 @@ onBeforeUnmount(() => {
   }
 })
 </script>
+
+<template>
+  <component :is="extension.component" v-if="extension.type === 'vue'" />
+  <div
+    v-else
+    :ref="
+      (el) => {
+        if (el)
+          mountCustomExtension(
+            props.extension as CustomExtension,
+            el as HTMLElement
+          )
+      }
+    "
+  />
+</template>
diff --git a/src/components/common/FileDownload.vue b/src/components/common/FileDownload.vue
index f54c2dc8ee..9536c365b3 100644
--- a/src/components/common/FileDownload.vue
+++ b/src/components/common/FileDownload.vue
@@ -1,4 +1,34 @@
 <!-- A file download button with a label and a size hint -->
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+import { computed } from 'vue'
+
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useDownload } from '@/composables/useDownload'
+import { formatSize } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  url: string
+  hint?: string
+  label?: string
+  error?: string
+}>()
+
+const label = computed(() => props.label || props.url.split('/').pop())
+
+const hint = computed(() => props.hint || props.url)
+const download = useDownload(props.url)
+const fileSize = computed(() =>
+  download.fileSize.value ? formatSize(download.fileSize.value) : '?'
+)
+const copyURL = async () => {
+  await copyToClipboard(props.url)
+}
+
+const { copyToClipboard } = useCopyToClipboard()
+</script>
+
 <template>
   <div class="flex flex-row items-center gap-2">
     <div>
@@ -41,33 +71,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Message from 'primevue/message'
-import { computed } from 'vue'
-
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import { useDownload } from '@/composables/useDownload'
-import { formatSize } from '@/utils/formatUtil'
-
-const props = defineProps<{
-  url: string
-  hint?: string
-  label?: string
-  error?: string
-}>()
-
-const label = computed(() => props.label || props.url.split('/').pop())
-
-const hint = computed(() => props.hint || props.url)
-const download = useDownload(props.url)
-const fileSize = computed(() =>
-  download.fileSize.value ? formatSize(download.fileSize.value) : '?'
-)
-const copyURL = async () => {
-  await copyToClipboard(props.url)
-}
-
-const { copyToClipboard } = useCopyToClipboard()
-</script>
diff --git a/src/components/common/FormColorPicker.vue b/src/components/common/FormColorPicker.vue
index a5cd319a32..afc04adf38 100644
--- a/src/components/common/FormColorPicker.vue
+++ b/src/components/common/FormColorPicker.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="color-picker-wrapper flex items-center gap-2">
-    <ColorPicker v-model="modelValue" v-bind="$attrs" />
-    <InputText v-model="modelValue" class="w-28" :placeholder="label" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import ColorPicker from 'primevue/colorpicker'
 import InputText from 'primevue/inputtext'
@@ -19,3 +12,10 @@ defineOptions({
   inheritAttrs: false
 })
 </script>
+
+<template>
+  <div class="color-picker-wrapper flex items-center gap-2">
+    <ColorPicker v-model="modelValue" v-bind="$attrs" />
+    <InputText v-model="modelValue" class="w-28" :placeholder="label" />
+  </div>
+</template>
diff --git a/src/components/common/FormImageUpload.vue b/src/components/common/FormImageUpload.vue
index efb09c9008..0fae2c1299 100644
--- a/src/components/common/FormImageUpload.vue
+++ b/src/components/common/FormImageUpload.vue
@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { ref } from 'vue'
+
+defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+
+const triggerFileInput = () => {
+  fileInput.value?.click()
+}
+
+const handleFileUpload = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files[0]) {
+    const file = target.files[0]
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      emit('update:modelValue', e.target?.result as string)
+    }
+    reader.readAsDataURL(file)
+  }
+}
+
+const clearImage = () => {
+  emit('update:modelValue', '')
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+</script>
+
 <template>
   <div class="image-upload-wrapper">
     <div class="flex gap-2 items-center">
@@ -40,41 +78,3 @@
     />
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { ref } from 'vue'
-
-defineProps<{
-  modelValue: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
-const fileInput = ref<HTMLInputElement | null>(null)
-
-const triggerFileInput = () => {
-  fileInput.value?.click()
-}
-
-const handleFileUpload = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  if (target.files && target.files[0]) {
-    const file = target.files[0]
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      emit('update:modelValue', e.target?.result as string)
-    }
-    reader.readAsDataURL(file)
-  }
-}
-
-const clearImage = () => {
-  emit('update:modelValue', '')
-  if (fileInput.value) {
-    fileInput.value.value = ''
-  }
-}
-</script>
diff --git a/src/components/common/FormItem.vue b/src/components/common/FormItem.vue
index d1b4229647..6a0a2175c2 100644
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -1,34 +1,4 @@
 <!-- A generalized form item for rendering in a form. -->
-<template>
-  <div class="flex flex-row items-center gap-2">
-    <div class="form-label flex grow items-center">
-      <span
-        :id="`${props.id}-label`"
-        class="text-muted"
-        :class="props.labelClass"
-      >
-        <slot name="name-prefix" />
-        {{ props.item.name }}
-        <i
-          v-if="props.item.tooltip"
-          v-tooltip="props.item.tooltip"
-          class="pi pi-info-circle bg-transparent"
-        />
-        <slot name="name-suffix" />
-      </span>
-    </div>
-    <div class="form-input flex justify-end">
-      <component
-        :is="markRaw(getFormComponent(props.item))"
-        :id="props.id"
-        v-model:model-value="formValue"
-        :aria-labelledby="`${props.id}-label`"
-        v-bind="getFormAttrs(props.item)"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import InputNumber from 'primevue/inputnumber'
 import InputText from 'primevue/inputtext'
@@ -115,6 +85,36 @@ function getFormComponent(item: FormItem): Component {
 }
 </script>
 
+<template>
+  <div class="flex flex-row items-center gap-2">
+    <div class="form-label flex grow items-center">
+      <span
+        :id="`${props.id}-label`"
+        class="text-muted"
+        :class="props.labelClass"
+      >
+        <slot name="name-prefix" />
+        {{ props.item.name }}
+        <i
+          v-if="props.item.tooltip"
+          v-tooltip="props.item.tooltip"
+          class="pi pi-info-circle bg-transparent"
+        />
+        <slot name="name-suffix" />
+      </span>
+    </div>
+    <div class="form-input flex justify-end">
+      <component
+        :is="markRaw(getFormComponent(props.item))"
+        :id="props.id"
+        v-model:model-value="formValue"
+        :aria-labelledby="`${props.id}-label`"
+        v-bind="getFormAttrs(props.item)"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/common/FormRadioGroup.vue b/src/components/common/FormRadioGroup.vue
index 19889132b7..adc8e92c64 100644
--- a/src/components/common/FormRadioGroup.vue
+++ b/src/components/common/FormRadioGroup.vue
@@ -1,25 +1,3 @@
-<template>
-  <div class="flex flex-row gap-4">
-    <div
-      v-for="option in normalizedOptions"
-      :key="option.value"
-      class="flex items-center"
-    >
-      <RadioButton
-        :input-id="`${id}-${option.value}`"
-        :name="id"
-        :value="option.value"
-        :model-value="modelValue"
-        :aria-describedby="`${option.text}-label`"
-        @update:model-value="$emit('update:modelValue', $event)"
-      />
-      <label :for="`${id}-${option.value}`" class="ml-2 cursor-pointer">
-        {{ option.text }}
-      </label>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import RadioButton from 'primevue/radiobutton'
 import { computed } from 'vue'
@@ -60,3 +38,25 @@ const normalizedOptions = computed<SettingOption[]>(() => {
   })
 })
 </script>
+
+<template>
+  <div class="flex flex-row gap-4">
+    <div
+      v-for="option in normalizedOptions"
+      :key="option.value"
+      class="flex items-center"
+    >
+      <RadioButton
+        :input-id="`${id}-${option.value}`"
+        :name="id"
+        :value="option.value"
+        :model-value="modelValue"
+        :aria-describedby="`${option.text}-label`"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+      <label :for="`${id}-${option.value}`" class="ml-2 cursor-pointer">
+        {{ option.text }}
+      </label>
+    </div>
+  </div>
+</template>
diff --git a/src/components/common/InputKnob.vue b/src/components/common/InputKnob.vue
index 1d67449dab..35c744092b 100644
--- a/src/components/common/InputKnob.vue
+++ b/src/components/common/InputKnob.vue
@@ -1,30 +1,3 @@
-<template>
-  <div class="input-knob flex flex-row items-center gap-2">
-    <Knob
-      :model-value="modelValue"
-      :value-template="displayValue"
-      class="knob-part"
-      :class="knobClass"
-      :min="min"
-      :max="max"
-      :step="step"
-      v-bind="$attrs"
-      @update:model-value="updateValue"
-    />
-    <InputNumber
-      :model-value="modelValue"
-      class="input-part"
-      :max-fraction-digits="3"
-      :class="inputClass"
-      :min="min"
-      :max="max"
-      :step="step"
-      :allow-empty="false"
-      @update:model-value="updateValue"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import InputNumber from 'primevue/inputnumber'
 import Knob from 'primevue/knob'
@@ -87,3 +60,30 @@ defineOptions({
   inheritAttrs: false
 })
 </script>
+
+<template>
+  <div class="input-knob flex flex-row items-center gap-2">
+    <Knob
+      :model-value="modelValue"
+      :value-template="displayValue"
+      class="knob-part"
+      :class="knobClass"
+      :min="min"
+      :max="max"
+      :step="step"
+      v-bind="$attrs"
+      @update:model-value="updateValue"
+    />
+    <InputNumber
+      :model-value="modelValue"
+      class="input-part"
+      :max-fraction-digits="3"
+      :class="inputClass"
+      :min="min"
+      :max="max"
+      :step="step"
+      :allow-empty="false"
+      @update:model-value="updateValue"
+    />
+  </div>
+</template>
diff --git a/src/components/common/InputSlider.vue b/src/components/common/InputSlider.vue
index 8d04f1fc9c..0b344f5c33 100644
--- a/src/components/common/InputSlider.vue
+++ b/src/components/common/InputSlider.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="input-slider flex flex-row items-center gap-2">
-    <Slider
-      :model-value="modelValue"
-      class="slider-part"
-      :class="sliderClass"
-      :min="min"
-      :max="max"
-      :step="step"
-      v-bind="$attrs"
-      @update:model-value="(value) => updateValue(value as number)"
-    />
-    <InputNumber
-      :model-value="modelValue"
-      class="input-part"
-      :max-fraction-digits="3"
-      :class="inputClass"
-      :min="min"
-      :max="max"
-      :step="step"
-      :allow-empty="false"
-      @update:model-value="updateValue"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import InputNumber from 'primevue/inputnumber'
 import Slider from 'primevue/slider'
@@ -76,3 +50,29 @@ defineOptions({
   inheritAttrs: false
 })
 </script>
+
+<template>
+  <div class="input-slider flex flex-row items-center gap-2">
+    <Slider
+      :model-value="modelValue"
+      class="slider-part"
+      :class="sliderClass"
+      :min="min"
+      :max="max"
+      :step="step"
+      v-bind="$attrs"
+      @update:model-value="(value) => updateValue(value as number)"
+    />
+    <InputNumber
+      :model-value="modelValue"
+      class="input-part"
+      :max-fraction-digits="3"
+      :class="inputClass"
+      :min="min"
+      :max="max"
+      :step="step"
+      :allow-empty="false"
+      @update:model-value="updateValue"
+    />
+  </div>
+</template>
diff --git a/src/components/common/LazyImage.vue b/src/components/common/LazyImage.vue
index 36aaa8a2b4..c0bcf70521 100644
--- a/src/components/common/LazyImage.vue
+++ b/src/components/common/LazyImage.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    ref="containerRef"
-    class="relative overflow-hidden w-full h-full flex items-center justify-center"
-  >
-    <Skeleton
-      v-if="!isImageLoaded"
-      width="100%"
-      height="100%"
-      class="absolute inset-0"
-    />
-    <img
-      v-if="cachedSrc"
-      ref="imageRef"
-      :src="cachedSrc"
-      :alt="alt"
-      draggable="false"
-      :class="imageClass"
-      :style="imageStyle"
-      @load="onImageLoad"
-      @error="onImageError"
-    />
-    <div
-      v-if="hasError"
-      class="absolute inset-0 flex items-center justify-center bg-surface-50 dark-theme:bg-surface-800 text-muted"
-    >
-      <i class="pi pi-image text-2xl" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Skeleton from 'primevue/skeleton'
 import { computed, onUnmounted, ref, watch } from 'vue'
@@ -122,3 +91,34 @@ onUnmounted(() => {
   }
 })
 </script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="relative overflow-hidden w-full h-full flex items-center justify-center"
+  >
+    <Skeleton
+      v-if="!isImageLoaded"
+      width="100%"
+      height="100%"
+      class="absolute inset-0"
+    />
+    <img
+      v-if="cachedSrc"
+      ref="imageRef"
+      :src="cachedSrc"
+      :alt="alt"
+      draggable="false"
+      :class="imageClass"
+      :style="imageStyle"
+      @load="onImageLoad"
+      @error="onImageError"
+    />
+    <div
+      v-if="hasError"
+      class="absolute inset-0 flex items-center justify-center bg-surface-50 dark-theme:bg-surface-800 text-muted"
+    >
+      <i class="pi pi-image text-2xl" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/common/NoResultsPlaceholder.vue b/src/components/common/NoResultsPlaceholder.vue
index fbf8ca83d6..50412ce223 100644
--- a/src/components/common/NoResultsPlaceholder.vue
+++ b/src/components/common/NoResultsPlaceholder.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Card from 'primevue/card'
+
+const props = defineProps<{
+  class?: string
+  icon?: string
+  title: string
+  message: string
+  textClass?: string
+  buttonLabel?: string
+}>()
+
+defineEmits(['action'])
+</script>
+
 <template>
   <div class="no-results-placeholder p-8 h-full" :class="props.class">
     <Card>
@@ -20,22 +36,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-
-const props = defineProps<{
-  class?: string
-  icon?: string
-  title: string
-  message: string
-  textClass?: string
-  buttonLabel?: string
-}>()
-
-defineEmits(['action'])
-</script>
-
 <style scoped>
 .no-results-placeholder :deep(.p-card) {
   background-color: var(--surface-ground);
diff --git a/src/components/common/RefreshButton.vue b/src/components/common/RefreshButton.vue
index 2569d0fbd0..6a031a03ea 100644
--- a/src/components/common/RefreshButton.vue
+++ b/src/components/common/RefreshButton.vue
@@ -10,24 +10,6 @@
     />
   ```
 -->
-<template>
-  <Button
-    class="relative p-button-icon-only"
-    :outlined="outlined"
-    :severity="severity"
-    :disabled="active || disabled"
-    @click="(event) => $emit('refresh', event)"
-  >
-    <span
-      class="p-button-icon pi pi-refresh transition-all"
-      :class="{ 'opacity-0': active }"
-      data-pc-section="icon"
-    />
-    <span class="p-button-label" data-pc-section="label">&nbsp;</span>
-    <ProgressSpinner v-show="active" class="absolute w-1/2 h-1/2" />
-  </Button>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -50,3 +32,21 @@ const active = defineModel<boolean>({ required: true })
 // Emits
 defineEmits(['refresh'])
 </script>
+
+<template>
+  <Button
+    class="relative p-button-icon-only"
+    :outlined="outlined"
+    :severity="severity"
+    :disabled="active || disabled"
+    @click="(event) => $emit('refresh', event)"
+  >
+    <span
+      class="p-button-icon pi pi-refresh transition-all"
+      :class="{ 'opacity-0': active }"
+      data-pc-section="icon"
+    />
+    <span class="p-button-label" data-pc-section="label">&nbsp;</span>
+    <ProgressSpinner v-show="active" class="absolute w-1/2 h-1/2" />
+  </Button>
+</template>
diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index 605af4d4aa..3243ddabde 100644
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -1,46 +1,3 @@
-<template>
-  <div>
-    <IconField>
-      <Button
-        v-if="filterIcon"
-        class="p-inputicon filter-button"
-        :icon="filterIcon"
-        text
-        severity="contrast"
-        @click="$emit('showFilter', $event)"
-      />
-      <InputText
-        class="search-box-input w-full"
-        :model-value="modelValue"
-        :placeholder="placeholder"
-        @input="handleInput"
-      />
-      <InputIcon v-if="!modelValue" :class="icon" />
-      <Button
-        v-if="modelValue"
-        class="p-inputicon clear-button"
-        icon="pi pi-times"
-        text
-        severity="contrast"
-        @click="clearSearch"
-      />
-    </IconField>
-    <div
-      v-if="filters?.length"
-      class="search-filters pt-2 flex flex-wrap gap-2"
-    >
-      <SearchFilterChip
-        v-for="filter in filters"
-        :key="filter.id"
-        :text="filter.text"
-        :badge="filter.badge"
-        :badge-class="filter.badgeClass"
-        @remove="$emit('removeFilter', filter)"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts" generic="TFilter extends SearchFilter">
 import { debounce } from 'es-toolkit/compat'
 import Button from 'primevue/button'
@@ -90,6 +47,49 @@ const clearSearch = () => {
 }
 </script>
 
+<template>
+  <div>
+    <IconField>
+      <Button
+        v-if="filterIcon"
+        class="p-inputicon filter-button"
+        :icon="filterIcon"
+        text
+        severity="contrast"
+        @click="$emit('showFilter', $event)"
+      />
+      <InputText
+        class="search-box-input w-full"
+        :model-value="modelValue"
+        :placeholder="placeholder"
+        @input="handleInput"
+      />
+      <InputIcon v-if="!modelValue" :class="icon" />
+      <Button
+        v-if="modelValue"
+        class="p-inputicon clear-button"
+        icon="pi pi-times"
+        text
+        severity="contrast"
+        @click="clearSearch"
+      />
+    </IconField>
+    <div
+      v-if="filters?.length"
+      class="search-filters pt-2 flex flex-wrap gap-2"
+    >
+      <SearchFilterChip
+        v-for="filter in filters"
+        :key="filter.id"
+        :text="filter.text"
+        :badge="filter.badge"
+        :badge-class="filter.badgeClass"
+        @remove="$emit('removeFilter', filter)"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/common/SearchFilterChip.vue b/src/components/common/SearchFilterChip.vue
index d4cd7704b1..f58f26a84e 100644
--- a/src/components/common/SearchFilterChip.vue
+++ b/src/components/common/SearchFilterChip.vue
@@ -1,12 +1,3 @@
-<template>
-  <Chip removable @remove="$emit('remove', $event)">
-    <Badge size="small" :class="badgeClass">
-      {{ badge }}
-    </Badge>
-    {{ text }}
-  </Chip>
-</template>
-
 <script setup lang="ts">
 import Badge from 'primevue/badge'
 import Chip from 'primevue/chip'
@@ -22,6 +13,15 @@ defineProps<Omit<SearchFilter, 'id'>>()
 defineEmits(['remove'])
 </script>
 
+<template>
+  <Chip removable @remove="$emit('remove', $event)">
+    <Badge size="small" :class="badgeClass">
+      {{ badge }}
+    </Badge>
+    {{ text }}
+  </Chip>
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/common/SystemStatsPanel.vue b/src/components/common/SystemStatsPanel.vue
index 546d2b887b..8d16f9558a 100644
--- a/src/components/common/SystemStatsPanel.vue
+++ b/src/components/common/SystemStatsPanel.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="system-stats">
-    <div class="mb-6">
-      <h2 class="text-2xl font-semibold mb-4">
-        {{ $t('g.systemInfo') }}
-      </h2>
-      <div class="grid grid-cols-2 gap-2">
-        <template v-for="col in systemColumns" :key="col.field">
-          <div class="font-medium">
-            {{ col.header }}
-          </div>
-          <div>{{ formatValue(systemInfo[col.field], col.field) }}</div>
-        </template>
-      </div>
-    </div>
-
-    <Divider />
-
-    <div>
-      <h2 class="text-2xl font-semibold mb-4">
-        {{ $t('g.devices') }}
-      </h2>
-      <TabView v-if="props.stats.devices.length > 1">
-        <TabPanel
-          v-for="device in props.stats.devices"
-          :key="device.index"
-          :header="device.name"
-          :value="device.index"
-        >
-          <DeviceInfo :device="device" />
-        </TabPanel>
-      </TabView>
-      <DeviceInfo v-else :device="props.stats.devices[0]" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 import TabPanel from 'primevue/tabpanel'
@@ -72,3 +35,40 @@ const formatValue = (value: any, field: string) => {
   return value
 }
 </script>
+
+<template>
+  <div class="system-stats">
+    <div class="mb-6">
+      <h2 class="text-2xl font-semibold mb-4">
+        {{ $t('g.systemInfo') }}
+      </h2>
+      <div class="grid grid-cols-2 gap-2">
+        <template v-for="col in systemColumns" :key="col.field">
+          <div class="font-medium">
+            {{ col.header }}
+          </div>
+          <div>{{ formatValue(systemInfo[col.field], col.field) }}</div>
+        </template>
+      </div>
+    </div>
+
+    <Divider />
+
+    <div>
+      <h2 class="text-2xl font-semibold mb-4">
+        {{ $t('g.devices') }}
+      </h2>
+      <TabView v-if="props.stats.devices.length > 1">
+        <TabPanel
+          v-for="device in props.stats.devices"
+          :key="device.index"
+          :header="device.name"
+          :value="device.index"
+        >
+          <DeviceInfo :device="device" />
+        </TabPanel>
+      </TabView>
+      <DeviceInfo v-else :device="props.stats.devices[0]" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/common/TextDivider.vue b/src/components/common/TextDivider.vue
index d8ec59348d..68f28ab821 100644
--- a/src/components/common/TextDivider.vue
+++ b/src/components/common/TextDivider.vue
@@ -1,11 +1,3 @@
-<template>
-  <div class="flex items-center">
-    <span v-if="position === 'left'" class="mr-2 shrink-0">{{ text }}</span>
-    <Divider :align="align" :type="type" :layout="layout" class="grow" />
-    <span v-if="position === 'right'" class="ml-2 shrink-0">{{ text }}</span>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 
@@ -23,3 +15,11 @@ const {
   layout?: 'horizontal' | 'vertical'
 }>()
 </script>
+
+<template>
+  <div class="flex items-center">
+    <span v-if="position === 'left'" class="mr-2 shrink-0">{{ text }}</span>
+    <Divider :align="align" :type="type" :layout="layout" class="grow" />
+    <span v-if="position === 'right'" class="ml-2 shrink-0">{{ text }}</span>
+  </div>
+</template>
diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index ac841d31fb..1739059252 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -1,40 +1,3 @@
-<template>
-  <Tree
-    v-model:expanded-keys="expandedKeys"
-    v-model:selection-keys="selectionKeys"
-    class="tree-explorer py-0 px-2 2xl:px-4"
-    :class="props.class"
-    :value="renderedRoot.children"
-    selection-mode="single"
-    :pt="{
-      nodeLabel: 'tree-explorer-node-label',
-      nodeContent: ({ context }) => ({
-        class: 'group/tree-node',
-        onClick: (e: MouseEvent) =>
-          onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
-        onContextmenu: (e: MouseEvent) =>
-          handleContextMenu(e, context.node as RenderedTreeExplorerNode)
-      }),
-      nodeToggleButton: () => ({
-        onClick: (e: MouseEvent) => {
-          e.stopImmediatePropagation()
-        }
-      })
-    }"
-  >
-    <template #folder="{ node }">
-      <slot name="folder" :node="node">
-        <TreeExplorerTreeNode :node="node" />
-      </slot>
-    </template>
-    <template #node="{ node }">
-      <slot name="node" :node="node">
-        <TreeExplorerTreeNode :node="node" />
-      </slot>
-    </template>
-  </Tree>
-  <ContextMenu ref="menu" :model="menuItems" />
-</template>
 <script setup lang="ts">
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
@@ -241,6 +204,43 @@ defineExpose({
   }
 })
 </script>
+<template>
+  <Tree
+    v-model:expanded-keys="expandedKeys"
+    v-model:selection-keys="selectionKeys"
+    class="tree-explorer py-0 px-2 2xl:px-4"
+    :class="props.class"
+    :value="renderedRoot.children"
+    selection-mode="single"
+    :pt="{
+      nodeLabel: 'tree-explorer-node-label',
+      nodeContent: ({ context }) => ({
+        class: 'group/tree-node',
+        onClick: (e: MouseEvent) =>
+          onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
+        onContextmenu: (e: MouseEvent) =>
+          handleContextMenu(e, context.node as RenderedTreeExplorerNode)
+      }),
+      nodeToggleButton: () => ({
+        onClick: (e: MouseEvent) => {
+          e.stopImmediatePropagation()
+        }
+      })
+    }"
+  >
+    <template #folder="{ node }">
+      <slot name="folder" :node="node">
+        <TreeExplorerTreeNode :node="node" />
+      </slot>
+    </template>
+    <template #node="{ node }">
+      <slot name="node" :node="node">
+        <TreeExplorerTreeNode :node="node" />
+      </slot>
+    </template>
+  </Tree>
+  <ContextMenu ref="menu" :model="menuItems" />
+</template>
 
 <style scoped>
 :deep(.tree-explorer-node-label) {
diff --git a/src/components/common/TreeExplorerTreeNode.vue b/src/components/common/TreeExplorerTreeNode.vue
index 5adb96cd17..fd658fac3d 100644
--- a/src/components/common/TreeExplorerTreeNode.vue
+++ b/src/components/common/TreeExplorerTreeNode.vue
@@ -1,40 +1,3 @@
-<template>
-  <div
-    ref="container"
-    :class="[
-      'tree-node',
-      {
-        'can-drop': canDrop,
-        'tree-folder': !props.node.leaf,
-        'tree-leaf': props.node.leaf
-      }
-    ]"
-  >
-    <div class="node-content">
-      <span class="node-label">
-        <slot name="before-label" :node="props.node" />
-        <EditableText
-          :model-value="node.label"
-          :is-editing="isEditing"
-          @edit="handleRename"
-        />
-        <slot name="after-label" :node="props.node" />
-      </span>
-      <Badge
-        v-if="showNodeBadgeText"
-        :value="nodeBadgeText"
-        severity="secondary"
-        class="leaf-count-badge"
-      />
-    </div>
-    <div
-      class="node-actions motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
-    >
-      <slot name="actions" :node="props.node" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
 import Badge from 'primevue/badge'
@@ -134,6 +97,43 @@ if (props.node.droppable) {
 }
 </script>
 
+<template>
+  <div
+    ref="container"
+    :class="[
+      'tree-node',
+      {
+        'can-drop': canDrop,
+        'tree-folder': !props.node.leaf,
+        'tree-leaf': props.node.leaf
+      }
+    ]"
+  >
+    <div class="node-content">
+      <span class="node-label">
+        <slot name="before-label" :node="props.node" />
+        <EditableText
+          :model-value="node.label"
+          :is-editing="isEditing"
+          @edit="handleRename"
+        />
+        <slot name="after-label" :node="props.node" />
+      </span>
+      <Badge
+        v-if="showNodeBadgeText"
+        :value="nodeBadgeText"
+        severity="secondary"
+        class="leaf-count-badge"
+      />
+    </div>
+    <div
+      class="node-actions motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
+    >
+      <slot name="actions" :node="props.node" />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .tree-node {
   width: 100%;
diff --git a/src/components/common/UrlInput.vue b/src/components/common/UrlInput.vue
index 9e400ae93a..53dd96412e 100644
--- a/src/components/common/UrlInput.vue
+++ b/src/components/common/UrlInput.vue
@@ -1,27 +1,3 @@
-<template>
-  <IconField class="w-full">
-    <InputText
-      v-bind="$attrs"
-      :model-value="internalValue"
-      class="w-full"
-      :invalid="validationState === ValidationState.INVALID"
-      @update:model-value="handleInput"
-      @blur="handleBlur"
-    />
-    <InputIcon
-      :class="{
-        'pi pi-spin pi-spinner text-neutral-400':
-          validationState === ValidationState.LOADING,
-        'pi pi-check text-green-500 cursor-pointer':
-          validationState === ValidationState.VALID,
-        'pi pi-times text-red-500 cursor-pointer':
-          validationState === ValidationState.INVALID
-      }"
-      @click="validateUrl(props.modelValue)"
-    />
-  </IconField>
-</template>
-
 <script setup lang="ts">
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
@@ -127,3 +103,27 @@ defineOptions({
   inheritAttrs: false
 })
 </script>
+
+<template>
+  <IconField class="w-full">
+    <InputText
+      v-bind="$attrs"
+      :model-value="internalValue"
+      class="w-full"
+      :invalid="validationState === ValidationState.INVALID"
+      @update:model-value="handleInput"
+      @blur="handleBlur"
+    />
+    <InputIcon
+      :class="{
+        'pi pi-spin pi-spinner text-neutral-400':
+          validationState === ValidationState.LOADING,
+        'pi pi-check text-green-500 cursor-pointer':
+          validationState === ValidationState.VALID,
+        'pi pi-times text-red-500 cursor-pointer':
+          validationState === ValidationState.INVALID
+      }"
+      @click="validateUrl(props.modelValue)"
+    />
+  </IconField>
+</template>
diff --git a/src/components/common/UserAvatar.vue b/src/components/common/UserAvatar.vue
index 8fce43d105..35fa5ad01d 100644
--- a/src/components/common/UserAvatar.vue
+++ b/src/components/common/UserAvatar.vue
@@ -1,13 +1,3 @@
-<template>
-  <Avatar
-    :image="photoUrl ?? undefined"
-    :icon="hasAvatar ? undefined : 'pi pi-user'"
-    shape="circle"
-    :aria-label="ariaLabel ?? $t('auth.login.userAvatar')"
-    @error="handleImageError"
-  />
-</template>
-
 <script setup lang="ts">
 import Avatar from 'primevue/avatar'
 import { computed, ref } from 'vue'
@@ -23,3 +13,13 @@ const handleImageError = () => {
 }
 const hasAvatar = computed(() => photoUrl && !imageError.value)
 </script>
+
+<template>
+  <Avatar
+    :image="photoUrl ?? undefined"
+    :icon="hasAvatar ? undefined : 'pi pi-user'"
+    shape="circle"
+    :aria-label="ariaLabel ?? $t('auth.login.userAvatar')"
+    @error="handleImageError"
+  />
+</template>
diff --git a/src/components/common/UserCredit.vue b/src/components/common/UserCredit.vue
index e1abb7598b..476c80bd88 100644
--- a/src/components/common/UserCredit.vue
+++ b/src/components/common/UserCredit.vue
@@ -1,22 +1,3 @@
-<template>
-  <div v-if="balanceLoading" class="flex items-center gap-1">
-    <div class="flex items-center gap-2">
-      <Skeleton shape="circle" width="1.5rem" height="1.5rem" />
-    </div>
-    <div class="flex-1"></div>
-    <Skeleton width="8rem" height="2rem" />
-  </div>
-  <div v-else class="flex items-center gap-1">
-    <Tag
-      severity="secondary"
-      icon="pi pi-dollar"
-      rounded
-      class="text-amber-400 p-1"
-    />
-    <div :class="textClass">{{ formattedBalance }}</div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Skeleton from 'primevue/skeleton'
 import Tag from 'primevue/tag'
@@ -37,3 +18,22 @@ const formattedBalance = computed(() => {
   return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
 })
 </script>
+
+<template>
+  <div v-if="balanceLoading" class="flex items-center gap-1">
+    <div class="flex items-center gap-2">
+      <Skeleton shape="circle" width="1.5rem" height="1.5rem" />
+    </div>
+    <div class="flex-1"></div>
+    <Skeleton width="8rem" height="2rem" />
+  </div>
+  <div v-else class="flex items-center gap-1">
+    <Tag
+      severity="secondary"
+      icon="pi pi-dollar"
+      rounded
+      class="text-amber-400 p-1"
+    />
+    <div :class="textClass">{{ formattedBalance }}</div>
+  </div>
+</template>
diff --git a/src/components/common/VirtualGrid.vue b/src/components/common/VirtualGrid.vue
index 1c9be98d1e..575e94def4 100644
--- a/src/components/common/VirtualGrid.vue
+++ b/src/components/common/VirtualGrid.vue
@@ -1,19 +1,3 @@
-<template>
-  <div ref="container" class="scroll-container">
-    <div :style="{ height: `${(state.start / cols) * itemHeight}px` }" />
-    <div :style="gridStyle">
-      <div v-for="item in renderedItems" :key="item.key" data-virtual-grid-item>
-        <slot name="item" :item="item" />
-      </div>
-    </div>
-    <div
-      :style="{
-        height: `${((items.length - state.end) / cols) * itemHeight}px`
-      }"
-    />
-  </div>
-</template>
-
 <script setup lang="ts" generic="T">
 import { useElementSize, useScroll, whenever } from '@vueuse/core'
 import { clamp, debounce } from 'es-toolkit/compat'
@@ -112,6 +96,22 @@ onBeforeUnmount(() => {
 })
 </script>
 
+<template>
+  <div ref="container" class="scroll-container">
+    <div :style="{ height: `${(state.start / cols) * itemHeight}px` }" />
+    <div :style="gridStyle">
+      <div v-for="item in renderedItems" :key="item.key" data-virtual-grid-item>
+        <slot name="item" :item="item" />
+      </div>
+    </div>
+    <div
+      :style="{
+        height: `${((items.length - state.end) / cols) * itemHeight}px`
+      }"
+    />
+  </div>
+</template>
+
 <style scoped>
 .scroll-container {
   height: 100%;
diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index 4566b06842..a9c5a094ed 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -1,4 +1,12 @@
 <!-- The main global dialog to show various things -->
+<script setup lang="ts">
+import Dialog from 'primevue/dialog'
+
+import { useDialogStore } from '@/stores/dialogStore'
+
+const dialogStore = useDialogStore()
+</script>
+
 <template>
   <Dialog
     v-for="item in dialogStore.dialogStack"
@@ -34,14 +42,6 @@
   </Dialog>
 </template>
 
-<script setup lang="ts">
-import Dialog from 'primevue/dialog'
-
-import { useDialogStore } from '@/stores/dialogStore'
-
-const dialogStore = useDialogStore()
-</script>
-
 <style>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/dialog/UnloadWindowConfirmDialog.vue b/src/components/dialog/UnloadWindowConfirmDialog.vue
index 32ccedaa9a..6e472295bb 100644
--- a/src/components/dialog/UnloadWindowConfirmDialog.vue
+++ b/src/components/dialog/UnloadWindowConfirmDialog.vue
@@ -1,14 +1,3 @@
-<template>
-  <div>
-    <!--
-    UnloadWindowConfirmDialog: This component does not render
-    anything visible. It is used to confirm the user wants to
-    close the window, and if they do, it will call the
-    beforeunload event.
-    -->
-  </div>
-</template>
-
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted } from 'vue'
 
@@ -37,3 +26,14 @@ onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', handleBeforeUnload)
 })
 </script>
+
+<template>
+  <div>
+    <!--
+    UnloadWindowConfirmDialog: This component does not render
+    anything visible. It is used to confirm the user wants to
+    close the window, and if they do, it will call the
+    beforeunload event.
+    -->
+  </div>
+</template>
diff --git a/src/components/dialog/content/ApiNodesSignInContent.vue b/src/components/dialog/content/ApiNodesSignInContent.vue
index af6f4fff64..608ee3d029 100644
--- a/src/components/dialog/content/ApiNodesSignInContent.vue
+++ b/src/components/dialog/content/ApiNodesSignInContent.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const { apiNodeNames, onLogin, onCancel } = defineProps<{
+  apiNodeNames: string[]
+  onLogin?: () => void
+  onCancel?: () => void
+}>()
+
+const handleLearnMoreClick = () => {
+  window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
+}
+</script>
+
 <template>
   <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
     <div class="text-2xl font-medium mb-2">
@@ -24,20 +41,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const { apiNodeNames, onLogin, onCancel } = defineProps<{
-  apiNodeNames: string[]
-  onLogin?: () => void
-  onCancel?: () => void
-}>()
-
-const handleLearnMoreClick = () => {
-  window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
-}
-</script>
diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index 662d3af8d1..4ad2c03cbb 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
+import Message from 'primevue/message'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { ConfirmationDialogType } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const props = defineProps<{
+  message: string
+  type: ConfirmationDialogType
+  onConfirm: (value?: boolean) => void
+  itemList?: string[]
+  hint?: string
+}>()
+
+const { t } = useI18n()
+
+const onCancel = () => useDialogStore().closeDialog()
+
+const doNotAskAgain = ref(false)
+
+const onDeny = () => {
+  props.onConfirm(false)
+  useDialogStore().closeDialog()
+}
+
+const onConfirm = () => {
+  if (props.type === 'overwriteBlueprint' && doNotAskAgain.value)
+    void useSettingStore().set('Comfy.Workflow.WarnBlueprintOverwrite', false)
+  props.onConfirm(true)
+  useDialogStore().closeDialog()
+}
+</script>
+
 <template>
   <section class="prompt-dialog-content flex flex-col gap-6 m-2 mt-4">
     <span>{{ message }}</span>
@@ -87,44 +125,6 @@
   </section>
 </template>
 
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import Message from 'primevue/message'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import type { ConfirmationDialogType } from '@/services/dialogService'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const props = defineProps<{
-  message: string
-  type: ConfirmationDialogType
-  onConfirm: (value?: boolean) => void
-  itemList?: string[]
-  hint?: string
-}>()
-
-const { t } = useI18n()
-
-const onCancel = () => useDialogStore().closeDialog()
-
-const doNotAskAgain = ref(false)
-
-const onDeny = () => {
-  props.onConfirm(false)
-  useDialogStore().closeDialog()
-}
-
-const onConfirm = () => {
-  if (props.type === 'overwriteBlueprint' && doNotAskAgain.value)
-    void useSettingStore().set('Comfy.Workflow.WarnBlueprintOverwrite', false)
-  props.onConfirm(true)
-  useDialogStore().closeDialog()
-}
-</script>
-
 <style lang="css" scoped>
 .prompt-dialog-content {
   white-space: pre-wrap;
diff --git a/src/components/dialog/content/ErrorDialogContent.vue b/src/components/dialog/content/ErrorDialogContent.vue
index 5b732ebbc9..4d72bbd05e 100644
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -1,55 +1,3 @@
-<template>
-  <div class="comfy-error-report flex flex-col gap-4">
-    <NoResultsPlaceholder
-      class="pb-0"
-      icon="pi pi-exclamation-circle"
-      :title="title"
-      :message="error.exceptionMessage"
-      :text-class="'break-words max-w-[60vw]'"
-    />
-    <template v-if="error.extensionFile">
-      <span>{{ t('errorDialog.extensionFileHint') }}:</span>
-      <br />
-      <span class="font-bold">{{ error.extensionFile }}</span>
-    </template>
-
-    <div class="flex gap-2 justify-center">
-      <Button
-        v-show="!reportOpen"
-        text
-        :label="$t('g.showReport')"
-        @click="showReport"
-      />
-      <Button
-        v-show="!reportOpen"
-        text
-        :label="$t('issueReport.helpFix')"
-        @click="showContactSupport"
-      />
-    </div>
-    <template v-if="reportOpen">
-      <Divider />
-      <ScrollPanel class="w-full h-[400px] max-w-[80vw]">
-        <pre class="whitespace-pre-wrap break-words">{{ reportContent }}</pre>
-      </ScrollPanel>
-      <Divider />
-    </template>
-    <div class="flex gap-4 justify-end">
-      <FindIssueButton
-        :error-message="error.exceptionMessage"
-        :repo-owner="repoOwner"
-        :repo-name="repoName"
-      />
-      <Button
-        v-if="reportOpen"
-        :label="$t('g.copyToClipboard')"
-        icon="pi pi-copy"
-        @click="copyReportToClipboard"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
@@ -137,3 +85,55 @@ const copyReportToClipboard = async () => {
   await copyToClipboard(reportContent.value)
 }
 </script>
+
+<template>
+  <div class="comfy-error-report flex flex-col gap-4">
+    <NoResultsPlaceholder
+      class="pb-0"
+      icon="pi pi-exclamation-circle"
+      :title="title"
+      :message="error.exceptionMessage"
+      :text-class="'break-words max-w-[60vw]'"
+    />
+    <template v-if="error.extensionFile">
+      <span>{{ t('errorDialog.extensionFileHint') }}:</span>
+      <br />
+      <span class="font-bold">{{ error.extensionFile }}</span>
+    </template>
+
+    <div class="flex gap-2 justify-center">
+      <Button
+        v-show="!reportOpen"
+        text
+        :label="$t('g.showReport')"
+        @click="showReport"
+      />
+      <Button
+        v-show="!reportOpen"
+        text
+        :label="$t('issueReport.helpFix')"
+        @click="showContactSupport"
+      />
+    </div>
+    <template v-if="reportOpen">
+      <Divider />
+      <ScrollPanel class="w-full h-[400px] max-w-[80vw]">
+        <pre class="whitespace-pre-wrap break-words">{{ reportContent }}</pre>
+      </ScrollPanel>
+      <Divider />
+    </template>
+    <div class="flex gap-4 justify-end">
+      <FindIssueButton
+        :error-message="error.exceptionMessage"
+        :repo-owner="repoOwner"
+        :repo-name="repoName"
+      />
+      <Button
+        v-if="reportOpen"
+        :label="$t('g.copyToClipboard')"
+        icon="pi pi-copy"
+        @click="copyReportToClipboard"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue
index a89c94981e..1b5d05483d 100644
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -1,55 +1,3 @@
-<template>
-  <NoResultsPlaceholder
-    class="pb-0"
-    icon="pi pi-exclamation-circle"
-    :title="$t('loadWorkflowWarning.missingNodesTitle')"
-    :message="$t('loadWorkflowWarning.missingNodesDescription')"
-  />
-  <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
-  <ListBox
-    :options="uniqueNodes"
-    option-label="label"
-    scroll-height="100%"
-    class="comfy-missing-nodes"
-    :pt="{
-      list: { class: 'border-none' }
-    }"
-  >
-    <template #option="slotProps">
-      <div class="flex align-items-center">
-        <span class="node-type">{{ slotProps.option.label }}</span>
-        <span v-if="slotProps.option.hint" class="node-hint">{{
-          slotProps.option.hint
-        }}</span>
-        <Button
-          v-if="slotProps.option.action"
-          :label="slotProps.option.action.text"
-          size="small"
-          outlined
-          @click="slotProps.option.action.callback"
-        />
-      </div>
-    </template>
-  </ListBox>
-  <div v-if="showManagerButtons" class="flex justify-end py-3">
-    <PackInstallButton
-      v-if="showInstallAllButton"
-      size="md"
-      :disabled="
-        isLoading || !!error || missingNodePacks.length === 0 || isInstalling
-      "
-      :is-loading="isLoading"
-      :node-packs="missingNodePacks"
-      :label="
-        isLoading
-          ? $t('manager.gettingInfo')
-          : $t('manager.installAllMissingNodes')
-      "
-    />
-    <Button label="Open Manager" size="small" outlined @click="openManager" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
@@ -154,6 +102,58 @@ watch(allMissingNodesInstalled, async (allInstalled) => {
 })
 </script>
 
+<template>
+  <NoResultsPlaceholder
+    class="pb-0"
+    icon="pi pi-exclamation-circle"
+    :title="$t('loadWorkflowWarning.missingNodesTitle')"
+    :message="$t('loadWorkflowWarning.missingNodesDescription')"
+  />
+  <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
+  <ListBox
+    :options="uniqueNodes"
+    option-label="label"
+    scroll-height="100%"
+    class="comfy-missing-nodes"
+    :pt="{
+      list: { class: 'border-none' }
+    }"
+  >
+    <template #option="slotProps">
+      <div class="flex align-items-center">
+        <span class="node-type">{{ slotProps.option.label }}</span>
+        <span v-if="slotProps.option.hint" class="node-hint">{{
+          slotProps.option.hint
+        }}</span>
+        <Button
+          v-if="slotProps.option.action"
+          :label="slotProps.option.action.text"
+          size="small"
+          outlined
+          @click="slotProps.option.action.callback"
+        />
+      </div>
+    </template>
+  </ListBox>
+  <div v-if="showManagerButtons" class="flex justify-end py-3">
+    <PackInstallButton
+      v-if="showInstallAllButton"
+      size="md"
+      :disabled="
+        isLoading || !!error || missingNodePacks.length === 0 || isInstalling
+      "
+      :is-loading="isLoading"
+      :node-packs="missingNodePacks"
+      :label="
+        isLoading
+          ? $t('manager.gettingInfo')
+          : $t('manager.installAllMissingNodes')
+      "
+    />
+    <Button label="Open Manager" size="small" outlined @click="openManager" />
+  </div>
+</template>
+
 <style scoped>
 .comfy-missing-nodes {
   max-height: 300px;
diff --git a/src/components/dialog/content/MissingCoreNodesMessage.vue b/src/components/dialog/content/MissingCoreNodesMessage.vue
index 10030a9e93..e7f2081c6f 100644
--- a/src/components/dialog/content/MissingCoreNodesMessage.vue
+++ b/src/components/dialog/content/MissingCoreNodesMessage.vue
@@ -1,46 +1,3 @@
-<template>
-  <Message
-    v-if="hasMissingCoreNodes"
-    severity="info"
-    icon="pi pi-info-circle"
-    class="my-2 mx-2"
-    :pt="{
-      root: { class: 'flex-col' },
-      text: { class: 'flex-1' }
-    }"
-  >
-    <div class="flex flex-col gap-2">
-      <div>
-        {{
-          currentComfyUIVersion
-            ? $t('loadWorkflowWarning.outdatedVersion', {
-                version: currentComfyUIVersion
-              })
-            : $t('loadWorkflowWarning.outdatedVersionGeneric')
-        }}
-      </div>
-      <div
-        v-for="[version, nodes] in sortedMissingCoreNodes"
-        :key="version"
-        class="ml-4"
-      >
-        <div
-          class="text-sm font-medium text-surface-600 dark-theme:text-surface-400"
-        >
-          {{
-            $t('loadWorkflowWarning.coreNodesFromVersion', {
-              version: version || 'unknown'
-            })
-          }}
-        </div>
-        <div class="ml-4 text-sm text-surface-500 dark-theme:text-surface-500">
-          {{ getUniqueNodeNames(nodes).join(', ') }}
-        </div>
-      </div>
-    </div>
-  </Message>
-</template>
-
 <script setup lang="ts">
 import Message from 'primevue/message'
 import { compare } from 'semver'
@@ -83,3 +40,46 @@ const getUniqueNodeNames = (nodes: LGraphNode[]): string[] => {
     .sort()
 }
 </script>
+
+<template>
+  <Message
+    v-if="hasMissingCoreNodes"
+    severity="info"
+    icon="pi pi-info-circle"
+    class="my-2 mx-2"
+    :pt="{
+      root: { class: 'flex-col' },
+      text: { class: 'flex-1' }
+    }"
+  >
+    <div class="flex flex-col gap-2">
+      <div>
+        {{
+          currentComfyUIVersion
+            ? $t('loadWorkflowWarning.outdatedVersion', {
+                version: currentComfyUIVersion
+              })
+            : $t('loadWorkflowWarning.outdatedVersionGeneric')
+        }}
+      </div>
+      <div
+        v-for="[version, nodes] in sortedMissingCoreNodes"
+        :key="version"
+        class="ml-4"
+      >
+        <div
+          class="text-sm font-medium text-surface-600 dark-theme:text-surface-400"
+        >
+          {{
+            $t('loadWorkflowWarning.coreNodesFromVersion', {
+              version: version || 'unknown'
+            })
+          }}
+        </div>
+        <div class="ml-4 text-sm text-surface-500 dark-theme:text-surface-500">
+          {{ getUniqueNodeNames(nodes).join(', ') }}
+        </div>
+      </div>
+    </div>
+  </Message>
+</template>
diff --git a/src/components/dialog/content/MissingModelsWarning.vue b/src/components/dialog/content/MissingModelsWarning.vue
index dc67724d50..5f59e03578 100644
--- a/src/components/dialog/content/MissingModelsWarning.vue
+++ b/src/components/dialog/content/MissingModelsWarning.vue
@@ -1,35 +1,3 @@
-<template>
-  <NoResultsPlaceholder
-    class="pb-0"
-    icon="pi pi-exclamation-circle"
-    :title="t('missingModelsDialog.missingModels')"
-    :message="t('missingModelsDialog.missingModelsMessage')"
-  />
-  <div class="flex gap-1 mb-4">
-    <Checkbox v-model="doNotAskAgain" binary input-id="doNotAskAgain" />
-    <label for="doNotAskAgain">{{
-      t('missingModelsDialog.doNotAskAgain')
-    }}</label>
-  </div>
-  <ListBox :options="missingModels" class="comfy-missing-models">
-    <template #option="{ option }">
-      <Suspense v-if="isElectron()">
-        <ElectronFileDownload
-          :url="option.url"
-          :label="option.label"
-          :error="option.error"
-        />
-      </Suspense>
-      <FileDownload
-        v-else
-        :url="option.url"
-        :label="option.label"
-        :error="option.error"
-      />
-    </template>
-  </ListBox>
-</template>
-
 <script setup lang="ts">
 import Checkbox from 'primevue/checkbox'
 import ListBox from 'primevue/listbox'
@@ -140,6 +108,38 @@ onBeforeUnmount(async () => {
 })
 </script>
 
+<template>
+  <NoResultsPlaceholder
+    class="pb-0"
+    icon="pi pi-exclamation-circle"
+    :title="t('missingModelsDialog.missingModels')"
+    :message="t('missingModelsDialog.missingModelsMessage')"
+  />
+  <div class="flex gap-1 mb-4">
+    <Checkbox v-model="doNotAskAgain" binary input-id="doNotAskAgain" />
+    <label for="doNotAskAgain">{{
+      t('missingModelsDialog.doNotAskAgain')
+    }}</label>
+  </div>
+  <ListBox :options="missingModels" class="comfy-missing-models">
+    <template #option="{ option }">
+      <Suspense v-if="isElectron()">
+        <ElectronFileDownload
+          :url="option.url"
+          :label="option.label"
+          :error="option.error"
+        />
+      </Suspense>
+      <FileDownload
+        v-else
+        :url="option.url"
+        :label="option.label"
+        :error="option.error"
+      />
+    </template>
+  </ListBox>
+</template>
+
 <style scoped>
 .comfy-missing-models {
   max-height: 300px;
diff --git a/src/components/dialog/content/PromptDialogContent.vue b/src/components/dialog/content/PromptDialogContent.vue
index 14e70e8613..95673f0d40 100644
--- a/src/components/dialog/content/PromptDialogContent.vue
+++ b/src/components/dialog/content/PromptDialogContent.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="prompt-dialog-content flex flex-col gap-2 pt-8">
-    <FloatLabel>
-      <InputText
-        ref="inputRef"
-        v-model="inputValue"
-        autofocus
-        @keyup.enter="onConfirm"
-        @focus="selectAllText"
-      />
-      <label>{{ message }}</label>
-    </FloatLabel>
-    <Button @click="onConfirm">
-      {{ $t('g.confirm') }}
-    </Button>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import FloatLabel from 'primevue/floatlabel'
@@ -45,3 +27,21 @@ const selectAllText = () => {
   inputElement.setSelectionRange(0, inputElement.value.length)
 }
 </script>
+
+<template>
+  <div class="prompt-dialog-content flex flex-col gap-2 pt-8">
+    <FloatLabel>
+      <InputText
+        ref="inputRef"
+        v-model="inputValue"
+        autofocus
+        @keyup.enter="onConfirm"
+        @focus="selectAllText"
+      />
+      <label>{{ message }}</label>
+    </FloatLabel>
+    <Button @click="onConfirm">
+      {{ $t('g.confirm') }}
+    </Button>
+  </div>
+</template>
diff --git a/src/components/dialog/content/SignInContent.vue b/src/components/dialog/content/SignInContent.vue
index 3f3a47b7b7..e56675ab36 100644
--- a/src/components/dialog/content/SignInContent.vue
+++ b/src/components/dialog/content/SignInContent.vue
@@ -1,3 +1,68 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import Message from 'primevue/message'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
+import type { SignInData, SignUpData } from '@/schemas/signInSchema'
+import { isInChina } from '@/utils/networkUtil'
+
+import ApiKeyForm from './signin/ApiKeyForm.vue'
+import SignInForm from './signin/SignInForm.vue'
+import SignUpForm from './signin/SignUpForm.vue'
+
+const { onSuccess } = defineProps<{
+  onSuccess: () => void
+}>()
+
+const { t } = useI18n()
+const authActions = useFirebaseAuthActions()
+const isSecureContext = window.isSecureContext
+const isSignIn = ref(true)
+const showApiKeyForm = ref(false)
+
+const toggleState = () => {
+  isSignIn.value = !isSignIn.value
+  showApiKeyForm.value = false
+}
+
+const signInWithGoogle = async () => {
+  if (await authActions.signInWithGoogle()) {
+    onSuccess()
+  }
+}
+
+const signInWithGithub = async () => {
+  if (await authActions.signInWithGithub()) {
+    onSuccess()
+  }
+}
+
+const signInWithEmail = async (values: SignInData) => {
+  if (await authActions.signInWithEmail(values.email, values.password)) {
+    onSuccess()
+  }
+}
+
+const signUpWithEmail = async (values: SignUpData) => {
+  if (await authActions.signUpWithEmail(values.email, values.password)) {
+    onSuccess()
+  }
+}
+
+const userIsInChina = ref(false)
+onMounted(async () => {
+  userIsInChina.value = await isInChina()
+})
+
+onUnmounted(() => {
+  authActions.accessError.value = false
+})
+</script>
+
 <template>
   <div class="w-96 p-2 overflow-x-hidden">
     <ApiKeyForm
@@ -138,68 +203,3 @@
     </template>
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Divider from 'primevue/divider'
-import Message from 'primevue/message'
-import { onMounted, onUnmounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
-import type { SignInData, SignUpData } from '@/schemas/signInSchema'
-import { isInChina } from '@/utils/networkUtil'
-
-import ApiKeyForm from './signin/ApiKeyForm.vue'
-import SignInForm from './signin/SignInForm.vue'
-import SignUpForm from './signin/SignUpForm.vue'
-
-const { onSuccess } = defineProps<{
-  onSuccess: () => void
-}>()
-
-const { t } = useI18n()
-const authActions = useFirebaseAuthActions()
-const isSecureContext = window.isSecureContext
-const isSignIn = ref(true)
-const showApiKeyForm = ref(false)
-
-const toggleState = () => {
-  isSignIn.value = !isSignIn.value
-  showApiKeyForm.value = false
-}
-
-const signInWithGoogle = async () => {
-  if (await authActions.signInWithGoogle()) {
-    onSuccess()
-  }
-}
-
-const signInWithGithub = async () => {
-  if (await authActions.signInWithGithub()) {
-    onSuccess()
-  }
-}
-
-const signInWithEmail = async (values: SignInData) => {
-  if (await authActions.signInWithEmail(values.email, values.password)) {
-    onSuccess()
-  }
-}
-
-const signUpWithEmail = async (values: SignUpData) => {
-  if (await authActions.signUpWithEmail(values.email, values.password)) {
-    onSuccess()
-  }
-}
-
-const userIsInChina = ref(false)
-onMounted(async () => {
-  userIsInChina.value = await isInChina()
-})
-
-onUnmounted(() => {
-  authActions.accessError.value = false
-})
-</script>
diff --git a/src/components/dialog/content/TopUpCreditsDialogContent.vue b/src/components/dialog/content/TopUpCreditsDialogContent.vue
index d15b752899..9621084f8f 100644
--- a/src/components/dialog/content/TopUpCreditsDialogContent.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContent.vue
@@ -1,3 +1,28 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import UserCredit from '@/components/common/UserCredit.vue'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+
+import CreditTopUpOption from './credit/CreditTopUpOption.vue'
+
+const {
+  isInsufficientCredits = false,
+  amountOptions = [5, 10, 20, 50],
+  preselectedAmountOption = 10
+} = defineProps<{
+  isInsufficientCredits?: boolean
+  amountOptions?: number[]
+  preselectedAmountOption?: number
+}>()
+
+const authActions = useFirebaseAuthActions()
+
+const handleSeeDetails = async () => {
+  await authActions.accessBillingPortal()
+}
+</script>
+
 <template>
   <div class="flex flex-col w-96 p-2 gap-10">
     <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
@@ -46,28 +71,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-
-import UserCredit from '@/components/common/UserCredit.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-
-import CreditTopUpOption from './credit/CreditTopUpOption.vue'
-
-const {
-  isInsufficientCredits = false,
-  amountOptions = [5, 10, 20, 50],
-  preselectedAmountOption = 10
-} = defineProps<{
-  isInsufficientCredits?: boolean
-  amountOptions?: number[]
-  preselectedAmountOption?: number
-}>()
-
-const authActions = useFirebaseAuthActions()
-
-const handleSeeDetails = async () => {
-  await authActions.accessBillingPortal()
-}
-</script>
diff --git a/src/components/dialog/content/UpdatePasswordContent.vue b/src/components/dialog/content/UpdatePasswordContent.vue
index 6ab4b74df7..83944f70a9 100644
--- a/src/components/dialog/content/UpdatePasswordContent.vue
+++ b/src/components/dialog/content/UpdatePasswordContent.vue
@@ -1,21 +1,3 @@
-<template>
-  <Form
-    class="flex flex-col gap-6 w-96"
-    :resolver="zodResolver(updatePasswordSchema)"
-    @submit="onSubmit"
-  >
-    <PasswordFields />
-
-    <!-- Submit Button -->
-    <Button
-      type="submit"
-      :label="$t('userSettings.updatePassword')"
-      class="h-10 font-medium mt-4"
-      :loading="loading"
-    />
-  </Form>
-</template>
-
 <script setup lang="ts">
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
@@ -46,3 +28,21 @@ const onSubmit = async (event: FormSubmitEvent) => {
   }
 }
 </script>
+
+<template>
+  <Form
+    class="flex flex-col gap-6 w-96"
+    :resolver="zodResolver(updatePasswordSchema)"
+    @submit="onSubmit"
+  >
+    <PasswordFields />
+
+    <!-- Submit Button -->
+    <Button
+      type="submit"
+      :label="$t('userSettings.updatePassword')"
+      class="h-10 font-medium mt-4"
+      :loading="loading"
+    />
+  </Form>
+</template>
diff --git a/src/components/dialog/content/credit/CreditTopUpOption.vue b/src/components/dialog/content/credit/CreditTopUpOption.vue
index 95ea29fc28..0c2c328fa2 100644
--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/src/components/dialog/content/credit/CreditTopUpOption.vue
@@ -1,36 +1,3 @@
-<template>
-  <div class="flex items-center gap-2">
-    <Tag
-      severity="secondary"
-      icon="pi pi-dollar"
-      rounded
-      class="text-amber-400 p-1"
-    />
-    <InputNumber
-      v-if="editable"
-      v-model="customAmount"
-      :min="1"
-      :max="1000"
-      :step="1"
-      show-buttons
-      :allow-empty="false"
-      :highlight-on-focus="true"
-      pt:pc-input-text:root="w-24"
-      @blur="(e: InputNumberBlurEvent) => (customAmount = Number(e.value))"
-      @input="(e: InputNumberInputEvent) => (customAmount = Number(e.value))"
-    />
-    <span v-else class="text-xl">{{ amount }}</span>
-  </div>
-  <ProgressSpinner v-if="loading" class="w-8 h-8" />
-  <Button
-    v-else
-    :severity="preselected ? 'primary' : 'secondary'"
-    :outlined="!preselected"
-    :label="$t('credits.topUp.buyNow')"
-    @click="handleBuyNow"
-  />
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import InputNumber, {
@@ -73,3 +40,36 @@ onBeforeUnmount(() => {
   }
 })
 </script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <Tag
+      severity="secondary"
+      icon="pi pi-dollar"
+      rounded
+      class="text-amber-400 p-1"
+    />
+    <InputNumber
+      v-if="editable"
+      v-model="customAmount"
+      :min="1"
+      :max="1000"
+      :step="1"
+      show-buttons
+      :allow-empty="false"
+      :highlight-on-focus="true"
+      pt:pc-input-text:root="w-24"
+      @blur="(e: InputNumberBlurEvent) => (customAmount = Number(e.value))"
+      @input="(e: InputNumberInputEvent) => (customAmount = Number(e.value))"
+    />
+    <span v-else class="text-xl">{{ amount }}</span>
+  </div>
+  <ProgressSpinner v-if="loading" class="w-8 h-8" />
+  <Button
+    v-else
+    :severity="preselected ? 'primary' : 'secondary'"
+    :outlined="!preselected"
+    :label="$t('credits.topUp.buyNow')"
+    @click="handleBuyNow"
+  />
+</template>
diff --git a/src/components/dialog/content/error/FindIssueButton.vue b/src/components/dialog/content/error/FindIssueButton.vue
index e4c32b4713..f37b12627f 100644
--- a/src/components/dialog/content/error/FindIssueButton.vue
+++ b/src/components/dialog/content/error/FindIssueButton.vue
@@ -1,12 +1,3 @@
-<template>
-  <Button
-    :label="$t('g.findIssues')"
-    severity="secondary"
-    icon="pi pi-github"
-    @click="openGitHubIssues"
-  />
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
@@ -25,3 +16,12 @@ const openGitHubIssues = () => {
   window.open(url, '_blank')
 }
 </script>
+
+<template>
+  <Button
+    :label="$t('g.findIssues')"
+    severity="secondary"
+    icon="pi pi-github"
+    @click="openGitHubIssues"
+  />
+</template>
diff --git a/src/components/dialog/content/setting/AboutPanel.vue b/src/components/dialog/content/setting/AboutPanel.vue
index 9c74f2cd75..0aa003661a 100644
--- a/src/components/dialog/content/setting/AboutPanel.vue
+++ b/src/components/dialog/content/setting/AboutPanel.vue
@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import Divider from 'primevue/divider'
+import Tag from 'primevue/tag'
+
+import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
+import { useAboutPanelStore } from '@/stores/aboutPanelStore'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+
+import PanelTemplate from './PanelTemplate.vue'
+
+const systemStatsStore = useSystemStatsStore()
+const aboutPanelStore = useAboutPanelStore()
+</script>
+
 <template>
   <PanelTemplate value="About" class="about-container">
     <h2 class="text-2xl font-bold mb-2">
@@ -30,17 +44,3 @@
     />
   </PanelTemplate>
 </template>
-
-<script setup lang="ts">
-import Divider from 'primevue/divider'
-import Tag from 'primevue/tag'
-
-import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
-import { useAboutPanelStore } from '@/stores/aboutPanelStore'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
-
-import PanelTemplate from './PanelTemplate.vue'
-
-const systemStatsStore = useSystemStatsStore()
-const aboutPanelStore = useAboutPanelStore()
-</script>
diff --git a/src/components/dialog/content/setting/CreditsPanel.vue b/src/components/dialog/content/setting/CreditsPanel.vue
index 374dfbe148..c3af1fb3c7 100644
--- a/src/components/dialog/content/setting/CreditsPanel.vue
+++ b/src/components/dialog/content/setting/CreditsPanel.vue
@@ -1,3 +1,70 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import Divider from 'primevue/divider'
+import Skeleton from 'primevue/skeleton'
+import TabPanel from 'primevue/tabpanel'
+import { computed, ref, watch } from 'vue'
+
+import UserCredit from '@/components/common/UserCredit.vue'
+import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useDialogService } from '@/services/dialogService'
+import { useCommandStore } from '@/stores/commandStore'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { formatMetronomeCurrency } from '@/utils/formatUtil'
+
+interface CreditHistoryItemData {
+  title: string
+  timestamp: string
+  amount: number
+  isPositive: boolean
+}
+
+const dialogService = useDialogService()
+const authStore = useFirebaseAuthStore()
+const authActions = useFirebaseAuthActions()
+const commandStore = useCommandStore()
+const loading = computed(() => authStore.loading)
+const balanceLoading = computed(() => authStore.isFetchingBalance)
+
+const usageLogsTableRef = ref<InstanceType<typeof UsageLogsTable> | null>(null)
+
+const formattedLastUpdateTime = computed(() =>
+  authStore.lastBalanceUpdateTime
+    ? authStore.lastBalanceUpdateTime.toLocaleString()
+    : ''
+)
+
+watch(
+  () => authStore.lastBalanceUpdateTime,
+  (newTime, oldTime) => {
+    if (newTime && newTime !== oldTime && usageLogsTableRef.value) {
+      usageLogsTableRef.value.refresh()
+    }
+  }
+)
+
+const handlePurchaseCreditsClick = () => {
+  dialogService.showTopUpCreditsDialog()
+}
+
+const handleCreditsHistoryClick = async () => {
+  await authActions.accessBillingPortal()
+}
+
+const handleMessageSupport = async () => {
+  await commandStore.execute('Comfy.ContactSupport')
+}
+
+const handleFaqClick = () => {
+  window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
+}
+
+const creditHistory = ref<CreditHistoryItemData[]>([])
+</script>
+
 <template>
   <TabPanel value="Credits" class="credits-container h-full">
     <div class="flex flex-col h-full">
@@ -103,70 +170,3 @@
     </div>
   </TabPanel>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Column from 'primevue/column'
-import DataTable from 'primevue/datatable'
-import Divider from 'primevue/divider'
-import Skeleton from 'primevue/skeleton'
-import TabPanel from 'primevue/tabpanel'
-import { computed, ref, watch } from 'vue'
-
-import UserCredit from '@/components/common/UserCredit.vue'
-import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useDialogService } from '@/services/dialogService'
-import { useCommandStore } from '@/stores/commandStore'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
-
-interface CreditHistoryItemData {
-  title: string
-  timestamp: string
-  amount: number
-  isPositive: boolean
-}
-
-const dialogService = useDialogService()
-const authStore = useFirebaseAuthStore()
-const authActions = useFirebaseAuthActions()
-const commandStore = useCommandStore()
-const loading = computed(() => authStore.loading)
-const balanceLoading = computed(() => authStore.isFetchingBalance)
-
-const usageLogsTableRef = ref<InstanceType<typeof UsageLogsTable> | null>(null)
-
-const formattedLastUpdateTime = computed(() =>
-  authStore.lastBalanceUpdateTime
-    ? authStore.lastBalanceUpdateTime.toLocaleString()
-    : ''
-)
-
-watch(
-  () => authStore.lastBalanceUpdateTime,
-  (newTime, oldTime) => {
-    if (newTime && newTime !== oldTime && usageLogsTableRef.value) {
-      usageLogsTableRef.value.refresh()
-    }
-  }
-)
-
-const handlePurchaseCreditsClick = () => {
-  dialogService.showTopUpCreditsDialog()
-}
-
-const handleCreditsHistoryClick = async () => {
-  await authActions.accessBillingPortal()
-}
-
-const handleMessageSupport = async () => {
-  await commandStore.execute('Comfy.ContactSupport')
-}
-
-const handleFaqClick = () => {
-  window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
-}
-
-const creditHistory = ref<CreditHistoryItemData[]>([])
-</script>
diff --git a/src/components/dialog/content/setting/CurrentUserMessage.vue b/src/components/dialog/content/setting/CurrentUserMessage.vue
index 344db3dc63..6cd7baa843 100644
--- a/src/components/dialog/content/setting/CurrentUserMessage.vue
+++ b/src/components/dialog/content/setting/CurrentUserMessage.vue
@@ -1,4 +1,17 @@
 <!-- A message that displays the current user -->
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+
+import { useUserStore } from '@/stores/userStore'
+
+const userStore = useUserStore()
+const logout = async () => {
+  await userStore.logout()
+  window.location.reload()
+}
+</script>
+
 <template>
   <Message
     v-if="userStore.isMultiUserServer"
@@ -14,16 +27,3 @@
     </div>
   </Message>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Message from 'primevue/message'
-
-import { useUserStore } from '@/stores/userStore'
-
-const userStore = useUserStore()
-const logout = async () => {
-  await userStore.logout()
-  window.location.reload()
-}
-</script>
diff --git a/src/components/dialog/content/setting/KeybindingPanel.vue b/src/components/dialog/content/setting/KeybindingPanel.vue
index dbe61f089a..1f3800750c 100644
--- a/src/components/dialog/content/setting/KeybindingPanel.vue
+++ b/src/components/dialog/content/setting/KeybindingPanel.vue
@@ -1,133 +1,3 @@
-<template>
-  <PanelTemplate value="Keybinding" class="keybinding-panel">
-    <template #header>
-      <SearchBox
-        v-model="filters['global'].value"
-        :placeholder="$t('g.searchKeybindings') + '...'"
-      />
-    </template>
-
-    <DataTable
-      v-model:selection="selectedCommandData"
-      :value="commandsData"
-      :global-filter-fields="['id', 'label']"
-      :filters="filters"
-      selection-mode="single"
-      striped-rows
-      :pt="{
-        header: 'px-0'
-      }"
-      @row-dblclick="editKeybinding($event.data)"
-    >
-      <Column field="actions" header="">
-        <template #body="slotProps">
-          <div class="actions invisible flex flex-row">
-            <Button
-              icon="pi pi-pencil"
-              class="p-button-text"
-              @click="editKeybinding(slotProps.data)"
-            />
-            <Button
-              icon="pi pi-replay"
-              class="p-button-text p-button-warn"
-              :disabled="
-                !keybindingStore.isCommandKeybindingModified(slotProps.data.id)
-              "
-              @click="resetKeybinding(slotProps.data)"
-            />
-            <Button
-              icon="pi pi-trash"
-              class="p-button-text p-button-danger"
-              :disabled="!slotProps.data.keybinding"
-              @click="removeKeybinding(slotProps.data)"
-            />
-          </div>
-        </template>
-      </Column>
-      <Column
-        field="id"
-        :header="$t('g.command')"
-        sortable
-        class="max-w-64 2xl:max-w-full"
-      >
-        <template #body="slotProps">
-          <div
-            class="overflow-hidden text-ellipsis whitespace-nowrap"
-            :title="slotProps.data.id"
-          >
-            {{ slotProps.data.label }}
-          </div>
-        </template>
-      </Column>
-      <Column field="keybinding" :header="$t('g.keybinding')">
-        <template #body="slotProps">
-          <KeyComboDisplay
-            v-if="slotProps.data.keybinding"
-            :key-combo="slotProps.data.keybinding.combo"
-            :is-modified="
-              keybindingStore.isCommandKeybindingModified(slotProps.data.id)
-            "
-          />
-          <span v-else>-</span>
-        </template>
-      </Column>
-      <Column field="source" :header="$t('g.source')">
-        <template #body="slotProps">
-          <span class="overflow-hidden text-ellipsis">{{
-            slotProps.data.source || '-'
-          }}</span>
-        </template>
-      </Column>
-    </DataTable>
-
-    <Dialog
-      v-model:visible="editDialogVisible"
-      class="min-w-96"
-      modal
-      :header="currentEditingCommand?.label"
-      @hide="cancelEdit"
-    >
-      <div>
-        <InputText
-          ref="keybindingInput"
-          class="mb-2 text-center"
-          :model-value="newBindingKeyCombo?.toString() ?? ''"
-          placeholder="Press keys for new binding"
-          autocomplete="off"
-          fluid
-          @keydown.stop.prevent="captureKeybinding"
-        />
-        <Message v-if="existingKeybindingOnCombo" severity="warn">
-          {{ $t('g.keybindingAlreadyExists') }}
-          <Tag
-            severity="secondary"
-            :value="existingKeybindingOnCombo.commandId"
-          />
-        </Message>
-      </div>
-      <template #footer>
-        <Button
-          :label="existingKeybindingOnCombo ? 'Overwrite' : 'Save'"
-          :icon="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
-          :severity="existingKeybindingOnCombo ? 'warn' : undefined"
-          autofocus
-          @click="saveKeybinding"
-        />
-      </template>
-    </Dialog>
-    <Button
-      v-tooltip="$t('g.resetAllKeybindingsTooltip')"
-      class="mt-4"
-      :label="$t('g.resetAll')"
-      icon="pi pi-replay"
-      severity="danger"
-      fluid
-      text
-      @click="resetAllKeybindings"
-    />
-  </PanelTemplate>
-</template>
-
 <script setup lang="ts">
 import { FilterMatchMode } from '@primevue/core/api'
 import Button from 'primevue/button'
@@ -294,6 +164,136 @@ async function resetAllKeybindings() {
 }
 </script>
 
+<template>
+  <PanelTemplate value="Keybinding" class="keybinding-panel">
+    <template #header>
+      <SearchBox
+        v-model="filters['global'].value"
+        :placeholder="$t('g.searchKeybindings') + '...'"
+      />
+    </template>
+
+    <DataTable
+      v-model:selection="selectedCommandData"
+      :value="commandsData"
+      :global-filter-fields="['id', 'label']"
+      :filters="filters"
+      selection-mode="single"
+      striped-rows
+      :pt="{
+        header: 'px-0'
+      }"
+      @row-dblclick="editKeybinding($event.data)"
+    >
+      <Column field="actions" header="">
+        <template #body="slotProps">
+          <div class="actions invisible flex flex-row">
+            <Button
+              icon="pi pi-pencil"
+              class="p-button-text"
+              @click="editKeybinding(slotProps.data)"
+            />
+            <Button
+              icon="pi pi-replay"
+              class="p-button-text p-button-warn"
+              :disabled="
+                !keybindingStore.isCommandKeybindingModified(slotProps.data.id)
+              "
+              @click="resetKeybinding(slotProps.data)"
+            />
+            <Button
+              icon="pi pi-trash"
+              class="p-button-text p-button-danger"
+              :disabled="!slotProps.data.keybinding"
+              @click="removeKeybinding(slotProps.data)"
+            />
+          </div>
+        </template>
+      </Column>
+      <Column
+        field="id"
+        :header="$t('g.command')"
+        sortable
+        class="max-w-64 2xl:max-w-full"
+      >
+        <template #body="slotProps">
+          <div
+            class="overflow-hidden text-ellipsis whitespace-nowrap"
+            :title="slotProps.data.id"
+          >
+            {{ slotProps.data.label }}
+          </div>
+        </template>
+      </Column>
+      <Column field="keybinding" :header="$t('g.keybinding')">
+        <template #body="slotProps">
+          <KeyComboDisplay
+            v-if="slotProps.data.keybinding"
+            :key-combo="slotProps.data.keybinding.combo"
+            :is-modified="
+              keybindingStore.isCommandKeybindingModified(slotProps.data.id)
+            "
+          />
+          <span v-else>-</span>
+        </template>
+      </Column>
+      <Column field="source" :header="$t('g.source')">
+        <template #body="slotProps">
+          <span class="overflow-hidden text-ellipsis">{{
+            slotProps.data.source || '-'
+          }}</span>
+        </template>
+      </Column>
+    </DataTable>
+
+    <Dialog
+      v-model:visible="editDialogVisible"
+      class="min-w-96"
+      modal
+      :header="currentEditingCommand?.label"
+      @hide="cancelEdit"
+    >
+      <div>
+        <InputText
+          ref="keybindingInput"
+          class="mb-2 text-center"
+          :model-value="newBindingKeyCombo?.toString() ?? ''"
+          placeholder="Press keys for new binding"
+          autocomplete="off"
+          fluid
+          @keydown.stop.prevent="captureKeybinding"
+        />
+        <Message v-if="existingKeybindingOnCombo" severity="warn">
+          {{ $t('g.keybindingAlreadyExists') }}
+          <Tag
+            severity="secondary"
+            :value="existingKeybindingOnCombo.commandId"
+          />
+        </Message>
+      </div>
+      <template #footer>
+        <Button
+          :label="existingKeybindingOnCombo ? 'Overwrite' : 'Save'"
+          :icon="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
+          :severity="existingKeybindingOnCombo ? 'warn' : undefined"
+          autofocus
+          @click="saveKeybinding"
+        />
+      </template>
+    </Dialog>
+    <Button
+      v-tooltip="$t('g.resetAllKeybindingsTooltip')"
+      class="mt-4"
+      :label="$t('g.resetAll')"
+      icon="pi pi-replay"
+      severity="danger"
+      fluid
+      text
+      @click="resetAllKeybindings"
+    />
+  </PanelTemplate>
+</template>
+
 <style scoped>
 @reference '../../../../assets/css/style.css';
 
diff --git a/src/components/dialog/content/setting/PanelTemplate.vue b/src/components/dialog/content/setting/PanelTemplate.vue
index d1ff51e351..28fcfb05d4 100644
--- a/src/components/dialog/content/setting/PanelTemplate.vue
+++ b/src/components/dialog/content/setting/PanelTemplate.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import TabPanel from 'primevue/tabpanel'
+
+const props = defineProps<{
+  value: string
+  class?: string
+}>()
+</script>
+
 <template>
   <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
     <div class="flex flex-col h-full w-full gap-2">
@@ -9,13 +19,3 @@
     </div>
   </TabPanel>
 </template>
-
-<script setup lang="ts">
-import ScrollPanel from 'primevue/scrollpanel'
-import TabPanel from 'primevue/tabpanel'
-
-const props = defineProps<{
-  value: string
-  class?: string
-}>()
-</script>
diff --git a/src/components/dialog/content/setting/UsageLogsTable.vue b/src/components/dialog/content/setting/UsageLogsTable.vue
index 082fb200c7..79497d2862 100644
--- a/src/components/dialog/content/setting/UsageLogsTable.vue
+++ b/src/components/dialog/content/setting/UsageLogsTable.vue
@@ -1,92 +1,3 @@
-<template>
-  <div>
-    <div v-if="loading" class="flex items-center justify-center p-8">
-      <ProgressSpinner />
-    </div>
-    <div v-else-if="error" class="p-4">
-      <Message severity="error" :closable="false">{{ error }}</Message>
-    </div>
-    <DataTable
-      v-else
-      :value="events"
-      :paginator="true"
-      :rows="pagination.limit"
-      :total-records="pagination.total"
-      :first="dataTableFirst"
-      :lazy="true"
-      class="p-datatable-sm custom-datatable"
-      @page="onPageChange"
-    >
-      <Column field="event_type" :header="$t('credits.eventType')">
-        <template #body="{ data }">
-          <Badge
-            :value="customerEventService.formatEventType(data.event_type)"
-            :severity="customerEventService.getEventSeverity(data.event_type)"
-          />
-        </template>
-      </Column>
-      <Column field="details" :header="$t('credits.details')">
-        <template #body="{ data }">
-          <div class="event-details">
-            <!-- Credits Added -->
-            <template v-if="data.event_type === EventType.CREDIT_ADDED">
-              <div class="text-green-500 font-semibold">
-                {{ $t('credits.added') }} ${{
-                  customerEventService.formatAmount(data.params?.amount)
-                }}
-              </div>
-            </template>
-
-            <!-- Account Created -->
-            <template v-else-if="data.event_type === EventType.ACCOUNT_CREATED">
-              <div>{{ $t('credits.accountInitialized') }}</div>
-            </template>
-
-            <!-- API Usage -->
-            <template
-              v-else-if="data.event_type === EventType.API_USAGE_COMPLETED"
-            >
-              <div class="flex flex-col gap-1">
-                <div class="font-semibold">
-                  {{ data.params?.api_name || 'API' }}
-                </div>
-                <div class="text-sm text-gray-400">
-                  {{ $t('credits.model') }}: {{ data.params?.model || '-' }}
-                </div>
-              </div>
-            </template>
-          </div>
-        </template>
-      </Column>
-      <Column field="createdAt" :header="$t('credits.time')">
-        <template #body="{ data }">
-          {{ customerEventService.formatDate(data.createdAt) }}
-        </template>
-      </Column>
-      <Column field="params" :header="$t('credits.additionalInfo')">
-        <template #body="{ data }">
-          <Button
-            v-if="customerEventService.hasAdditionalInfo(data)"
-            v-tooltip.top="{
-              escape: false,
-              value: tooltipContentMap.get(data.event_id) || '',
-              pt: {
-                text: {
-                  style: {
-                    width: 'max-content !important'
-                  }
-                }
-              }
-            }"
-            icon="pi pi-info-circle"
-            class="p-button-text p-button-sm"
-          />
-        </template>
-      </Column>
-    </DataTable>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Badge from 'primevue/badge'
 import Button from 'primevue/button'
@@ -186,3 +97,92 @@ defineExpose({
   refresh
 })
 </script>
+
+<template>
+  <div>
+    <div v-if="loading" class="flex items-center justify-center p-8">
+      <ProgressSpinner />
+    </div>
+    <div v-else-if="error" class="p-4">
+      <Message severity="error" :closable="false">{{ error }}</Message>
+    </div>
+    <DataTable
+      v-else
+      :value="events"
+      :paginator="true"
+      :rows="pagination.limit"
+      :total-records="pagination.total"
+      :first="dataTableFirst"
+      :lazy="true"
+      class="p-datatable-sm custom-datatable"
+      @page="onPageChange"
+    >
+      <Column field="event_type" :header="$t('credits.eventType')">
+        <template #body="{ data }">
+          <Badge
+            :value="customerEventService.formatEventType(data.event_type)"
+            :severity="customerEventService.getEventSeverity(data.event_type)"
+          />
+        </template>
+      </Column>
+      <Column field="details" :header="$t('credits.details')">
+        <template #body="{ data }">
+          <div class="event-details">
+            <!-- Credits Added -->
+            <template v-if="data.event_type === EventType.CREDIT_ADDED">
+              <div class="text-green-500 font-semibold">
+                {{ $t('credits.added') }} ${{
+                  customerEventService.formatAmount(data.params?.amount)
+                }}
+              </div>
+            </template>
+
+            <!-- Account Created -->
+            <template v-else-if="data.event_type === EventType.ACCOUNT_CREATED">
+              <div>{{ $t('credits.accountInitialized') }}</div>
+            </template>
+
+            <!-- API Usage -->
+            <template
+              v-else-if="data.event_type === EventType.API_USAGE_COMPLETED"
+            >
+              <div class="flex flex-col gap-1">
+                <div class="font-semibold">
+                  {{ data.params?.api_name || 'API' }}
+                </div>
+                <div class="text-sm text-gray-400">
+                  {{ $t('credits.model') }}: {{ data.params?.model || '-' }}
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </Column>
+      <Column field="createdAt" :header="$t('credits.time')">
+        <template #body="{ data }">
+          {{ customerEventService.formatDate(data.createdAt) }}
+        </template>
+      </Column>
+      <Column field="params" :header="$t('credits.additionalInfo')">
+        <template #body="{ data }">
+          <Button
+            v-if="customerEventService.hasAdditionalInfo(data)"
+            v-tooltip.top="{
+              escape: false,
+              value: tooltipContentMap.get(data.event_id) || '',
+              pt: {
+                text: {
+                  style: {
+                    width: 'max-content !important'
+                  }
+                }
+              }
+            }"
+            icon="pi pi-info-circle"
+            class="p-button-text p-button-sm"
+          />
+        </template>
+      </Column>
+    </DataTable>
+  </div>
+</template>
diff --git a/src/components/dialog/content/setting/UserPanel.vue b/src/components/dialog/content/setting/UserPanel.vue
index 7497e926cc..e9e6d35879 100644
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -1,3 +1,30 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import ProgressSpinner from 'primevue/progressspinner'
+import TabPanel from 'primevue/tabpanel'
+
+import UserAvatar from '@/components/common/UserAvatar.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useDialogService } from '@/services/dialogService'
+
+const dialogService = useDialogService()
+const {
+  loading,
+  isLoggedIn,
+  isApiKeyLogin,
+  isEmailProvider,
+  userDisplayName,
+  userEmail,
+  userPhotoUrl,
+  providerName,
+  providerIcon,
+  handleSignOut,
+  handleSignIn,
+  handleDeleteAccount
+} = useCurrentUser()
+</script>
+
 <template>
   <TabPanel value="User" class="user-settings-container h-full">
     <div class="flex flex-col h-full">
@@ -94,30 +121,3 @@
     </div>
   </TabPanel>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Divider from 'primevue/divider'
-import ProgressSpinner from 'primevue/progressspinner'
-import TabPanel from 'primevue/tabpanel'
-
-import UserAvatar from '@/components/common/UserAvatar.vue'
-import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useDialogService } from '@/services/dialogService'
-
-const dialogService = useDialogService()
-const {
-  loading,
-  isLoggedIn,
-  isApiKeyLogin,
-  isEmailProvider,
-  userDisplayName,
-  userEmail,
-  userPhotoUrl,
-  providerName,
-  providerIcon,
-  handleSignOut,
-  handleSignIn,
-  handleDeleteAccount
-} = useCurrentUser()
-</script>
diff --git a/src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue b/src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue
index ded8cb18b0..423dcba41d 100644
--- a/src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue
+++ b/src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue
@@ -1,14 +1,3 @@
-<template>
-  <span>
-    <template v-for="(sequence, index) in keySequences" :key="index">
-      <Tag :severity="isModified ? 'info' : 'secondary'">
-        {{ sequence }}
-      </Tag>
-      <span v-if="index < keySequences.length - 1" class="px-2">+</span>
-    </template>
-  </span>
-</template>
-
 <script setup lang="ts">
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
@@ -22,3 +11,14 @@ const { keyCombo, isModified = false } = defineProps<{
 
 const keySequences = computed(() => keyCombo.getKeySequences())
 </script>
+
+<template>
+  <span>
+    <template v-for="(sequence, index) in keySequences" :key="index">
+      <Tag :severity="isModified ? 'info' : 'secondary'">
+        {{ sequence }}
+      </Tag>
+      <span v-if="index < keySequences.length - 1" class="px-2">+</span>
+    </template>
+  </span>
+</template>
diff --git a/src/components/dialog/content/signin/ApiKeyForm.vue b/src/components/dialog/content/signin/ApiKeyForm.vue
index dc0b196a4e..a7673dbc9d 100644
--- a/src/components/dialog/content/signin/ApiKeyForm.vue
+++ b/src/components/dialog/content/signin/ApiKeyForm.vue
@@ -1,3 +1,37 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
+import { zodResolver } from '@primevue/forms/resolvers/zod'
+import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import Message from 'primevue/message'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
+import { apiKeySchema } from '@/schemas/signInSchema'
+import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+const authStore = useFirebaseAuthStore()
+const apiKeyStore = useApiKeyAuthStore()
+const loading = computed(() => authStore.loading)
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  (e: 'back'): void
+  (e: 'success'): void
+}>()
+
+const onSubmit = async (event: FormSubmitEvent) => {
+  if (event.valid) {
+    await apiKeyStore.storeApiKey(event.values.apiKey)
+    emit('success')
+  }
+}
+</script>
+
 <template>
   <div class="flex flex-col gap-6">
     <div class="flex flex-col gap-4 mb-8">
@@ -77,37 +111,3 @@
     </Form>
   </div>
 </template>
-
-<script setup lang="ts">
-import type { FormSubmitEvent } from '@primevue/forms'
-import { Form } from '@primevue/forms'
-import { zodResolver } from '@primevue/forms/resolvers/zod'
-import Button from 'primevue/button'
-import InputText from 'primevue/inputtext'
-import Message from 'primevue/message'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
-import { apiKeySchema } from '@/schemas/signInSchema'
-import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-
-const authStore = useFirebaseAuthStore()
-const apiKeyStore = useApiKeyAuthStore()
-const loading = computed(() => authStore.loading)
-
-const { t } = useI18n()
-
-const emit = defineEmits<{
-  (e: 'back'): void
-  (e: 'success'): void
-}>()
-
-const onSubmit = async (event: FormSubmitEvent) => {
-  if (event.valid) {
-    await apiKeyStore.storeApiKey(event.values.apiKey)
-    emit('success')
-  }
-}
-</script>
diff --git a/src/components/dialog/content/signin/PasswordFields.vue b/src/components/dialog/content/signin/PasswordFields.vue
index 8429904fd1..82823286a1 100644
--- a/src/components/dialog/content/signin/PasswordFields.vue
+++ b/src/components/dialog/content/signin/PasswordFields.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+import { FormField } from '@primevue/forms'
+import Password from 'primevue/password'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const password = ref('')
+
+// TODO: Use dynamic form to better organize the password checks.
+// Ref: https://primevue.org/forms/#dynamic
+const passwordChecks = computed(() => ({
+  length: password.value.length >= 8 && password.value.length <= 32,
+  uppercase: /[A-Z]/.test(password.value),
+  lowercase: /[a-z]/.test(password.value),
+  number: /\d/.test(password.value),
+  special: /[^A-Za-z0-9]/.test(password.value)
+}))
+</script>
+
 <template>
   <!-- Password Field -->
   <FormField v-slot="$field" name="password" class="flex flex-col gap-2">
@@ -89,23 +109,3 @@
     }}</small>
   </FormField>
 </template>
-
-<script setup lang="ts">
-import { FormField } from '@primevue/forms'
-import Password from 'primevue/password'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-const password = ref('')
-
-// TODO: Use dynamic form to better organize the password checks.
-// Ref: https://primevue.org/forms/#dynamic
-const passwordChecks = computed(() => ({
-  length: password.value.length >= 8 && password.value.length <= 32,
-  uppercase: /[A-Z]/.test(password.value),
-  lowercase: /[a-z]/.test(password.value),
-  number: /\d/.test(password.value),
-  special: /[^A-Za-z0-9]/.test(password.value)
-}))
-</script>
diff --git a/src/components/dialog/content/signin/SignInForm.vue b/src/components/dialog/content/signin/SignInForm.vue
index a600428d47..c220a7fec4 100644
--- a/src/components/dialog/content/signin/SignInForm.vue
+++ b/src/components/dialog/content/signin/SignInForm.vue
@@ -1,3 +1,56 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
+import { zodResolver } from '@primevue/forms/resolvers/zod'
+import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import Password from 'primevue/password'
+import ProgressSpinner from 'primevue/progressspinner'
+import { useToast } from 'primevue/usetoast'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { type SignInData, signInSchema } from '@/schemas/signInSchema'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+const authStore = useFirebaseAuthStore()
+const firebaseAuthActions = useFirebaseAuthActions()
+const loading = computed(() => authStore.loading)
+const toast = useToast()
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  submit: [values: SignInData]
+}>()
+
+const emailInputId = 'comfy-org-sign-in-email'
+
+const onSubmit = (event: FormSubmitEvent) => {
+  if (event.valid) {
+    emit('submit', event.values as SignInData)
+  }
+}
+
+const handleForgotPassword = async (
+  email: string,
+  isValid: boolean | undefined
+) => {
+  if (!email || !isValid) {
+    toast.add({
+      severity: 'warn',
+      summary: t('auth.login.emailPlaceholder'),
+      life: 5_000
+    })
+    // Focus the email input
+    document.getElementById(emailInputId)?.focus?.()
+    return
+  }
+  await firebaseAuthActions.sendPasswordReset(email)
+}
+</script>
+
 <template>
   <Form
     v-slot="$form"
@@ -70,59 +123,6 @@
   </Form>
 </template>
 
-<script setup lang="ts">
-import type { FormSubmitEvent } from '@primevue/forms'
-import { Form } from '@primevue/forms'
-import { zodResolver } from '@primevue/forms/resolvers/zod'
-import Button from 'primevue/button'
-import InputText from 'primevue/inputtext'
-import Password from 'primevue/password'
-import ProgressSpinner from 'primevue/progressspinner'
-import { useToast } from 'primevue/usetoast'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { type SignInData, signInSchema } from '@/schemas/signInSchema'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-
-const authStore = useFirebaseAuthStore()
-const firebaseAuthActions = useFirebaseAuthActions()
-const loading = computed(() => authStore.loading)
-const toast = useToast()
-
-const { t } = useI18n()
-
-const emit = defineEmits<{
-  submit: [values: SignInData]
-}>()
-
-const emailInputId = 'comfy-org-sign-in-email'
-
-const onSubmit = (event: FormSubmitEvent) => {
-  if (event.valid) {
-    emit('submit', event.values as SignInData)
-  }
-}
-
-const handleForgotPassword = async (
-  email: string,
-  isValid: boolean | undefined
-) => {
-  if (!email || !isValid) {
-    toast.add({
-      severity: 'warn',
-      summary: t('auth.login.emailPlaceholder'),
-      life: 5_000
-    })
-    // Focus the email input
-    document.getElementById(emailInputId)?.focus?.()
-    return
-  }
-  await firebaseAuthActions.sendPasswordReset(email)
-}
-</script>
-
 <style scoped>
 @reference '../../../../assets/css/style.css';
 
diff --git a/src/components/dialog/content/signin/SignUpForm.vue b/src/components/dialog/content/signin/SignUpForm.vue
index 0fa7be15db..9acbee1b79 100644
--- a/src/components/dialog/content/signin/SignUpForm.vue
+++ b/src/components/dialog/content/signin/SignUpForm.vue
@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form, FormField } from '@primevue/forms'
+import { zodResolver } from '@primevue/forms/resolvers/zod'
+import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
+import InputText from 'primevue/inputtext'
+import { useI18n } from 'vue-i18n'
+
+import { type SignUpData, signUpSchema } from '@/schemas/signInSchema'
+
+import PasswordFields from './PasswordFields.vue'
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  submit: [values: SignUpData]
+}>()
+
+const onSubmit = (event: FormSubmitEvent) => {
+  if (event.valid) {
+    emit('submit', event.values as SignUpData)
+  }
+}
+</script>
+
 <template>
   <Form
     class="flex flex-col gap-6"
@@ -57,29 +83,3 @@
     />
   </Form>
 </template>
-
-<script setup lang="ts">
-import type { FormSubmitEvent } from '@primevue/forms'
-import { Form, FormField } from '@primevue/forms'
-import { zodResolver } from '@primevue/forms/resolvers/zod'
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import InputText from 'primevue/inputtext'
-import { useI18n } from 'vue-i18n'
-
-import { type SignUpData, signUpSchema } from '@/schemas/signInSchema'
-
-import PasswordFields from './PasswordFields.vue'
-
-const { t } = useI18n()
-
-const emit = defineEmits<{
-  submit: [values: SignUpData]
-}>()
-
-const onSubmit = (event: FormSubmitEvent) => {
-  if (event.valid) {
-    emit('submit', event.values as SignUpData)
-  }
-}
-</script>
diff --git a/src/components/dialog/header/SettingDialogHeader.vue b/src/components/dialog/header/SettingDialogHeader.vue
index 66765846ff..b27a21d6cb 100644
--- a/src/components/dialog/header/SettingDialogHeader.vue
+++ b/src/components/dialog/header/SettingDialogHeader.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import Tag from 'primevue/tag'
+
+// Global variable from vite build defined in global.d.ts
+// eslint-disable-next-line no-undef
+const isStaging = !__USE_PROD_CONFIG__
+</script>
 <template>
   <div>
     <h2 class="px-4">
@@ -12,13 +19,6 @@
     </h2>
   </div>
 </template>
-<script setup lang="ts">
-import Tag from 'primevue/tag'
-
-// Global variable from vite build defined in global.d.ts
-// eslint-disable-next-line no-undef
-const isStaging = !__USE_PROD_CONFIG__
-</script>
 
 <style scoped>
 .pi-cog {
diff --git a/src/components/graph/DomWidgets.vue b/src/components/graph/DomWidgets.vue
index a68e580c9a..b6bcc528d8 100644
--- a/src/components/graph/DomWidgets.vue
+++ b/src/components/graph/DomWidgets.vue
@@ -1,15 +1,3 @@
-<template>
-  <!-- Create a new stacking context for widgets to avoid z-index issues -->
-  <div class="isolate">
-    <DomWidget
-      v-for="widgetState in widgetStates"
-      :key="widgetState.widget.id"
-      :widget-state="widgetState"
-      @update:widget-value="widgetState.widget.value = $event"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
 import { computed } from 'vue'
@@ -73,3 +61,15 @@ whenever(
   { immediate: true }
 )
 </script>
+
+<template>
+  <!-- Create a new stacking context for widgets to avoid z-index issues -->
+  <div class="isolate">
+    <DomWidget
+      v-for="widgetState in widgetStates"
+      :key="widgetState.widget.id"
+      :widget-state="widgetState"
+      @update:widget-value="widgetState.widget.value = $event"
+    />
+  </div>
+</template>
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 73020bb2e8..157a3c793d 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -1,74 +1,3 @@
-<template>
-  <!-- Load splitter overlay only after comfyApp is ready. -->
-  <!-- If load immediately, the top-level splitter stateKey won't be correctly
-  synced with the stateStorage (localStorage). -->
-  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady && betaMenuEnabled">
-    <template v-if="!workspaceStore.focusMode" #side-bar-panel>
-      <SideToolbar />
-    </template>
-    <template v-if="!workspaceStore.focusMode" #bottom-panel>
-      <BottomPanel />
-    </template>
-    <template #graph-canvas-panel>
-      <div class="absolute top-0 left-0 w-auto max-w-full pointer-events-auto">
-        <SecondRowWorkflowTabs
-          v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
-        />
-      </div>
-      <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
-
-      <MiniMap
-        v-if="comfyAppReady && minimapEnabled"
-        class="pointer-events-auto"
-      />
-    </template>
-  </LiteGraphCanvasSplitterOverlay>
-  <GraphCanvasMenu v-if="!betaMenuEnabled && canvasMenuEnabled" />
-  <canvas
-    id="graph-canvas"
-    ref="canvasRef"
-    tabindex="1"
-    class="align-top w-full h-full touch-none"
-  />
-
-  <!-- TransformPane for Vue node rendering -->
-  <TransformPane
-    v-if="shouldRenderVueNodes && comfyApp.canvas && comfyAppReady"
-    :canvas="comfyApp.canvas"
-    @transform-update="handleTransformUpdate"
-    @wheel.capture="canvasInteractions.forwardEventToCanvas"
-  >
-    <!-- Vue nodes rendered based on graph nodes -->
-    <VueGraphNode
-      v-for="nodeData in allNodes"
-      :key="nodeData.id"
-      :node-data="nodeData"
-      :position="nodePositions.get(nodeData.id)"
-      :size="nodeSizes.get(nodeData.id)"
-      :readonly="false"
-      :error="
-        executionStore.lastExecutionError?.node_id === nodeData.id
-          ? 'Execution error'
-          : null
-      "
-      :zoom-level="canvasStore.canvas?.ds?.scale || 1"
-      :data-node-id="nodeData.id"
-    />
-  </TransformPane>
-
-  <NodeTooltip v-if="tooltipEnabled" />
-  <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
-
-  <!-- Initialize components after comfyApp is ready. useAbsolutePosition requires
-  canvasStore.canvas to be initialized. -->
-  <template v-if="comfyAppReady">
-    <TitleEditor />
-    <SelectionToolbox v-if="selectionToolboxEnabled" />
-    <!-- Render legacy DOM widgets only when Vue nodes are disabled -->
-    <DomWidgets v-if="!shouldRenderVueNodes" />
-  </template>
-</template>
-
 <script setup lang="ts">
 import { useEventListener, whenever } from '@vueuse/core'
 import {
@@ -455,3 +384,74 @@ onUnmounted(() => {
   vueNodeLifecycle.cleanup()
 })
 </script>
+
+<template>
+  <!-- Load splitter overlay only after comfyApp is ready. -->
+  <!-- If load immediately, the top-level splitter stateKey won't be correctly
+  synced with the stateStorage (localStorage). -->
+  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady && betaMenuEnabled">
+    <template v-if="!workspaceStore.focusMode" #side-bar-panel>
+      <SideToolbar />
+    </template>
+    <template v-if="!workspaceStore.focusMode" #bottom-panel>
+      <BottomPanel />
+    </template>
+    <template #graph-canvas-panel>
+      <div class="absolute top-0 left-0 w-auto max-w-full pointer-events-auto">
+        <SecondRowWorkflowTabs
+          v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
+        />
+      </div>
+      <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
+
+      <MiniMap
+        v-if="comfyAppReady && minimapEnabled"
+        class="pointer-events-auto"
+      />
+    </template>
+  </LiteGraphCanvasSplitterOverlay>
+  <GraphCanvasMenu v-if="!betaMenuEnabled && canvasMenuEnabled" />
+  <canvas
+    id="graph-canvas"
+    ref="canvasRef"
+    tabindex="1"
+    class="align-top w-full h-full touch-none"
+  />
+
+  <!-- TransformPane for Vue node rendering -->
+  <TransformPane
+    v-if="shouldRenderVueNodes && comfyApp.canvas && comfyAppReady"
+    :canvas="comfyApp.canvas"
+    @transform-update="handleTransformUpdate"
+    @wheel.capture="canvasInteractions.forwardEventToCanvas"
+  >
+    <!-- Vue nodes rendered based on graph nodes -->
+    <VueGraphNode
+      v-for="nodeData in allNodes"
+      :key="nodeData.id"
+      :node-data="nodeData"
+      :position="nodePositions.get(nodeData.id)"
+      :size="nodeSizes.get(nodeData.id)"
+      :readonly="false"
+      :error="
+        executionStore.lastExecutionError?.node_id === nodeData.id
+          ? 'Execution error'
+          : null
+      "
+      :zoom-level="canvasStore.canvas?.ds?.scale || 1"
+      :data-node-id="nodeData.id"
+    />
+  </TransformPane>
+
+  <NodeTooltip v-if="tooltipEnabled" />
+  <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
+
+  <!-- Initialize components after comfyApp is ready. useAbsolutePosition requires
+  canvasStore.canvas to be initialized. -->
+  <template v-if="comfyAppReady">
+    <TitleEditor />
+    <SelectionToolbox v-if="selectionToolboxEnabled" />
+    <!-- Render legacy DOM widgets only when Vue nodes are disabled -->
+    <DomWidgets v-if="!shouldRenderVueNodes" />
+  </template>
+</template>
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index c4050d30c2..71c0d1c3a6 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -1,123 +1,3 @@
-<template>
-  <div>
-    <ZoomControlsModal :visible="isModalVisible" />
-
-    <!-- Backdrop -->
-    <div
-      v-if="hasActivePopup"
-      class="fixed inset-0 z-1200"
-      @click="hideModal"
-    ></div>
-
-    <ButtonGroup
-      class="p-buttongroup-vertical p-1 absolute bottom-4 right-2 md:right-4"
-      :style="stringifiedMinimapStyles.buttonGroupStyles"
-      @wheel="canvasInteractions.handleWheel"
-    >
-      <Button
-        v-tooltip.top="selectTooltip"
-        :style="stringifiedMinimapStyles.buttonStyles"
-        severity="secondary"
-        :aria-label="selectTooltip"
-        :pressed="isCanvasReadOnly"
-        icon="i-material-symbols:pan-tool-outline"
-        :class="selectButtonClass"
-        @click="() => commandStore.execute('Comfy.Canvas.Unlock')"
-      >
-        <template #icon>
-          <i-lucide:mouse-pointer-2 />
-        </template>
-      </Button>
-
-      <Button
-        v-tooltip.top="handTooltip"
-        severity="secondary"
-        :aria-label="handTooltip"
-        :pressed="isCanvasUnlocked"
-        :class="handButtonClass"
-        :style="stringifiedMinimapStyles.buttonStyles"
-        @click="() => commandStore.execute('Comfy.Canvas.Lock')"
-      >
-        <template #icon>
-          <i-lucide:hand />
-        </template>
-      </Button>
-
-      <!-- vertical line with bg E1DED5 -->
-      <div class="w-px my-1 bg-[#E1DED5] dark-theme:bg-[#2E3037] mx-2" />
-
-      <Button
-        v-tooltip.top="fitViewTooltip"
-        severity="secondary"
-        icon="pi pi-expand"
-        :aria-label="fitViewTooltip"
-        :style="stringifiedMinimapStyles.buttonStyles"
-        class="dark-theme:hover:bg-[#444444]! hover:bg-[#E7E6E6]!"
-        @click="() => commandStore.execute('Comfy.Canvas.FitView')"
-      >
-        <template #icon>
-          <i-lucide:focus />
-        </template>
-      </Button>
-
-      <Button
-        ref="zoomButton"
-        v-tooltip.top="t('zoomControls.label')"
-        severity="secondary"
-        :label="t('zoomControls.label')"
-        :class="zoomButtonClass"
-        :aria-label="t('zoomControls.label')"
-        data-testid="zoom-controls-button"
-        :style="stringifiedMinimapStyles.buttonStyles"
-        @click="toggleModal"
-      >
-        <span class="inline-flex text-xs">
-          <span>{{ canvasStore.appScalePercentage }}%</span>
-          <i-lucide:chevron-down />
-        </span>
-      </Button>
-
-      <div class="w-px my-1 bg-[#E1DED5] dark-theme:bg-[#2E3037] mx-2" />
-
-      <Button
-        ref="focusButton"
-        v-tooltip.top="focusModeTooltip"
-        severity="secondary"
-        :aria-label="focusModeTooltip"
-        data-testid="focus-mode-button"
-        :style="stringifiedMinimapStyles.buttonStyles"
-        :class="focusButtonClass"
-        @click="() => commandStore.execute('Workspace.ToggleFocusMode')"
-      >
-        <template #icon>
-          <i-lucide:lightbulb />
-        </template>
-      </Button>
-
-      <Button
-        v-tooltip.top="{
-          value: linkVisibilityTooltip,
-          pt: {
-            root: {
-              style: 'z-index: 2; transform: translateY(-20px);'
-            }
-          }
-        }"
-        severity="secondary"
-        :class="linkVisibleClass"
-        :aria-label="linkVisibilityAriaLabel"
-        data-testid="toggle-link-visibility-button"
-        :style="stringifiedMinimapStyles.buttonStyles"
-        @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
-      >
-        <template #icon>
-          <i-lucide:route-off />
-        </template>
-      </Button>
-    </ButtonGroup>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ButtonGroup from 'primevue/buttongroup'
@@ -268,6 +148,126 @@ onBeforeUnmount(() => {
 })
 </script>
 
+<template>
+  <div>
+    <ZoomControlsModal :visible="isModalVisible" />
+
+    <!-- Backdrop -->
+    <div
+      v-if="hasActivePopup"
+      class="fixed inset-0 z-1200"
+      @click="hideModal"
+    ></div>
+
+    <ButtonGroup
+      class="p-buttongroup-vertical p-1 absolute bottom-4 right-2 md:right-4"
+      :style="stringifiedMinimapStyles.buttonGroupStyles"
+      @wheel="canvasInteractions.handleWheel"
+    >
+      <Button
+        v-tooltip.top="selectTooltip"
+        :style="stringifiedMinimapStyles.buttonStyles"
+        severity="secondary"
+        :aria-label="selectTooltip"
+        :pressed="isCanvasReadOnly"
+        icon="i-material-symbols:pan-tool-outline"
+        :class="selectButtonClass"
+        @click="() => commandStore.execute('Comfy.Canvas.Unlock')"
+      >
+        <template #icon>
+          <i-lucide:mouse-pointer-2 />
+        </template>
+      </Button>
+
+      <Button
+        v-tooltip.top="handTooltip"
+        severity="secondary"
+        :aria-label="handTooltip"
+        :pressed="isCanvasUnlocked"
+        :class="handButtonClass"
+        :style="stringifiedMinimapStyles.buttonStyles"
+        @click="() => commandStore.execute('Comfy.Canvas.Lock')"
+      >
+        <template #icon>
+          <i-lucide:hand />
+        </template>
+      </Button>
+
+      <!-- vertical line with bg E1DED5 -->
+      <div class="w-px my-1 bg-[#E1DED5] dark-theme:bg-[#2E3037] mx-2" />
+
+      <Button
+        v-tooltip.top="fitViewTooltip"
+        severity="secondary"
+        icon="pi pi-expand"
+        :aria-label="fitViewTooltip"
+        :style="stringifiedMinimapStyles.buttonStyles"
+        class="dark-theme:hover:bg-[#444444]! hover:bg-[#E7E6E6]!"
+        @click="() => commandStore.execute('Comfy.Canvas.FitView')"
+      >
+        <template #icon>
+          <i-lucide:focus />
+        </template>
+      </Button>
+
+      <Button
+        ref="zoomButton"
+        v-tooltip.top="t('zoomControls.label')"
+        severity="secondary"
+        :label="t('zoomControls.label')"
+        :class="zoomButtonClass"
+        :aria-label="t('zoomControls.label')"
+        data-testid="zoom-controls-button"
+        :style="stringifiedMinimapStyles.buttonStyles"
+        @click="toggleModal"
+      >
+        <span class="inline-flex text-xs">
+          <span>{{ canvasStore.appScalePercentage }}%</span>
+          <i-lucide:chevron-down />
+        </span>
+      </Button>
+
+      <div class="w-px my-1 bg-[#E1DED5] dark-theme:bg-[#2E3037] mx-2" />
+
+      <Button
+        ref="focusButton"
+        v-tooltip.top="focusModeTooltip"
+        severity="secondary"
+        :aria-label="focusModeTooltip"
+        data-testid="focus-mode-button"
+        :style="stringifiedMinimapStyles.buttonStyles"
+        :class="focusButtonClass"
+        @click="() => commandStore.execute('Workspace.ToggleFocusMode')"
+      >
+        <template #icon>
+          <i-lucide:lightbulb />
+        </template>
+      </Button>
+
+      <Button
+        v-tooltip.top="{
+          value: linkVisibilityTooltip,
+          pt: {
+            root: {
+              style: 'z-index: 2; transform: translateY(-20px);'
+            }
+          }
+        }"
+        severity="secondary"
+        :class="linkVisibleClass"
+        :aria-label="linkVisibilityAriaLabel"
+        data-testid="toggle-link-visibility-button"
+        :style="stringifiedMinimapStyles.buttonStyles"
+        @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
+      >
+        <template #icon>
+          <i-lucide:route-off />
+        </template>
+      </Button>
+    </ButtonGroup>
+  </div>
+</template>
+
 <style scoped>
 .p-buttongroup-vertical {
   display: flex;
diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue
index 6419326d60..53a306c98c 100644
--- a/src/components/graph/NodeTooltip.vue
+++ b/src/components/graph/NodeTooltip.vue
@@ -1,14 +1,3 @@
-<template>
-  <div
-    v-if="tooltipText"
-    ref="tooltipRef"
-    class="node-tooltip"
-    :style="{ left, top }"
-  >
-    {{ tooltipText }}
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import { nextTick, ref } from 'vue'
@@ -129,6 +118,17 @@ useEventListener(window, 'mousemove', onMouseMove)
 useEventListener(window, 'click', hideTooltip)
 </script>
 
+<template>
+  <div
+    v-if="tooltipText"
+    ref="tooltipRef"
+    class="node-tooltip"
+    :style="{ left, top }"
+  >
+    {{ tooltipText }}
+  </div>
+</template>
+
 <style lang="css" scoped>
 .node-tooltip {
   pointer-events: none;
diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue
index f0a18ed3e3..bce62bd60e 100644
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -1,49 +1,3 @@
-<template>
-  <div
-    ref="toolboxRef"
-    style="transform: translate(var(--tb-x), var(--tb-y))"
-    class="fixed left-0 top-0 z-40 pointer-events-none"
-  >
-    <Transition name="slide-up">
-      <Panel
-        v-if="visible"
-        class="rounded-lg selection-toolbox pointer-events-auto"
-        :style="`backgroundColor: ${containerStyles.backgroundColor};`"
-        :pt="{
-          header: 'hidden',
-          content: 'p-1 h-10 flex flex-row gap-1'
-        }"
-        @wheel="canvasInteractions.handleWheel"
-      >
-        <DeleteButton v-if="showDelete" />
-        <VerticalDivider v-if="showInfoButton && showAnyPrimaryActions" />
-        <InfoButton v-if="showInfoButton" />
-
-        <ColorPickerButton v-if="showColorPicker" />
-        <FrameNodes v-if="showFrameNodes" />
-        <ConvertToSubgraphButton v-if="showConvertToSubgraph" />
-        <PublishSubgraphButton v-if="showPublishSubgraph" />
-        <MaskEditorButton v-if="showMaskEditor" />
-        <VerticalDivider
-          v-if="showAnyPrimaryActions && showAnyControlActions"
-        />
-
-        <BypassButton v-if="showBypass" />
-        <RefreshSelectionButton v-if="showRefresh" />
-        <Load3DViewerButton v-if="showLoad3DViewer" />
-
-        <ExtensionCommandButton
-          v-for="command in extensionToolboxCommands"
-          :key="command.id"
-          :command="command"
-        />
-        <ExecuteButton v-if="showExecute" />
-        <MoreOptions />
-      </Panel>
-    </Transition>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Panel from 'primevue/panel'
 import { computed, ref } from 'vue'
@@ -136,6 +90,52 @@ const showAnyPrimaryActions = computed(
 const showAnyControlActions = computed(() => showBypass.value)
 </script>
 
+<template>
+  <div
+    ref="toolboxRef"
+    style="transform: translate(var(--tb-x), var(--tb-y))"
+    class="fixed left-0 top-0 z-40 pointer-events-none"
+  >
+    <Transition name="slide-up">
+      <Panel
+        v-if="visible"
+        class="rounded-lg selection-toolbox pointer-events-auto"
+        :style="`backgroundColor: ${containerStyles.backgroundColor};`"
+        :pt="{
+          header: 'hidden',
+          content: 'p-1 h-10 flex flex-row gap-1'
+        }"
+        @wheel="canvasInteractions.handleWheel"
+      >
+        <DeleteButton v-if="showDelete" />
+        <VerticalDivider v-if="showInfoButton && showAnyPrimaryActions" />
+        <InfoButton v-if="showInfoButton" />
+
+        <ColorPickerButton v-if="showColorPicker" />
+        <FrameNodes v-if="showFrameNodes" />
+        <ConvertToSubgraphButton v-if="showConvertToSubgraph" />
+        <PublishSubgraphButton v-if="showPublishSubgraph" />
+        <MaskEditorButton v-if="showMaskEditor" />
+        <VerticalDivider
+          v-if="showAnyPrimaryActions && showAnyControlActions"
+        />
+
+        <BypassButton v-if="showBypass" />
+        <RefreshSelectionButton v-if="showRefresh" />
+        <Load3DViewerButton v-if="showLoad3DViewer" />
+
+        <ExtensionCommandButton
+          v-for="command in extensionToolboxCommands"
+          :key="command.id"
+          :command="command"
+        />
+        <ExecuteButton v-if="showExecute" />
+        <MoreOptions />
+      </Panel>
+    </Transition>
+  </div>
+</template>
+
 <style scoped>
 .selection-toolbox {
   transform: translateX(-50%) translateY(-120%);
diff --git a/src/components/graph/TitleEditor.vue b/src/components/graph/TitleEditor.vue
index e5505fac5a..35de6b04b0 100644
--- a/src/components/graph/TitleEditor.vue
+++ b/src/components/graph/TitleEditor.vue
@@ -1,17 +1,3 @@
-<template>
-  <div
-    v-if="showInput"
-    class="group-title-editor node-title-editor"
-    :style="inputStyle"
-  >
-    <EditableText
-      :is-editing="showInput"
-      :model-value="editedTitle"
-      @edit="onEdit"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import { type CSSProperties, computed, ref, watch } from 'vue'
@@ -131,6 +117,20 @@ const canvasEventHandler = (event: LiteGraphCanvasEvent) => {
 useEventListener(document, 'litegraph:canvas', canvasEventHandler)
 </script>
 
+<template>
+  <div
+    v-if="showInput"
+    class="group-title-editor node-title-editor"
+    :style="inputStyle"
+  >
+    <EditableText
+      :is-editing="showInput"
+      :model-value="editedTitle"
+      @edit="onEdit"
+    />
+  </div>
+</template>
+
 <style scoped>
 .group-title-editor.node-title-editor {
   z-index: 9999;
diff --git a/src/components/graph/modals/ZoomControlsModal.vue b/src/components/graph/modals/ZoomControlsModal.vue
index 40dad529df..236c85848e 100644
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -1,3 +1,97 @@
+<script setup lang="ts">
+import type { InputNumberInputEvent } from 'primevue'
+import { Button, InputNumber } from 'primevue'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
+import { useCommandStore } from '@/stores/commandStore'
+
+const { t } = useI18n()
+const minimap = useMinimap()
+const settingStore = useSettingStore()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+const { formatKeySequence } = useCommandStore()
+
+interface Props {
+  visible: boolean
+}
+
+const props = defineProps<Props>()
+
+const interval = ref<number | null>(null)
+
+// Computed properties for reactive states
+const minimapToggleText = computed(() =>
+  settingStore.get('Comfy.Minimap.Visible')
+    ? t('zoomControls.hideMinimap')
+    : t('zoomControls.showMinimap')
+)
+
+const applyZoom = (val: InputNumberInputEvent) => {
+  const inputValue = val.value as number
+  if (isNaN(inputValue) || inputValue < 1 || inputValue > 1000) {
+    return
+  }
+  canvasStore.setAppZoomFromPercentage(inputValue)
+}
+
+const executeCommand = (command: string) => {
+  void commandStore.execute(command)
+}
+
+const startRepeat = (command: string) => {
+  if (interval.value) return
+  const cmd = () => commandStore.execute(command)
+  void cmd()
+  interval.value = window.setInterval(cmd, 100)
+}
+
+const stopRepeat = () => {
+  if (interval.value) {
+    clearInterval(interval.value)
+    interval.value = null
+  }
+}
+const filteredMinimapStyles = computed(() => {
+  return {
+    ...minimap.containerStyles.value,
+    height: undefined,
+    width: undefined
+  }
+})
+const zoomInCommandText = computed(() =>
+  formatKeySequence(commandStore.getCommand('Comfy.Canvas.ZoomIn'))
+)
+const zoomOutCommandText = computed(() =>
+  formatKeySequence(commandStore.getCommand('Comfy.Canvas.ZoomOut'))
+)
+const zoomToFitCommandText = computed(() =>
+  formatKeySequence(commandStore.getCommand('Comfy.Canvas.FitView'))
+)
+const showMinimapCommandText = computed(() =>
+  formatKeySequence(commandStore.getCommand('Comfy.Canvas.ToggleMinimap'))
+)
+const zoomInput = ref<InstanceType<typeof InputNumber> | null>(null)
+const zoomInputContainer = ref<HTMLDivElement | null>(null)
+
+watch(
+  () => props.visible,
+  async (newVal) => {
+    if (newVal) {
+      await nextTick()
+      const input = zoomInputContainer.value?.querySelector(
+        'input'
+      ) as HTMLInputElement
+      input?.focus()
+    }
+  }
+)
+</script>
+
 <template>
   <div
     v-if="visible"
@@ -133,100 +227,6 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import type { InputNumberInputEvent } from 'primevue'
-import { Button, InputNumber } from 'primevue'
-import { computed, nextTick, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
-import { useCommandStore } from '@/stores/commandStore'
-
-const { t } = useI18n()
-const minimap = useMinimap()
-const settingStore = useSettingStore()
-const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-const { formatKeySequence } = useCommandStore()
-
-interface Props {
-  visible: boolean
-}
-
-const props = defineProps<Props>()
-
-const interval = ref<number | null>(null)
-
-// Computed properties for reactive states
-const minimapToggleText = computed(() =>
-  settingStore.get('Comfy.Minimap.Visible')
-    ? t('zoomControls.hideMinimap')
-    : t('zoomControls.showMinimap')
-)
-
-const applyZoom = (val: InputNumberInputEvent) => {
-  const inputValue = val.value as number
-  if (isNaN(inputValue) || inputValue < 1 || inputValue > 1000) {
-    return
-  }
-  canvasStore.setAppZoomFromPercentage(inputValue)
-}
-
-const executeCommand = (command: string) => {
-  void commandStore.execute(command)
-}
-
-const startRepeat = (command: string) => {
-  if (interval.value) return
-  const cmd = () => commandStore.execute(command)
-  void cmd()
-  interval.value = window.setInterval(cmd, 100)
-}
-
-const stopRepeat = () => {
-  if (interval.value) {
-    clearInterval(interval.value)
-    interval.value = null
-  }
-}
-const filteredMinimapStyles = computed(() => {
-  return {
-    ...minimap.containerStyles.value,
-    height: undefined,
-    width: undefined
-  }
-})
-const zoomInCommandText = computed(() =>
-  formatKeySequence(commandStore.getCommand('Comfy.Canvas.ZoomIn'))
-)
-const zoomOutCommandText = computed(() =>
-  formatKeySequence(commandStore.getCommand('Comfy.Canvas.ZoomOut'))
-)
-const zoomToFitCommandText = computed(() =>
-  formatKeySequence(commandStore.getCommand('Comfy.Canvas.FitView'))
-)
-const showMinimapCommandText = computed(() =>
-  formatKeySequence(commandStore.getCommand('Comfy.Canvas.ToggleMinimap'))
-)
-const zoomInput = ref<InstanceType<typeof InputNumber> | null>(null)
-const zoomInputContainer = ref<HTMLDivElement | null>(null)
-
-watch(
-  () => props.visible,
-  async (newVal) => {
-    if (newVal) {
-      await nextTick()
-      const input = zoomInputContainer.value?.querySelector(
-        'input'
-      ) as HTMLInputElement
-      input?.focus()
-    }
-  }
-)
-</script>
 <style>
 .zoomInputContainer:focus-within {
   border: 1px solid rgb(204, 204, 204);
diff --git a/src/components/graph/selectionToolbox/BypassButton.vue b/src/components/graph/selectionToolbox/BypassButton.vue
index 5c7c849448..f12db48fb0 100644
--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+
+const toggleBypass = async () => {
+  await commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
+}
+</script>
+
 <template>
   <Button
     v-tooltip.top="{
@@ -15,17 +29,3 @@
     </template>
   </Button>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useI18n } from 'vue-i18n'
-
-import { useCommandStore } from '@/stores/commandStore'
-
-const { t } = useI18n()
-const commandStore = useCommandStore()
-
-const toggleBypass = async () => {
-  await commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
-}
-</script>
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index 9e3024740c..767115e4b3 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -1,52 +1,3 @@
-<template>
-  <div class="relative">
-    <Button
-      v-tooltip.top="{
-        value: localizedCurrentColorName ?? t('color.noColor'),
-        showDelay: 1000
-      }"
-      data-testid="color-picker-button"
-      severity="secondary"
-      text
-      @click="() => (showColorPicker = !showColorPicker)"
-    >
-      <div class="flex items-center gap-1 px-0">
-        <i
-          class="w-4 h-4 pi pi-circle-fill"
-          :style="{ color: currentColor ?? '' }"
-        />
-        <i
-          class="w-4 h-4 pi pi-chevron-down py-1"
-          :style="{ fontSize: '0.5rem' }"
-        />
-      </div>
-    </Button>
-    <div
-      v-if="showColorPicker"
-      class="color-picker-container absolute -top-10 left-1/2"
-    >
-      <SelectButton
-        :model-value="selectedColorOption"
-        :options="colorOptions"
-        option-label="name"
-        data-key="value"
-        @update:model-value="applyColor"
-      >
-        <template #option="{ option }">
-          <i
-            v-tooltip.top="option.localizedName"
-            class="pi pi-circle-fill"
-            :style="{
-              color: isLightTheme ? option.value.light : option.value.dark
-            }"
-            :data-testid="option.name"
-          />
-        </template>
-      </SelectButton>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
@@ -164,6 +115,55 @@ watch(
 )
 </script>
 
+<template>
+  <div class="relative">
+    <Button
+      v-tooltip.top="{
+        value: localizedCurrentColorName ?? t('color.noColor'),
+        showDelay: 1000
+      }"
+      data-testid="color-picker-button"
+      severity="secondary"
+      text
+      @click="() => (showColorPicker = !showColorPicker)"
+    >
+      <div class="flex items-center gap-1 px-0">
+        <i
+          class="w-4 h-4 pi pi-circle-fill"
+          :style="{ color: currentColor ?? '' }"
+        />
+        <i
+          class="w-4 h-4 pi pi-chevron-down py-1"
+          :style="{ fontSize: '0.5rem' }"
+        />
+      </div>
+    </Button>
+    <div
+      v-if="showColorPicker"
+      class="color-picker-container absolute -top-10 left-1/2"
+    >
+      <SelectButton
+        :model-value="selectedColorOption"
+        :options="colorOptions"
+        option-label="name"
+        data-key="value"
+        @update:model-value="applyColor"
+      >
+        <template #option="{ option }">
+          <i
+            v-tooltip.top="option.localizedName"
+            class="pi pi-circle-fill"
+            :style="{
+              color: isLightTheme ? option.value.light : option.value.dark
+            }"
+            :data-testid="option.name"
+          />
+        </template>
+      </SelectButton>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 @reference '../../../assets/css/style.css';
 
diff --git a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
index 8df6a76bf1..a19b196e9e 100644
--- a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
+++ b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { useCommandStore } from '@/stores/commandStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const { isSingleSubgraph, hasAnySelection } = useSelectionState()
+
+const isUnpackVisible = isSingleSubgraph
+const isConvertVisible = computed(
+  () => hasAnySelection.value && !isSingleSubgraph.value
+)
+</script>
+
 <template>
   <Button
     v-if="isUnpackVisible"
@@ -30,21 +48,3 @@
     </template>
   </Button>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useSelectionState } from '@/composables/graph/useSelectionState'
-import { useCommandStore } from '@/stores/commandStore'
-
-const { t } = useI18n()
-const commandStore = useCommandStore()
-const { isSingleSubgraph, hasAnySelection } = useSelectionState()
-
-const isUnpackVisible = isSingleSubgraph
-const isConvertVisible = computed(
-  () => hasAnySelection.value && !isSingleSubgraph.value
-)
-</script>
diff --git a/src/components/graph/selectionToolbox/DeleteButton.vue b/src/components/graph/selectionToolbox/DeleteButton.vue
index d2b1d1acde..1cc7db81f0 100644
--- a/src/components/graph/selectionToolbox/DeleteButton.vue
+++ b/src/components/graph/selectionToolbox/DeleteButton.vue
@@ -1,19 +1,3 @@
-<template>
-  <Button
-    v-show="isDeletable"
-    v-tooltip.top="{
-      value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
-      showDelay: 1000
-    }"
-    severity="secondary"
-    text
-    icon-class="w-4 h-4"
-    icon="pi pi-trash"
-    data-testid="delete-button"
-    @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
-  />
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
@@ -31,3 +15,19 @@ const isDeletable = computed(() =>
   selectedItems.value.some((x: Positionable) => x.removable !== false)
 )
 </script>
+
+<template>
+  <Button
+    v-show="isDeletable"
+    v-tooltip.top="{
+      value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon-class="w-4 h-4"
+    icon="pi pi-trash"
+    data-testid="delete-button"
+    @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
+  />
+</template>
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue
index 802d952784..de1f71e18e 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -1,19 +1,3 @@
-<template>
-  <Button
-    v-tooltip.top="{
-      value: t('selectionToolbox.executeButton.tooltip'),
-      showDelay: 1000
-    }"
-    class="dark-theme:bg-[#0B8CE9] bg-[#31B9F4] size-8 !p-0"
-    text
-    @mouseenter="() => handleMouseEnter()"
-    @mouseleave="() => handleMouseLeave()"
-    @click="handleClick"
-  >
-    <i-lucide:play class="fill-path-white w-4 h-4" />
-  </Button>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed, ref } from 'vue'
@@ -64,6 +48,22 @@ const handleClick = async () => {
   await commandStore.execute('Comfy.QueueSelectedOutputNodes')
 }
 </script>
+
+<template>
+  <Button
+    v-tooltip.top="{
+      value: t('selectionToolbox.executeButton.tooltip'),
+      showDelay: 1000
+    }"
+    class="dark-theme:bg-[#0B8CE9] bg-[#31B9F4] size-8 !p-0"
+    text
+    @mouseenter="() => handleMouseEnter()"
+    @mouseleave="() => handleMouseLeave()"
+    @click="handleClick"
+  >
+    <i-lucide:play class="fill-path-white w-4 h-4" />
+  </Button>
+</template>
 <style scoped>
 :deep.fill-path-white > path {
   fill: white;
diff --git a/src/components/graph/selectionToolbox/ExtensionCommandButton.vue b/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
index 2e89ef7a51..565d608cc2 100644
--- a/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
+++ b/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
@@ -1,18 +1,3 @@
-<template>
-  <Button
-    v-tooltip.top="{
-      value:
-        st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
-      showDelay: 1000
-    }"
-    severity="secondary"
-    text
-    icon-class="w-4 h-4"
-    :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
-    @click="() => commandStore.execute(command.id)"
-  />
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 
@@ -27,3 +12,18 @@ defineProps<{
 
 const commandStore = useCommandStore()
 </script>
+
+<template>
+  <Button
+    v-tooltip.top="{
+      value:
+        st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon-class="w-4 h-4"
+    :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
+    @click="() => commandStore.execute(command.id)"
+  />
+</template>
diff --git a/src/components/graph/selectionToolbox/FrameNodes.vue b/src/components/graph/selectionToolbox/FrameNodes.vue
index 6d800a16f2..a690abeabb 100644
--- a/src/components/graph/selectionToolbox/FrameNodes.vue
+++ b/src/components/graph/selectionToolbox/FrameNodes.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useFrameNodes } from '@/composables/graph/useFrameNodes'
+
+const { frameNodes } = useFrameNodes()
+</script>
+
 <template>
   <Button
     v-tooltip.top="{
@@ -12,11 +20,3 @@
     <i-lucide:frame class="w-4 h-4" />
   </Button>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-
-import { useFrameNodes } from '@/composables/graph/useFrameNodes'
-
-const { frameNodes } = useFrameNodes()
-</script>
diff --git a/src/components/graph/selectionToolbox/InfoButton.vue b/src/components/graph/selectionToolbox/InfoButton.vue
index 3fd159d896..365197d35f 100644
--- a/src/components/graph/selectionToolbox/InfoButton.vue
+++ b/src/components/graph/selectionToolbox/InfoButton.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+
+const { showNodeHelp: toggleHelp } = useSelectionState()
+</script>
+
 <template>
   <Button
     v-tooltip.top="{
@@ -12,11 +20,3 @@
     <i-lucide:info class="w-4 h-4" />
   </Button>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-
-import { useSelectionState } from '@/composables/graph/useSelectionState'
-
-const { showNodeHelp: toggleHelp } = useSelectionState()
-</script>
diff --git a/src/components/graph/selectionToolbox/Load3DViewerButton.vue b/src/components/graph/selectionToolbox/Load3DViewerButton.vue
index 5187f0c023..f408b5bb46 100644
--- a/src/components/graph/selectionToolbox/Load3DViewerButton.vue
+++ b/src/components/graph/selectionToolbox/Load3DViewerButton.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { t } from '@/i18n'
+import { useCommandStore } from '@/stores/commandStore'
+
+const commandStore = useCommandStore()
+
+const open3DViewer = () => {
+  void commandStore.execute('Comfy.3DViewer.Open3DViewer')
+}
+</script>
+
 <template>
   <Button
     v-tooltip.top="{
@@ -11,16 +24,3 @@
     @click="open3DViewer"
   />
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-
-import { t } from '@/i18n'
-import { useCommandStore } from '@/stores/commandStore'
-
-const commandStore = useCommandStore()
-
-const open3DViewer = () => {
-  void commandStore.execute('Comfy.3DViewer.Open3DViewer')
-}
-</script>
diff --git a/src/components/graph/selectionToolbox/MaskEditorButton.vue b/src/components/graph/selectionToolbox/MaskEditorButton.vue
index 51054bc139..54e8604b94 100644
--- a/src/components/graph/selectionToolbox/MaskEditorButton.vue
+++ b/src/components/graph/selectionToolbox/MaskEditorButton.vue
@@ -1,18 +1,3 @@
-<template>
-  <Button
-    v-show="isSingleImageNode"
-    v-tooltip.top="{
-      value: t('commands.Comfy_MaskEditor_OpenMaskEditor.label'),
-      showDelay: 1000
-    }"
-    severity="secondary"
-    text
-    @click="openMaskEditor"
-  >
-    <i-comfy:mask class="!w-4 !h-4" />
-  </Button>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 
@@ -27,3 +12,18 @@ const openMaskEditor = () => {
   void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')
 }
 </script>
+
+<template>
+  <Button
+    v-show="isSingleImageNode"
+    v-tooltip.top="{
+      value: t('commands.Comfy_MaskEditor_OpenMaskEditor.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    @click="openMaskEditor"
+  >
+    <i-comfy:mask class="!w-4 !h-4" />
+  </Button>
+</template>
diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue
index ee88a47d95..8954aa4166 100644
--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -1,3 +1,27 @@
+<script setup lang="ts">
+import Badge from 'primevue/badge'
+import { useI18n } from 'vue-i18n'
+
+import type { MenuOption } from '@/composables/graph/useMoreOptionsMenu'
+
+const { t } = useI18n()
+
+interface Props {
+  option: MenuOption
+}
+
+interface Emits {
+  (e: 'click', option: MenuOption, event: Event): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const handleClick = (event: Event) => {
+  emit('click', props.option, event)
+}
+</script>
+
 <template>
   <div
     v-if="option.type === 'divider'"
@@ -33,27 +57,3 @@
     />
   </div>
 </template>
-
-<script setup lang="ts">
-import Badge from 'primevue/badge'
-import { useI18n } from 'vue-i18n'
-
-import type { MenuOption } from '@/composables/graph/useMoreOptionsMenu'
-
-const { t } = useI18n()
-
-interface Props {
-  option: MenuOption
-}
-
-interface Emits {
-  (e: 'click', option: MenuOption, event: Event): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const handleClick = (event: Event) => {
-  emit('click', props.option, event)
-}
-</script>
diff --git a/src/components/graph/selectionToolbox/MoreOptions.vue b/src/components/graph/selectionToolbox/MoreOptions.vue
index f40a49b603..b60cf3f674 100644
--- a/src/components/graph/selectionToolbox/MoreOptions.vue
+++ b/src/components/graph/selectionToolbox/MoreOptions.vue
@@ -1,53 +1,3 @@
-<template>
-  <div class="relative inline-flex items-center">
-    <Button
-      ref="buttonRef"
-      v-tooltip.top="{
-        value: $t('g.moreOptions'),
-        showDelay: 1000
-      }"
-      data-testid="more-options-button"
-      text
-      class="h-8 w-8 px-0"
-      severity="secondary"
-      @click="toggle"
-    >
-      <i-lucide:more-vertical class="w-4 h-4" />
-    </Button>
-
-    <Popover
-      ref="popover"
-      :append-to="'body'"
-      :auto-z-index="true"
-      :base-z-index="1000"
-      :dismissable="true"
-      :close-on-escape="true"
-      unstyled
-      :pt="pt"
-      @show="onPopoverShow"
-      @hide="onPopoverHide"
-    >
-      <div class="flex flex-col p-2 min-w-48">
-        <MenuOptionItem
-          v-for="(option, index) in menuOptions"
-          :key="option.label || `divider-${index}`"
-          :option="option"
-          @click="handleOptionClick"
-        />
-      </div>
-    </Popover>
-
-    <SubmenuPopover
-      v-for="option in menuOptionsWithSubmenu"
-      :key="`submenu-${option.label}`"
-      :ref="(el) => setSubmenuRef(`submenu-${option.label}`, el)"
-      :option="option"
-      :container-styles="containerStyles"
-      @submenu-click="handleSubmenuClick"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Popover from 'primevue/popover'
@@ -314,3 +264,53 @@ onUnmounted(() => {
   stopSync()
 })
 </script>
+
+<template>
+  <div class="relative inline-flex items-center">
+    <Button
+      ref="buttonRef"
+      v-tooltip.top="{
+        value: $t('g.moreOptions'),
+        showDelay: 1000
+      }"
+      data-testid="more-options-button"
+      text
+      class="h-8 w-8 px-0"
+      severity="secondary"
+      @click="toggle"
+    >
+      <i-lucide:more-vertical class="w-4 h-4" />
+    </Button>
+
+    <Popover
+      ref="popover"
+      :append-to="'body'"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="pt"
+      @show="onPopoverShow"
+      @hide="onPopoverHide"
+    >
+      <div class="flex flex-col p-2 min-w-48">
+        <MenuOptionItem
+          v-for="(option, index) in menuOptions"
+          :key="option.label || `divider-${index}`"
+          :option="option"
+          @click="handleOptionClick"
+        />
+      </div>
+    </Popover>
+
+    <SubmenuPopover
+      v-for="option in menuOptionsWithSubmenu"
+      :key="`submenu-${option.label}`"
+      :ref="(el) => setSubmenuRef(`submenu-${option.label}`, el)"
+      :option="option"
+      :container-styles="containerStyles"
+      @submenu-click="handleSubmenuClick"
+    />
+  </div>
+</template>
diff --git a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
index 0da7364a0b..06970f0c4b 100644
--- a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
+++ b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
+
+const { t } = useI18n()
+const { isRefreshable, refreshSelected } = useRefreshableSelection()
+</script>
+
 <template>
   <Button
     v-show="isRefreshable"
@@ -10,13 +20,3 @@
     <i-lucide:refresh-cw class="w-4 h-4" />
   </Button>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useI18n } from 'vue-i18n'
-
-import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
-
-const { t } = useI18n()
-const { isRefreshable, refreshSelected } = useRefreshableSelection()
-</script>
diff --git a/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue b/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue
index 7f76d2eabb..5e624c3393 100644
--- a/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue
+++ b/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue
@@ -1,20 +1,3 @@
-<template>
-  <Button
-    v-show="isVisible"
-    v-tooltip.top="{
-      value: t('commands.Comfy_PublishSubgraph.label'),
-      showDelay: 1000
-    }"
-    severity="secondary"
-    text
-    @click="() => commandStore.execute('Comfy.PublishSubgraph')"
-  >
-    <template #icon>
-      <i-lucide:book-open />
-    </template>
-  </Button>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
@@ -35,3 +18,20 @@ const isVisible = computed(() => {
   )
 })
 </script>
+
+<template>
+  <Button
+    v-show="isVisible"
+    v-tooltip.top="{
+      value: t('commands.Comfy_PublishSubgraph.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    @click="() => commandStore.execute('Comfy.PublishSubgraph')"
+  >
+    <template #icon>
+      <i-lucide:book-open />
+    </template>
+  </Button>
+</template>
diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue
index 2f1e25229a..792828665a 100644
--- a/src/components/graph/selectionToolbox/SubmenuPopover.vue
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -1,49 +1,3 @@
-<template>
-  <Popover
-    ref="popover"
-    :auto-z-index="true"
-    :base-z-index="1100"
-    :dismissable="true"
-    :close-on-escape="true"
-    unstyled
-    :pt="submenuPt"
-  >
-    <div
-      :class="
-        isColorSubmenu
-          ? 'flex flex-col gap-1 p-2'
-          : 'flex flex-col p-2 min-w-40'
-      "
-    >
-      <div
-        v-for="subOption in option.submenu"
-        :key="subOption.label"
-        :class="
-          isColorSubmenu
-            ? 'w-7 h-7 flex items-center justify-center hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
-            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
-        "
-        :title="subOption.label"
-        @click="handleSubmenuClick(subOption)"
-      >
-        <div
-          v-if="subOption.color"
-          class="w-5 h-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
-          :style="{ backgroundColor: subOption.color }"
-        />
-        <template v-else-if="!subOption.color">
-          <i-lucide:check
-            v-if="isShapeSelected(subOption)"
-            class="w-4 h-4 flex-shrink-0"
-          />
-          <div v-else class="w-4 flex-shrink-0" />
-          <span>{{ subOption.label }}</span>
-        </template>
-      </div>
-    </div>
-  </Popover>
-</template>
-
 <script setup lang="ts">
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
@@ -125,3 +79,49 @@ const submenuPt = computed(() => ({
   }
 }))
 </script>
+
+<template>
+  <Popover
+    ref="popover"
+    :auto-z-index="true"
+    :base-z-index="1100"
+    :dismissable="true"
+    :close-on-escape="true"
+    unstyled
+    :pt="submenuPt"
+  >
+    <div
+      :class="
+        isColorSubmenu
+          ? 'flex flex-col gap-1 p-2'
+          : 'flex flex-col p-2 min-w-40'
+      "
+    >
+      <div
+        v-for="subOption in option.submenu"
+        :key="subOption.label"
+        :class="
+          isColorSubmenu
+            ? 'w-7 h-7 flex items-center justify-center hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+        "
+        :title="subOption.label"
+        @click="handleSubmenuClick(subOption)"
+      >
+        <div
+          v-if="subOption.color"
+          class="w-5 h-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
+          :style="{ backgroundColor: subOption.color }"
+        />
+        <template v-else-if="!subOption.color">
+          <i-lucide:check
+            v-if="isShapeSelected(subOption)"
+            class="w-4 h-4 flex-shrink-0"
+          />
+          <div v-else class="w-4 flex-shrink-0" />
+          <span>{{ subOption.label }}</span>
+        </template>
+      </div>
+    </div>
+  </Popover>
+</template>
diff --git a/src/components/graph/widgets/ChatHistoryWidget.vue b/src/components/graph/widgets/ChatHistoryWidget.vue
index 8696614d88..027f67cce0 100644
--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/src/components/graph/widgets/ChatHistoryWidget.vue
@@ -1,54 +1,3 @@
-<template>
-  <ScrollPanel
-    ref="scrollPanelRef"
-    class="w-full min-h-[400px] rounded-lg px-2 py-2 text-xs"
-    :pt="{ content: { id: 'chat-scroll-content' } }"
-  >
-    <div v-for="(item, i) in parsedHistory" :key="i" class="mb-4">
-      <!-- Prompt (user, right) -->
-      <span
-        :class="{
-          'opacity-40 pointer-events-none': editIndex !== null && i > editIndex
-        }"
-      >
-        <div class="flex justify-end mb-1">
-          <div
-            class="bg-gray-300 dark-theme:bg-gray-800 rounded-xl px-4 py-1 max-w-[80%] text-right"
-          >
-            <div class="break-words text-[12px]">{{ item.prompt }}</div>
-          </div>
-        </div>
-        <div class="flex justify-end mb-2 mr-1">
-          <CopyButton :text="item.prompt" />
-          <Button
-            v-tooltip="
-              editIndex === i ? $t('chatHistory.cancelEditTooltip') : null
-            "
-            text
-            rounded
-            class="p-1! h-4! w-4! text-gray-400 hover:text-gray-600 hover:dark-theme:text-gray-200 transition"
-            pt:icon:class="text-xs!"
-            :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
-            :aria-label="
-              editIndex === i ? $t('chatHistory.cancelEdit') : $t('g.edit')
-            "
-            @click="editIndex === i ? handleCancelEdit() : handleEdit(i)"
-          />
-        </div>
-      </span>
-      <!-- Response (LLM, left) -->
-      <ResponseBlurb
-        :text="item.response"
-        :class="{
-          'opacity-25 pointer-events-none': editIndex !== null && i >= editIndex
-        }"
-      >
-        <div v-html="nl2br(linkifyHtml(item.response))" />
-      </ResponseBlurb>
-    </div>
-  </ScrollPanel>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ScrollPanel from 'primevue/scrollpanel'
@@ -132,3 +81,54 @@ watch(() => parsedHistory.value, onHistoryChanged, {
   deep: true
 })
 </script>
+
+<template>
+  <ScrollPanel
+    ref="scrollPanelRef"
+    class="w-full min-h-[400px] rounded-lg px-2 py-2 text-xs"
+    :pt="{ content: { id: 'chat-scroll-content' } }"
+  >
+    <div v-for="(item, i) in parsedHistory" :key="i" class="mb-4">
+      <!-- Prompt (user, right) -->
+      <span
+        :class="{
+          'opacity-40 pointer-events-none': editIndex !== null && i > editIndex
+        }"
+      >
+        <div class="flex justify-end mb-1">
+          <div
+            class="bg-gray-300 dark-theme:bg-gray-800 rounded-xl px-4 py-1 max-w-[80%] text-right"
+          >
+            <div class="break-words text-[12px]">{{ item.prompt }}</div>
+          </div>
+        </div>
+        <div class="flex justify-end mb-2 mr-1">
+          <CopyButton :text="item.prompt" />
+          <Button
+            v-tooltip="
+              editIndex === i ? $t('chatHistory.cancelEditTooltip') : null
+            "
+            text
+            rounded
+            class="p-1! h-4! w-4! text-gray-400 hover:text-gray-600 hover:dark-theme:text-gray-200 transition"
+            pt:icon:class="text-xs!"
+            :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
+            :aria-label="
+              editIndex === i ? $t('chatHistory.cancelEdit') : $t('g.edit')
+            "
+            @click="editIndex === i ? handleCancelEdit() : handleEdit(i)"
+          />
+        </div>
+      </span>
+      <!-- Response (LLM, left) -->
+      <ResponseBlurb
+        :text="item.response"
+        :class="{
+          'opacity-25 pointer-events-none': editIndex !== null && i >= editIndex
+        }"
+      >
+        <div v-html="nl2br(linkifyHtml(item.response))" />
+      </ResponseBlurb>
+    </div>
+  </ScrollPanel>
+</template>
diff --git a/src/components/graph/widgets/DomWidget.vue b/src/components/graph/widgets/DomWidget.vue
index 6e218d7a1b..845d74ec40 100644
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -1,22 +1,3 @@
-<template>
-  <div
-    v-show="widgetState.visible"
-    ref="widgetElement"
-    class="dom-widget"
-    :title="tooltip"
-    :style="style"
-  >
-    <component
-      :is="widget.component"
-      v-if="isComponentWidget(widget)"
-      :model-value="widget.value"
-      :widget="widget"
-      v-bind="widget.props"
-      @update:model-value="emit('update:widgetValue', $event)"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useElementBounding, useEventListener } from '@vueuse/core'
 import type { CSSProperties } from 'vue'
@@ -189,6 +170,25 @@ watch(
 )
 </script>
 
+<template>
+  <div
+    v-show="widgetState.visible"
+    ref="widgetElement"
+    class="dom-widget"
+    :title="tooltip"
+    :style="style"
+  >
+    <component
+      :is="widget.component"
+      v-if="isComponentWidget(widget)"
+      :model-value="widget.value"
+      :widget="widget"
+      v-bind="widget.props"
+      @update:model-value="emit('update:widgetValue', $event)"
+    />
+  </div>
+</template>
+
 <style scoped>
 @reference '../../../assets/css/style.css';
 
diff --git a/src/components/graph/widgets/MultiSelectWidget.vue b/src/components/graph/widgets/MultiSelectWidget.vue
index 6117433851..c33a87b897 100644
--- a/src/components/graph/widgets/MultiSelectWidget.vue
+++ b/src/components/graph/widgets/MultiSelectWidget.vue
@@ -1,17 +1,3 @@
-<template>
-  <div>
-    <MultiSelect
-      v-model="selectedItems"
-      :options="options"
-      filter
-      :placeholder="placeholder"
-      :max-selected-labels="3"
-      :display="display"
-      class="w-full"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import MultiSelect from 'primevue/multiselect'
 
@@ -28,3 +14,17 @@ const options = inputSpec.options ?? []
 const placeholder = inputSpec.multi_select?.placeholder ?? 'Select items'
 const display = inputSpec.multi_select?.chip ? 'chip' : 'comma'
 </script>
+
+<template>
+  <div>
+    <MultiSelect
+      v-model="selectedItems"
+      :options="options"
+      filter
+      :placeholder="placeholder"
+      :max-selected-labels="3"
+      :display="display"
+      class="w-full"
+    />
+  </div>
+</template>
diff --git a/src/components/graph/widgets/TextPreviewWidget.vue b/src/components/graph/widgets/TextPreviewWidget.vue
index 7da01c7744..d3464a5d1a 100644
--- a/src/components/graph/widgets/TextPreviewWidget.vue
+++ b/src/components/graph/widgets/TextPreviewWidget.vue
@@ -1,16 +1,3 @@
-<template>
-  <div
-    class="relative w-full text-xs min-h-[28px] max-h-[200px] rounded-lg px-4 py-2 overflow-y-auto"
-  >
-    <div class="flex items-center gap-2">
-      <div class="flex-1 break-all flex items-center gap-2">
-        <span v-html="formattedText"></span>
-        <Skeleton v-if="isParentNodeExecuting" class="flex-1! h-4!" />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -62,3 +49,16 @@ const stopWatching = watch(
   }
 )
 </script>
+
+<template>
+  <div
+    class="relative w-full text-xs min-h-[28px] max-h-[200px] rounded-lg px-4 py-2 overflow-y-auto"
+  >
+    <div class="flex items-center gap-2">
+      <div class="flex-1 break-all flex items-center gap-2">
+        <span v-html="formattedText"></span>
+        <Skeleton v-if="isParentNodeExecuting" class="flex-1! h-4!" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/graph/widgets/chatHistory/CopyButton.vue b/src/components/graph/widgets/chatHistory/CopyButton.vue
index e3cc41323b..55279affab 100644
--- a/src/components/graph/widgets/chatHistory/CopyButton.vue
+++ b/src/components/graph/widgets/chatHistory/CopyButton.vue
@@ -1,20 +1,3 @@
-<template>
-  <Button
-    v-tooltip="
-      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')
-    "
-    text
-    rounded
-    class="p-1! h-4! w-6! text-gray-400 hover:text-gray-600 hover:dark-theme:text-gray-200 transition"
-    pt:icon:class="text-xs!"
-    :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
-    :aria-label="
-      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')
-    "
-    @click="handleCopy"
-  />
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { ref } from 'vue'
@@ -34,3 +17,20 @@ const handleCopy = async () => {
   }, 1024)
 }
 </script>
+
+<template>
+  <Button
+    v-tooltip="
+      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')
+    "
+    text
+    rounded
+    class="p-1! h-4! w-6! text-gray-400 hover:text-gray-600 hover:dark-theme:text-gray-200 transition"
+    pt:icon:class="text-xs!"
+    :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
+    :aria-label="
+      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')
+    "
+    @click="handleCopy"
+  />
+</template>
diff --git a/src/components/graph/widgets/chatHistory/ResponseBlurb.vue b/src/components/graph/widgets/chatHistory/ResponseBlurb.vue
index 0d0997f317..6ef5cf6e26 100644
--- a/src/components/graph/widgets/chatHistory/ResponseBlurb.vue
+++ b/src/components/graph/widgets/chatHistory/ResponseBlurb.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
+
+defineProps<{
+  text: string
+}>()
+</script>
+
 <template>
   <span>
     <div class="flex justify-start mb-1">
@@ -12,11 +20,3 @@
     </div>
   </span>
 </template>
-
-<script setup lang="ts">
-import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
-
-defineProps<{
-  text: string
-}>()
-</script>
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index aef8ff751a..490733b50b 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -1,133 +1,3 @@
-<template>
-  <div class="help-center-menu" role="menu" aria-label="Help Center Menu">
-    <!-- Main Menu Items -->
-    <nav class="help-menu-section" role="menubar">
-      <button
-        v-for="menuItem in menuItems"
-        v-show="menuItem.visible !== false"
-        :key="menuItem.key"
-        type="button"
-        class="help-menu-item"
-        :class="{ 'more-item': menuItem.key === 'more' }"
-        role="menuitem"
-        @click="menuItem.action"
-        @mouseenter="onMenuItemHover(menuItem.key, $event)"
-        @mouseleave="onMenuItemLeave(menuItem.key)"
-      >
-        <div class="help-menu-icon-container">
-          <div class="help-menu-icon">
-            <component
-              :is="menuItem.icon"
-              v-if="typeof menuItem.icon === 'object'"
-              :size="16"
-            />
-            <i v-else :class="menuItem.icon" />
-          </div>
-          <div v-if="menuItem.showRedDot" class="menu-red-dot" />
-        </div>
-        <span class="menu-label">{{ menuItem.label }}</span>
-        <i v-if="menuItem.key === 'more'" class="pi pi-chevron-right" />
-      </button>
-    </nav>
-
-    <!-- More Submenu -->
-    <Teleport to="body">
-      <div
-        v-if="isSubmenuVisible"
-        ref="submenuRef"
-        class="more-submenu"
-        :style="submenuStyle"
-        @mouseenter="onSubmenuHover"
-        @mouseleave="onSubmenuLeave"
-      >
-        <template
-          v-for="submenuItem in moreMenuItem?.items"
-          :key="submenuItem.key"
-        >
-          <div
-            v-if="submenuItem.type === 'divider'"
-            v-show="submenuItem.visible !== false"
-            class="submenu-divider"
-          />
-          <button
-            v-else
-            v-show="submenuItem.visible !== false"
-            type="button"
-            class="help-menu-item submenu-item"
-            role="menuitem"
-            @click="submenuItem.action"
-          >
-            <span class="menu-label">{{ submenuItem.label }}</span>
-          </button>
-        </template>
-      </div>
-    </Teleport>
-
-    <!-- What's New Section -->
-    <section v-if="showVersionUpdates" class="whats-new-section">
-      <h3 class="section-description">{{ $t('helpCenter.whatsNew') }}</h3>
-
-      <!-- Release Items -->
-      <div v-if="hasReleases" role="group" aria-label="Recent releases">
-        <article
-          v-for="release in releaseStore.recentReleases"
-          :key="release.id || release.version"
-          class="help-menu-item release-menu-item"
-          role="button"
-          tabindex="0"
-          @click="onReleaseClick(release)"
-          @keydown.enter="onReleaseClick(release)"
-          @keydown.space.prevent="onReleaseClick(release)"
-        >
-          <i class="pi pi-refresh help-menu-icon" aria-hidden="true" />
-          <div class="release-content">
-            <span class="release-title">
-              {{
-                $t('g.releaseTitle', {
-                  package: 'Comfy',
-                  version: release.version
-                })
-              }}
-            </span>
-            <time class="release-date" :datetime="release.published_at">
-              <span class="normal-state">
-                {{ formatReleaseDate(release.published_at) }}
-              </span>
-              <span class="hover-state">
-                {{ $t('helpCenter.clickToLearnMore') }}
-              </span>
-            </time>
-          </div>
-          <Button
-            v-if="shouldShowUpdateButton(release)"
-            :label="$t('helpCenter.updateAvailable')"
-            size="small"
-            class="update-button"
-            @click.stop="onUpdate(release)"
-          />
-        </article>
-      </div>
-
-      <!-- Loading State -->
-      <div
-        v-else-if="releaseStore.isLoading"
-        class="help-menu-item"
-        role="status"
-        aria-live="polite"
-      >
-        <i class="pi pi-spin pi-spinner help-menu-icon" aria-hidden="true" />
-        <span>{{ $t('helpCenter.loadingReleases') }}</span>
-      </div>
-
-      <!-- No Releases State -->
-      <div v-else class="help-menu-item" role="status">
-        <i class="pi pi-info-circle help-menu-icon" aria-hidden="true" />
-        <span>{{ $t('helpCenter.noRecentReleases') }}</span>
-      </div>
-    </section>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import {
@@ -514,6 +384,136 @@ onMounted(async () => {
 })
 </script>
 
+<template>
+  <div class="help-center-menu" role="menu" aria-label="Help Center Menu">
+    <!-- Main Menu Items -->
+    <nav class="help-menu-section" role="menubar">
+      <button
+        v-for="menuItem in menuItems"
+        v-show="menuItem.visible !== false"
+        :key="menuItem.key"
+        type="button"
+        class="help-menu-item"
+        :class="{ 'more-item': menuItem.key === 'more' }"
+        role="menuitem"
+        @click="menuItem.action"
+        @mouseenter="onMenuItemHover(menuItem.key, $event)"
+        @mouseleave="onMenuItemLeave(menuItem.key)"
+      >
+        <div class="help-menu-icon-container">
+          <div class="help-menu-icon">
+            <component
+              :is="menuItem.icon"
+              v-if="typeof menuItem.icon === 'object'"
+              :size="16"
+            />
+            <i v-else :class="menuItem.icon" />
+          </div>
+          <div v-if="menuItem.showRedDot" class="menu-red-dot" />
+        </div>
+        <span class="menu-label">{{ menuItem.label }}</span>
+        <i v-if="menuItem.key === 'more'" class="pi pi-chevron-right" />
+      </button>
+    </nav>
+
+    <!-- More Submenu -->
+    <Teleport to="body">
+      <div
+        v-if="isSubmenuVisible"
+        ref="submenuRef"
+        class="more-submenu"
+        :style="submenuStyle"
+        @mouseenter="onSubmenuHover"
+        @mouseleave="onSubmenuLeave"
+      >
+        <template
+          v-for="submenuItem in moreMenuItem?.items"
+          :key="submenuItem.key"
+        >
+          <div
+            v-if="submenuItem.type === 'divider'"
+            v-show="submenuItem.visible !== false"
+            class="submenu-divider"
+          />
+          <button
+            v-else
+            v-show="submenuItem.visible !== false"
+            type="button"
+            class="help-menu-item submenu-item"
+            role="menuitem"
+            @click="submenuItem.action"
+          >
+            <span class="menu-label">{{ submenuItem.label }}</span>
+          </button>
+        </template>
+      </div>
+    </Teleport>
+
+    <!-- What's New Section -->
+    <section v-if="showVersionUpdates" class="whats-new-section">
+      <h3 class="section-description">{{ $t('helpCenter.whatsNew') }}</h3>
+
+      <!-- Release Items -->
+      <div v-if="hasReleases" role="group" aria-label="Recent releases">
+        <article
+          v-for="release in releaseStore.recentReleases"
+          :key="release.id || release.version"
+          class="help-menu-item release-menu-item"
+          role="button"
+          tabindex="0"
+          @click="onReleaseClick(release)"
+          @keydown.enter="onReleaseClick(release)"
+          @keydown.space.prevent="onReleaseClick(release)"
+        >
+          <i class="pi pi-refresh help-menu-icon" aria-hidden="true" />
+          <div class="release-content">
+            <span class="release-title">
+              {{
+                $t('g.releaseTitle', {
+                  package: 'Comfy',
+                  version: release.version
+                })
+              }}
+            </span>
+            <time class="release-date" :datetime="release.published_at">
+              <span class="normal-state">
+                {{ formatReleaseDate(release.published_at) }}
+              </span>
+              <span class="hover-state">
+                {{ $t('helpCenter.clickToLearnMore') }}
+              </span>
+            </time>
+          </div>
+          <Button
+            v-if="shouldShowUpdateButton(release)"
+            :label="$t('helpCenter.updateAvailable')"
+            size="small"
+            class="update-button"
+            @click.stop="onUpdate(release)"
+          />
+        </article>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-else-if="releaseStore.isLoading"
+        class="help-menu-item"
+        role="status"
+        aria-live="polite"
+      >
+        <i class="pi pi-spin pi-spinner help-menu-icon" aria-hidden="true" />
+        <span>{{ $t('helpCenter.loadingReleases') }}</span>
+      </div>
+
+      <!-- No Releases State -->
+      <div v-else class="help-menu-item" role="status">
+        <i class="pi pi-info-circle help-menu-icon" aria-hidden="true" />
+        <span>{{ $t('helpCenter.noRecentReleases') }}</span>
+      </div>
+    </section>
+  </div>
+</template>
+
 <style scoped>
 .help-center-menu {
   width: 380px;
diff --git a/src/components/icons/PuzzleIcon.vue b/src/components/icons/PuzzleIcon.vue
index 320b1cf376..72eeb77ace 100644
--- a/src/components/icons/PuzzleIcon.vue
+++ b/src/components/icons/PuzzleIcon.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: number | string
+  color?: string
+  class?: string
+}
+const {
+  size = 16,
+  color = 'currentColor',
+  class: className
+} = defineProps<Props>()
+const iconClass = computed(() => className || '')
+</script>
+
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -23,19 +39,3 @@
     </defs>
   </svg>
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  size?: number | string
-  color?: string
-  class?: string
-}
-const {
-  size = 16,
-  color = 'currentColor',
-  class: className
-} = defineProps<Props>()
-const iconClass = computed(() => className || '')
-</script>
diff --git a/src/components/icons/VerifiedIcon.vue b/src/components/icons/VerifiedIcon.vue
index c8072507aa..bdc09af13c 100644
--- a/src/components/icons/VerifiedIcon.vue
+++ b/src/components/icons/VerifiedIcon.vue
@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: number | string
+  color?: string
+  class?: string
+}
+const { size = 16, color = '#60A5FA', class: className } = defineProps<Props>()
+const iconClass = computed(() => className || '')
+</script>
+
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -13,15 +25,3 @@
     />
   </svg>
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  size?: number | string
-  color?: string
-  class?: string
-}
-const { size = 16, color = '#60A5FA', class: className } = defineProps<Props>()
-const iconClass = computed(() => className || '')
-</script>
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index d687c583b9..c53e899884 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -1,109 +1,3 @@
-<template>
-  <!--
-    Note: Unlike SingleSelect, we don't need an explicit options prop because:
-    1. Our value template only shows a static label (not dynamic based on selection)
-    2. We display a count badge instead of actual selected labels
-    3. All PrimeVue props (including options) are passed via v-bind="$attrs"
-    option-label="name" is required because our option template directly accesses option.name
-    max-selected-labels="0" is required to show count badge instead of selected item labels
-  -->
-  <MultiSelect
-    v-model="selectedItems"
-    v-bind="$attrs"
-    option-label="name"
-    unstyled
-    :max-selected-labels="0"
-    :pt="pt"
-    :aria-label="label || t('g.multiSelectDropdown')"
-    role="combobox"
-    :aria-expanded="false"
-    aria-haspopup="listbox"
-    :tabindex="0"
-  >
-    <template
-      v-if="showSearchBox || showSelectedCount || showClearButton"
-      #header
-    >
-      <div class="pt-2 pb-0 px-2 flex flex-col">
-        <SearchBox
-          v-if="showSearchBox"
-          v-model="searchQuery"
-          :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-          :show-order="true"
-          :show-border="true"
-          :place-holder="searchPlaceholder"
-        />
-        <div
-          v-if="showSelectedCount || showClearButton"
-          class="mt-2 flex items-center justify-between"
-        >
-          <span
-            v-if="showSelectedCount"
-            class="text-sm text-neutral-400 dark-theme:text-zinc-500 px-1"
-          >
-            {{
-              selectedCount > 0
-                ? $t('g.itemsSelected', { selectedCount })
-                : $t('g.itemSelected', { selectedCount })
-            }}
-          </span>
-          <TextButton
-            v-if="showClearButton"
-            :label="$t('g.clearAll')"
-            type="transparent"
-            size="fit-content"
-            class="text-sm text-blue-500 dark-theme:text-blue-600"
-            @click.stop="selectedItems = []"
-          />
-        </div>
-        <div class="my-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
-      </div>
-    </template>
-
-    <!-- Trigger value (keep text scale identical) -->
-    <template #value>
-      <span class="text-sm text-zinc-700 dark-theme:text-gray-200">
-        {{ label }}
-      </span>
-      <span
-        v-if="selectedCount > 0"
-        class="pointer-events-none absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 dark-theme:bg-blue-500 text-xs font-semibold text-white"
-      >
-        {{ selectedCount }}
-      </span>
-    </template>
-
-    <!-- Chevron size identical to current -->
-    <template #dropdownicon>
-      <i-lucide:chevron-down class="text-lg text-neutral-400" />
-    </template>
-
-    <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
-    <template #option="slotProps">
-      <div class="flex items-center gap-2" :style="popoverStyle">
-        <div
-          class="flex h-4 w-4 p-0.5 shrink-0 items-center justify-center rounded transition-all duration-200"
-          :class="
-            slotProps.selected
-              ? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
-              : 'bg-neutral-100 dark-theme:bg-zinc-700'
-          "
-        >
-          <i-lucide:check
-            v-if="slotProps.selected"
-            class="text-xs text-bold text-white"
-          />
-        </div>
-        <Button
-          class="border-none outline-none bg-transparent text-left"
-          unstyled
-          >{{ slotProps.option.name }}</Button
-        >
-      </div>
-    </template>
-  </MultiSelect>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
@@ -234,3 +128,109 @@ const pt = computed(() => ({
   }
 }))
 </script>
+
+<template>
+  <!--
+    Note: Unlike SingleSelect, we don't need an explicit options prop because:
+    1. Our value template only shows a static label (not dynamic based on selection)
+    2. We display a count badge instead of actual selected labels
+    3. All PrimeVue props (including options) are passed via v-bind="$attrs"
+    option-label="name" is required because our option template directly accesses option.name
+    max-selected-labels="0" is required to show count badge instead of selected item labels
+  -->
+  <MultiSelect
+    v-model="selectedItems"
+    v-bind="$attrs"
+    option-label="name"
+    unstyled
+    :max-selected-labels="0"
+    :pt="pt"
+    :aria-label="label || t('g.multiSelectDropdown')"
+    role="combobox"
+    :aria-expanded="false"
+    aria-haspopup="listbox"
+    :tabindex="0"
+  >
+    <template
+      v-if="showSearchBox || showSelectedCount || showClearButton"
+      #header
+    >
+      <div class="pt-2 pb-0 px-2 flex flex-col">
+        <SearchBox
+          v-if="showSearchBox"
+          v-model="searchQuery"
+          :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
+          :show-order="true"
+          :show-border="true"
+          :place-holder="searchPlaceholder"
+        />
+        <div
+          v-if="showSelectedCount || showClearButton"
+          class="mt-2 flex items-center justify-between"
+        >
+          <span
+            v-if="showSelectedCount"
+            class="text-sm text-neutral-400 dark-theme:text-zinc-500 px-1"
+          >
+            {{
+              selectedCount > 0
+                ? $t('g.itemsSelected', { selectedCount })
+                : $t('g.itemSelected', { selectedCount })
+            }}
+          </span>
+          <TextButton
+            v-if="showClearButton"
+            :label="$t('g.clearAll')"
+            type="transparent"
+            size="fit-content"
+            class="text-sm text-blue-500 dark-theme:text-blue-600"
+            @click.stop="selectedItems = []"
+          />
+        </div>
+        <div class="my-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
+      </div>
+    </template>
+
+    <!-- Trigger value (keep text scale identical) -->
+    <template #value>
+      <span class="text-sm text-zinc-700 dark-theme:text-gray-200">
+        {{ label }}
+      </span>
+      <span
+        v-if="selectedCount > 0"
+        class="pointer-events-none absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 dark-theme:bg-blue-500 text-xs font-semibold text-white"
+      >
+        {{ selectedCount }}
+      </span>
+    </template>
+
+    <!-- Chevron size identical to current -->
+    <template #dropdownicon>
+      <i-lucide:chevron-down class="text-lg text-neutral-400" />
+    </template>
+
+    <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
+    <template #option="slotProps">
+      <div class="flex items-center gap-2" :style="popoverStyle">
+        <div
+          class="flex h-4 w-4 p-0.5 shrink-0 items-center justify-center rounded transition-all duration-200"
+          :class="
+            slotProps.selected
+              ? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
+              : 'bg-neutral-100 dark-theme:bg-zinc-700'
+          "
+        >
+          <i-lucide:check
+            v-if="slotProps.selected"
+            class="text-xs text-bold text-white"
+          />
+        </div>
+        <Button
+          class="border-none outline-none bg-transparent text-left"
+          unstyled
+          >{{ slotProps.option.name }}</Button
+        >
+      </div>
+    </template>
+  </MultiSelect>
+</template>
diff --git a/src/components/input/SearchBox.vue b/src/components/input/SearchBox.vue
index 00d50cae22..363de7e258 100644
--- a/src/components/input/SearchBox.vue
+++ b/src/components/input/SearchBox.vue
@@ -1,16 +1,3 @@
-<template>
-  <div :class="wrapperStyle">
-    <i-lucide:search :class="iconColorStyle" />
-    <InputText
-      v-model="searchQuery"
-      :placeholder="placeHolder || 'Search...'"
-      type="text"
-      unstyled
-      :class="inputStyle"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
@@ -68,3 +55,16 @@ const iconColorStyle = computed(() => {
   )
 })
 </script>
+
+<template>
+  <div :class="wrapperStyle">
+    <i-lucide:search :class="iconColorStyle" />
+    <InputText
+      v-model="searchQuery"
+      :placeholder="placeHolder || 'Search...'"
+      type="text"
+      unstyled
+      :class="inputStyle"
+    />
+  </div>
+</template>
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index 87e6bc65ac..c66631545d 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -1,62 +1,3 @@
-<template>
-  <!--
-    Note: We explicitly pass options here (not just via $attrs) because:
-    1. Our custom value template needs options to look up labels from values
-    2. PrimeVue's value slot only provides 'value' and 'placeholder', not the selected item's label
-    3. We need to maintain the icon slot functionality in the value template
-    option-label="name" is required because our option template directly accesses option.name
-  -->
-  <Select
-    v-model="selectedItem"
-    v-bind="$attrs"
-    :options="options"
-    option-label="name"
-    option-value="value"
-    unstyled
-    :pt="pt"
-    :aria-label="label || t('g.singleSelectDropdown')"
-    role="combobox"
-    :aria-expanded="false"
-    aria-haspopup="listbox"
-    :tabindex="0"
-  >
-    <!-- Trigger value -->
-    <template #value="slotProps">
-      <div class="flex items-center gap-2 text-sm text-neutral-500">
-        <slot name="icon" />
-        <span
-          v-if="slotProps.value !== null && slotProps.value !== undefined"
-          class="text-zinc-700 dark-theme:text-gray-200"
-        >
-          {{ getLabel(slotProps.value) }}
-        </span>
-        <span v-else class="text-zinc-700 dark-theme:text-gray-200">
-          {{ label }}
-        </span>
-      </div>
-    </template>
-
-    <!-- Trigger caret -->
-    <template #dropdownicon>
-      <i-lucide:chevron-down class="text-base text-neutral-500" />
-    </template>
-
-    <!-- Option row -->
-    <template #option="{ option, selected }">
-      <div
-        class="flex items-center justify-between gap-3 w-full"
-        :style="optionStyle"
-      >
-        <span class="truncate">{{ option.name }}</span>
-        <i-lucide:check
-          v-if="selected"
-          class="text-neutral-600 dark-theme:text-white"
-        />
-      </div>
-    </template>
-  </Select>
-</template>
-
 <script setup lang="ts">
 import type { SelectPassThroughMethodOptions } from 'primevue/select'
 import Select from 'primevue/select'
@@ -189,3 +130,62 @@ const pt = computed(() => ({
   }
 }))
 </script>
+
+<template>
+  <!--
+    Note: We explicitly pass options here (not just via $attrs) because:
+    1. Our custom value template needs options to look up labels from values
+    2. PrimeVue's value slot only provides 'value' and 'placeholder', not the selected item's label
+    3. We need to maintain the icon slot functionality in the value template
+    option-label="name" is required because our option template directly accesses option.name
+  -->
+  <Select
+    v-model="selectedItem"
+    v-bind="$attrs"
+    :options="options"
+    option-label="name"
+    option-value="value"
+    unstyled
+    :pt="pt"
+    :aria-label="label || t('g.singleSelectDropdown')"
+    role="combobox"
+    :aria-expanded="false"
+    aria-haspopup="listbox"
+    :tabindex="0"
+  >
+    <!-- Trigger value -->
+    <template #value="slotProps">
+      <div class="flex items-center gap-2 text-sm text-neutral-500">
+        <slot name="icon" />
+        <span
+          v-if="slotProps.value !== null && slotProps.value !== undefined"
+          class="text-zinc-700 dark-theme:text-gray-200"
+        >
+          {{ getLabel(slotProps.value) }}
+        </span>
+        <span v-else class="text-zinc-700 dark-theme:text-gray-200">
+          {{ label }}
+        </span>
+      </div>
+    </template>
+
+    <!-- Trigger caret -->
+    <template #dropdownicon>
+      <i-lucide:chevron-down class="text-base text-neutral-500" />
+    </template>
+
+    <!-- Option row -->
+    <template #option="{ option, selected }">
+      <div
+        class="flex items-center justify-between gap-3 w-full"
+        :style="optionStyle"
+      >
+        <span class="truncate">{{ option.name }}</span>
+        <i-lucide:check
+          v-if="selected"
+          class="text-neutral-600 dark-theme:text-white"
+        />
+      </div>
+    </template>
+  </Select>
+</template>
diff --git a/src/components/install/DesktopSettingsConfiguration.vue b/src/components/install/DesktopSettingsConfiguration.vue
index 2868d11a76..52eee34844 100644
--- a/src/components/install/DesktopSettingsConfiguration.vue
+++ b/src/components/install/DesktopSettingsConfiguration.vue
@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import Dialog from 'primevue/dialog'
+import Divider from 'primevue/divider'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { ref } from 'vue'
+
+const showDialog = ref(false)
+const autoUpdate = defineModel<boolean>('autoUpdate', { required: true })
+const allowMetrics = defineModel<boolean>('allowMetrics', { required: true })
+
+const showMetricsInfo = () => {
+  showDialog.value = true
+}
+</script>
+
 <template>
   <div class="flex flex-col gap-6 w-[600px]">
     <div class="flex flex-col gap-4">
@@ -122,18 +137,3 @@
     </Dialog>
   </div>
 </template>
-
-<script setup lang="ts">
-import Dialog from 'primevue/dialog'
-import Divider from 'primevue/divider'
-import ToggleSwitch from 'primevue/toggleswitch'
-import { ref } from 'vue'
-
-const showDialog = ref(false)
-const autoUpdate = defineModel<boolean>('autoUpdate', { required: true })
-const allowMetrics = defineModel<boolean>('allowMetrics', { required: true })
-
-const showMetricsInfo = () => {
-  showDialog.value = true
-}
-</script>
diff --git a/src/components/install/GpuPicker.vue b/src/components/install/GpuPicker.vue
index 06275634fb..e7a1935bd7 100644
--- a/src/components/install/GpuPicker.vue
+++ b/src/components/install/GpuPicker.vue
@@ -1,3 +1,33 @@
+<script setup lang="ts">
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+import Tag from 'primevue/tag'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { electronAPI } from '@/utils/envUtil'
+
+const { t } = useI18n()
+
+const cpuMode = computed({
+  get: () => selected.value === 'cpu',
+  set: (value) => {
+    selected.value = value ? 'cpu' : null
+  }
+})
+const selected = defineModel<TorchDeviceType | null>('device', {
+  required: true
+})
+
+const electron = electronAPI()
+const platform = electron.getPlatform()
+
+const pickGpu = (value: typeof selected.value) => {
+  const newValue = selected.value === value ? null : value
+  selected.value = newValue
+}
+</script>
+
 <template>
   <div class="flex flex-col gap-6 w-[600px] h-[30rem] select-none">
     <!-- Installation Path Section -->
@@ -129,36 +159,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
-import Tag from 'primevue/tag'
-import ToggleSwitch from 'primevue/toggleswitch'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { electronAPI } from '@/utils/envUtil'
-
-const { t } = useI18n()
-
-const cpuMode = computed({
-  get: () => selected.value === 'cpu',
-  set: (value) => {
-    selected.value = value ? 'cpu' : null
-  }
-})
-const selected = defineModel<TorchDeviceType | null>('device', {
-  required: true
-})
-
-const electron = electronAPI()
-const platform = electron.getPlatform()
-
-const pickGpu = (value: typeof selected.value) => {
-  const newValue = selected.value === value ? null : value
-  selected.value = newValue
-}
-</script>
-
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/install/InstallLocationPicker.vue b/src/components/install/InstallLocationPicker.vue
index 33b32a5f98..8d716cb706 100644
--- a/src/components/install/InstallLocationPicker.vue
+++ b/src/components/install/InstallLocationPicker.vue
@@ -1,72 +1,3 @@
-<template>
-  <div class="flex flex-col gap-6 w-[600px]">
-    <!-- Installation Path Section -->
-    <div class="flex flex-col gap-4">
-      <h2 class="text-2xl font-semibold text-neutral-100">
-        {{ $t('install.chooseInstallationLocation') }}
-      </h2>
-
-      <p class="text-neutral-400 my-0">
-        {{ $t('install.installLocationDescription') }}
-      </p>
-
-      <div class="flex gap-2">
-        <IconField class="flex-1">
-          <InputText
-            v-model="installPath"
-            class="w-full"
-            :class="{ 'p-invalid': pathError }"
-            @update:model-value="validatePath"
-            @focus="onFocus"
-          />
-          <InputIcon
-            v-tooltip.top="$t('install.installLocationTooltip')"
-            class="pi pi-info-circle"
-          />
-        </IconField>
-        <Button icon="pi pi-folder" class="w-12" @click="browsePath" />
-      </div>
-
-      <Message v-if="pathError" severity="error" class="whitespace-pre-line">
-        {{ pathError }}
-      </Message>
-      <Message v-if="pathExists" severity="warn">
-        {{ $t('install.pathExists') }}
-      </Message>
-      <Message v-if="nonDefaultDrive" severity="warn">
-        {{ $t('install.nonDefaultDrive') }}
-      </Message>
-    </div>
-
-    <!-- System Paths Info -->
-    <div class="bg-neutral-800 p-4 rounded-lg">
-      <h3 class="text-lg font-medium mt-0 mb-3 text-neutral-100">
-        {{ $t('install.systemLocations') }}
-      </h3>
-      <div class="flex flex-col gap-2">
-        <div class="flex items-center gap-2">
-          <i class="pi pi-folder text-neutral-400" />
-          <span class="text-neutral-400">App Data:</span>
-          <span class="text-neutral-200">{{ appData }}</span>
-          <span
-            v-tooltip="$t('install.appDataLocationTooltip')"
-            class="pi pi-info-circle"
-          />
-        </div>
-        <div class="flex items-center gap-2">
-          <i class="pi pi-desktop text-neutral-400" />
-          <span class="text-neutral-400">App Path:</span>
-          <span class="text-neutral-200">{{ appPath }}</span>
-          <span
-            v-tooltip="$t('install.appPathLocationTooltip')"
-            class="pi pi-info-circle"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import IconField from 'primevue/iconfield'
@@ -151,3 +82,72 @@ const onFocus = async () => {
   await validatePath(installPath.value)
 }
 </script>
+
+<template>
+  <div class="flex flex-col gap-6 w-[600px]">
+    <!-- Installation Path Section -->
+    <div class="flex flex-col gap-4">
+      <h2 class="text-2xl font-semibold text-neutral-100">
+        {{ $t('install.chooseInstallationLocation') }}
+      </h2>
+
+      <p class="text-neutral-400 my-0">
+        {{ $t('install.installLocationDescription') }}
+      </p>
+
+      <div class="flex gap-2">
+        <IconField class="flex-1">
+          <InputText
+            v-model="installPath"
+            class="w-full"
+            :class="{ 'p-invalid': pathError }"
+            @update:model-value="validatePath"
+            @focus="onFocus"
+          />
+          <InputIcon
+            v-tooltip.top="$t('install.installLocationTooltip')"
+            class="pi pi-info-circle"
+          />
+        </IconField>
+        <Button icon="pi pi-folder" class="w-12" @click="browsePath" />
+      </div>
+
+      <Message v-if="pathError" severity="error" class="whitespace-pre-line">
+        {{ pathError }}
+      </Message>
+      <Message v-if="pathExists" severity="warn">
+        {{ $t('install.pathExists') }}
+      </Message>
+      <Message v-if="nonDefaultDrive" severity="warn">
+        {{ $t('install.nonDefaultDrive') }}
+      </Message>
+    </div>
+
+    <!-- System Paths Info -->
+    <div class="bg-neutral-800 p-4 rounded-lg">
+      <h3 class="text-lg font-medium mt-0 mb-3 text-neutral-100">
+        {{ $t('install.systemLocations') }}
+      </h3>
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-2">
+          <i class="pi pi-folder text-neutral-400" />
+          <span class="text-neutral-400">App Data:</span>
+          <span class="text-neutral-200">{{ appData }}</span>
+          <span
+            v-tooltip="$t('install.appDataLocationTooltip')"
+            class="pi pi-info-circle"
+          />
+        </div>
+        <div class="flex items-center gap-2">
+          <i class="pi pi-desktop text-neutral-400" />
+          <span class="text-neutral-400">App Path:</span>
+          <span class="text-neutral-200">{{ appPath }}</span>
+          <span
+            v-tooltip="$t('install.appPathLocationTooltip')"
+            class="pi pi-info-circle"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/install/MigrationPicker.vue b/src/components/install/MigrationPicker.vue
index 934ffc2f32..c160d3f320 100644
--- a/src/components/install/MigrationPicker.vue
+++ b/src/components/install/MigrationPicker.vue
@@ -1,72 +1,3 @@
-<template>
-  <div class="flex flex-col gap-6 w-[600px]">
-    <!-- Source Location Section -->
-    <div class="flex flex-col gap-4">
-      <h2 class="text-2xl font-semibold text-neutral-100">
-        {{ $t('install.migrateFromExistingInstallation') }}
-      </h2>
-
-      <p class="text-neutral-400 my-0">
-        {{ $t('install.migrationSourcePathDescription') }}
-      </p>
-
-      <div class="flex gap-2">
-        <InputText
-          v-model="sourcePath"
-          placeholder="Select existing ComfyUI installation (optional)"
-          class="flex-1"
-          :class="{ 'p-invalid': pathError }"
-          @update:model-value="validateSource"
-        />
-        <Button icon="pi pi-folder" class="w-12" @click="browsePath" />
-      </div>
-
-      <Message v-if="pathError" severity="error">
-        {{ pathError }}
-      </Message>
-    </div>
-
-    <!-- Migration Options -->
-    <div
-      v-if="isValidSource"
-      class="flex flex-col gap-4 bg-neutral-800 p-4 rounded-lg"
-    >
-      <h3 class="text-lg mt-0 font-medium text-neutral-100">
-        {{ $t('install.selectItemsToMigrate') }}
-      </h3>
-
-      <div class="flex flex-col gap-3">
-        <div
-          v-for="item in migrationItems"
-          :key="item.id"
-          class="flex items-center gap-3 p-2 hover:bg-neutral-700 rounded"
-          @click="item.selected = !item.selected"
-        >
-          <Checkbox
-            v-model="item.selected"
-            :input-id="item.id"
-            :binary="true"
-            @click.stop
-          />
-          <div>
-            <label :for="item.id" class="text-neutral-200 font-medium">
-              {{ item.label }}
-            </label>
-            <p class="text-sm text-neutral-400 my-1">
-              {{ item.description }}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Skip Migration -->
-    <div v-else class="text-neutral-400 italic">
-      {{ $t('install.migrationOptional') }}
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { MigrationItems } from '@comfyorg/comfyui-electron-types'
 import Button from 'primevue/button'
@@ -135,3 +66,72 @@ watchEffect(() => {
     .map((item) => item.id)
 })
 </script>
+
+<template>
+  <div class="flex flex-col gap-6 w-[600px]">
+    <!-- Source Location Section -->
+    <div class="flex flex-col gap-4">
+      <h2 class="text-2xl font-semibold text-neutral-100">
+        {{ $t('install.migrateFromExistingInstallation') }}
+      </h2>
+
+      <p class="text-neutral-400 my-0">
+        {{ $t('install.migrationSourcePathDescription') }}
+      </p>
+
+      <div class="flex gap-2">
+        <InputText
+          v-model="sourcePath"
+          placeholder="Select existing ComfyUI installation (optional)"
+          class="flex-1"
+          :class="{ 'p-invalid': pathError }"
+          @update:model-value="validateSource"
+        />
+        <Button icon="pi pi-folder" class="w-12" @click="browsePath" />
+      </div>
+
+      <Message v-if="pathError" severity="error">
+        {{ pathError }}
+      </Message>
+    </div>
+
+    <!-- Migration Options -->
+    <div
+      v-if="isValidSource"
+      class="flex flex-col gap-4 bg-neutral-800 p-4 rounded-lg"
+    >
+      <h3 class="text-lg mt-0 font-medium text-neutral-100">
+        {{ $t('install.selectItemsToMigrate') }}
+      </h3>
+
+      <div class="flex flex-col gap-3">
+        <div
+          v-for="item in migrationItems"
+          :key="item.id"
+          class="flex items-center gap-3 p-2 hover:bg-neutral-700 rounded"
+          @click="item.selected = !item.selected"
+        >
+          <Checkbox
+            v-model="item.selected"
+            :input-id="item.id"
+            :binary="true"
+            @click.stop
+          />
+          <div>
+            <label :for="item.id" class="text-neutral-200 font-medium">
+              {{ item.label }}
+            </label>
+            <p class="text-sm text-neutral-400 my-1">
+              {{ item.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Skip Migration -->
+    <div v-else class="text-neutral-400 italic">
+      {{ $t('install.migrationOptional') }}
+    </div>
+  </div>
+</template>
diff --git a/src/components/install/MirrorsConfiguration.vue b/src/components/install/MirrorsConfiguration.vue
index c4c3565d69..202b9aad54 100644
--- a/src/components/install/MirrorsConfiguration.vue
+++ b/src/components/install/MirrorsConfiguration.vue
@@ -1,38 +1,3 @@
-<template>
-  <Panel
-    :header="$t('install.settings.mirrorSettings')"
-    toggleable
-    :collapsed="!showMirrorInputs"
-    pt:root="bg-neutral-800 border-none w-[600px]"
-  >
-    <template
-      v-for="([item, modelValue], index) in mirrors"
-      :key="item.settingId + item.mirror"
-    >
-      <Divider v-if="index > 0" />
-
-      <MirrorItem
-        v-model="modelValue.value"
-        :item="item"
-        @state-change="validationStates[index] = $event"
-      />
-    </template>
-    <template #icons>
-      <i
-        v-tooltip="validationStateTooltip"
-        :class="{
-          'pi pi-spin pi-spinner text-neutral-400':
-            validationState === ValidationState.LOADING,
-          'pi pi-check text-green-500':
-            validationState === ValidationState.VALID,
-          'pi pi-times text-red-500':
-            validationState === ValidationState.INVALID
-        }"
-      />
-    </template>
-  </Panel>
-</template>
-
 <script setup lang="ts">
 import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
@@ -119,3 +84,38 @@ const validationStateTooltip = computed(() => {
   }
 })
 </script>
+
+<template>
+  <Panel
+    :header="$t('install.settings.mirrorSettings')"
+    toggleable
+    :collapsed="!showMirrorInputs"
+    pt:root="bg-neutral-800 border-none w-[600px]"
+  >
+    <template
+      v-for="([item, modelValue], index) in mirrors"
+      :key="item.settingId + item.mirror"
+    >
+      <Divider v-if="index > 0" />
+
+      <MirrorItem
+        v-model="modelValue.value"
+        :item="item"
+        @state-change="validationStates[index] = $event"
+      />
+    </template>
+    <template #icons>
+      <i
+        v-tooltip="validationStateTooltip"
+        :class="{
+          'pi pi-spin pi-spinner text-neutral-400':
+            validationState === ValidationState.LOADING,
+          'pi pi-check text-green-500':
+            validationState === ValidationState.VALID,
+          'pi pi-times text-red-500':
+            validationState === ValidationState.INVALID
+        }"
+      />
+    </template>
+  </Panel>
+</template>
diff --git a/src/components/install/mirror/MirrorItem.vue b/src/components/install/mirror/MirrorItem.vue
index a4c5b563c4..2e916a1022 100644
--- a/src/components/install/mirror/MirrorItem.vue
+++ b/src/components/install/mirror/MirrorItem.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="flex flex-col items-center gap-4">
-    <div class="w-full">
-      <h3 class="text-lg font-medium text-neutral-100">
-        {{ $t(`settings.${normalizedSettingId}.name`) }}
-      </h3>
-      <p class="text-sm text-neutral-400 mt-1">
-        {{ $t(`settings.${normalizedSettingId}.tooltip`) }}
-      </p>
-    </div>
-    <UrlInput
-      v-model="modelValue"
-      :validate-url-fn="
-        (mirror: string) =>
-          checkMirrorReachable(mirror + (item.validationPathSuffix ?? ''))
-      "
-      @state-change="validationState = $event"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 
@@ -59,3 +38,24 @@ watch(validationState, (newState) => {
   }
 })
 </script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="w-full">
+      <h3 class="text-lg font-medium text-neutral-100">
+        {{ $t(`settings.${normalizedSettingId}.name`) }}
+      </h3>
+      <p class="text-sm text-neutral-400 mt-1">
+        {{ $t(`settings.${normalizedSettingId}.tooltip`) }}
+      </p>
+    </div>
+    <UrlInput
+      v-model="modelValue"
+      :validate-url-fn="
+        (mirror: string) =>
+          checkMirrorReachable(mirror + (item.validationPathSuffix ?? ''))
+      "
+      @state-change="validationState = $event"
+    />
+  </div>
+</template>
diff --git a/src/components/load3d/Load3D.vue b/src/components/load3d/Load3D.vue
index 23245edc94..8a7a2065fd 100644
--- a/src/components/load3d/Load3D.vue
+++ b/src/components/load3d/Load3D.vue
@@ -1,91 +1,3 @@
-<template>
-  <div
-    class="relative w-full h-full"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-  >
-    <Load3DScene
-      ref="load3DSceneRef"
-      :node="node"
-      :input-spec="inputSpec"
-      :background-color="backgroundColor"
-      :show-grid="showGrid"
-      :light-intensity="lightIntensity"
-      :fov="fov"
-      :camera-type="cameraType"
-      :show-preview="showPreview"
-      :background-image="backgroundImage"
-      :up-direction="upDirection"
-      :material-mode="materialMode"
-      :edge-threshold="edgeThreshold"
-      @material-mode-change="listenMaterialModeChange"
-      @background-color-change="listenBackgroundColorChange"
-      @light-intensity-change="listenLightIntensityChange"
-      @fov-change="listenFOVChange"
-      @camera-type-change="listenCameraTypeChange"
-      @show-grid-change="listenShowGridChange"
-      @show-preview-change="listenShowPreviewChange"
-      @background-image-change="listenBackgroundImageChange"
-      @up-direction-change="listenUpDirectionChange"
-      @edge-threshold-change="listenEdgeThresholdChange"
-      @recording-status-change="listenRecordingStatusChange"
-    />
-    <Load3DControls
-      :input-spec="inputSpec"
-      :background-color="backgroundColor"
-      :show-grid="showGrid"
-      :show-preview="showPreview"
-      :light-intensity="lightIntensity"
-      :show-light-intensity-button="showLightIntensityButton"
-      :fov="fov"
-      :show-f-o-v-button="showFOVButton"
-      :show-preview-button="showPreviewButton"
-      :camera-type="cameraType"
-      :has-background-image="hasBackgroundImage"
-      :up-direction="upDirection"
-      :material-mode="materialMode"
-      :edge-threshold="edgeThreshold"
-      @update-background-image="handleBackgroundImageUpdate"
-      @switch-camera="switchCamera"
-      @toggle-grid="toggleGrid"
-      @update-background-color="handleBackgroundColorChange"
-      @update-light-intensity="handleUpdateLightIntensity"
-      @toggle-preview="togglePreview"
-      @update-f-o-v="handleUpdateFOV"
-      @update-up-direction="handleUpdateUpDirection"
-      @update-material-mode="handleUpdateMaterialMode"
-      @update-edge-threshold="handleUpdateEdgeThreshold"
-      @export-model="handleExportModel"
-    />
-    <div
-      v-if="enable3DViewer"
-      class="absolute top-12 right-2 z-20 pointer-events-auto"
-    >
-      <ViewerControls :node="node" />
-    </div>
-
-    <div
-      v-if="showRecordingControls"
-      class="absolute right-2 z-20 pointer-events-auto"
-      :class="{
-        'top-12': !enable3DViewer,
-        'top-24': enable3DViewer
-      }"
-    >
-      <RecordingControls
-        :node="node"
-        :is-recording="isRecording"
-        :has-recording="hasRecording"
-        :recording-duration="recordingDuration"
-        @start-recording="handleStartRecording"
-        @stop-recording="handleStopRecording"
-        @export-recording="handleExportRecording"
-        @clear-recording="handleClearRecording"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -334,3 +246,91 @@ const listenBackgroundImageChange = (value: string) => {
   }
 }
 </script>
+
+<template>
+  <div
+    class="relative w-full h-full"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <Load3DScene
+      ref="load3DSceneRef"
+      :node="node"
+      :input-spec="inputSpec"
+      :background-color="backgroundColor"
+      :show-grid="showGrid"
+      :light-intensity="lightIntensity"
+      :fov="fov"
+      :camera-type="cameraType"
+      :show-preview="showPreview"
+      :background-image="backgroundImage"
+      :up-direction="upDirection"
+      :material-mode="materialMode"
+      :edge-threshold="edgeThreshold"
+      @material-mode-change="listenMaterialModeChange"
+      @background-color-change="listenBackgroundColorChange"
+      @light-intensity-change="listenLightIntensityChange"
+      @fov-change="listenFOVChange"
+      @camera-type-change="listenCameraTypeChange"
+      @show-grid-change="listenShowGridChange"
+      @show-preview-change="listenShowPreviewChange"
+      @background-image-change="listenBackgroundImageChange"
+      @up-direction-change="listenUpDirectionChange"
+      @edge-threshold-change="listenEdgeThresholdChange"
+      @recording-status-change="listenRecordingStatusChange"
+    />
+    <Load3DControls
+      :input-spec="inputSpec"
+      :background-color="backgroundColor"
+      :show-grid="showGrid"
+      :show-preview="showPreview"
+      :light-intensity="lightIntensity"
+      :show-light-intensity-button="showLightIntensityButton"
+      :fov="fov"
+      :show-f-o-v-button="showFOVButton"
+      :show-preview-button="showPreviewButton"
+      :camera-type="cameraType"
+      :has-background-image="hasBackgroundImage"
+      :up-direction="upDirection"
+      :material-mode="materialMode"
+      :edge-threshold="edgeThreshold"
+      @update-background-image="handleBackgroundImageUpdate"
+      @switch-camera="switchCamera"
+      @toggle-grid="toggleGrid"
+      @update-background-color="handleBackgroundColorChange"
+      @update-light-intensity="handleUpdateLightIntensity"
+      @toggle-preview="togglePreview"
+      @update-f-o-v="handleUpdateFOV"
+      @update-up-direction="handleUpdateUpDirection"
+      @update-material-mode="handleUpdateMaterialMode"
+      @update-edge-threshold="handleUpdateEdgeThreshold"
+      @export-model="handleExportModel"
+    />
+    <div
+      v-if="enable3DViewer"
+      class="absolute top-12 right-2 z-20 pointer-events-auto"
+    >
+      <ViewerControls :node="node" />
+    </div>
+
+    <div
+      v-if="showRecordingControls"
+      class="absolute right-2 z-20 pointer-events-auto"
+      :class="{
+        'top-12': !enable3DViewer,
+        'top-24': enable3DViewer
+      }"
+    >
+      <RecordingControls
+        :node="node"
+        :is-recording="isRecording"
+        :has-recording="hasRecording"
+        :recording-duration="recordingDuration"
+        @start-recording="handleStartRecording"
+        @stop-recording="handleStopRecording"
+        @export-recording="handleExportRecording"
+        @clear-recording="handleClearRecording"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/load3d/Load3DAnimation.vue b/src/components/load3d/Load3DAnimation.vue
index 9d29c1ed14..16f4988464 100644
--- a/src/components/load3d/Load3DAnimation.vue
+++ b/src/components/load3d/Load3DAnimation.vue
@@ -1,90 +1,3 @@
-<template>
-  <div
-    class="relative w-full h-full"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-  >
-    <Load3DAnimationScene
-      ref="load3DAnimationSceneRef"
-      :node="node"
-      :input-spec="inputSpec"
-      :background-color="backgroundColor"
-      :show-grid="showGrid"
-      :light-intensity="lightIntensity"
-      :fov="fov"
-      :camera-type="cameraType"
-      :show-preview="showPreview"
-      :show-f-o-v-button="showFOVButton"
-      :show-light-intensity-button="showLightIntensityButton"
-      :playing="playing"
-      :selected-speed="selectedSpeed"
-      :selected-animation="selectedAnimation"
-      :background-image="backgroundImage"
-      :up-direction="upDirection"
-      :material-mode="materialMode"
-      @material-mode-change="listenMaterialModeChange"
-      @background-color-change="listenBackgroundColorChange"
-      @light-intensity-change="listenLightIntensityChange"
-      @fov-change="listenFOVChange"
-      @camera-type-change="listenCameraTypeChange"
-      @show-grid-change="listenShowGridChange"
-      @show-preview-change="listenShowPreviewChange"
-      @background-image-change="listenBackgroundImageChange"
-      @animation-list-change="animationListChange"
-      @up-direction-change="listenUpDirectionChange"
-      @recording-status-change="listenRecordingStatusChange"
-    />
-    <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
-      <Load3DControls
-        :input-spec="inputSpec"
-        :background-color="backgroundColor"
-        :show-grid="showGrid"
-        :show-preview="showPreview"
-        :light-intensity="lightIntensity"
-        :show-light-intensity-button="showLightIntensityButton"
-        :fov="fov"
-        :show-f-o-v-button="showFOVButton"
-        :show-preview-button="showPreviewButton"
-        :camera-type="cameraType"
-        :has-background-image="hasBackgroundImage"
-        :up-direction="upDirection"
-        :material-mode="materialMode"
-        @update-background-image="handleBackgroundImageUpdate"
-        @switch-camera="switchCamera"
-        @toggle-grid="toggleGrid"
-        @update-background-color="handleBackgroundColorChange"
-        @update-light-intensity="handleUpdateLightIntensity"
-        @toggle-preview="togglePreview"
-        @update-f-o-v="handleUpdateFOV"
-        @update-up-direction="handleUpdateUpDirection"
-        @update-material-mode="handleUpdateMaterialMode"
-      />
-      <Load3DAnimationControls
-        :animations="animations"
-        :playing="playing"
-        @toggle-play="togglePlay"
-        @speed-change="speedChange"
-        @animation-change="animationChange"
-      />
-    </div>
-    <div
-      v-if="showRecordingControls"
-      class="absolute top-12 right-2 z-20 pointer-events-auto"
-    >
-      <RecordingControls
-        :node="node"
-        :is-recording="isRecording"
-        :has-recording="hasRecording"
-        :recording-duration="recordingDuration"
-        @start-recording="handleStartRecording"
-        @stop-recording="handleStopRecording"
-        @export-recording="handleExportRecording"
-        @clear-recording="handleClearRecording"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
@@ -334,3 +247,90 @@ const listenBackgroundImageChange = (value: string) => {
   }
 }
 </script>
+
+<template>
+  <div
+    class="relative w-full h-full"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <Load3DAnimationScene
+      ref="load3DAnimationSceneRef"
+      :node="node"
+      :input-spec="inputSpec"
+      :background-color="backgroundColor"
+      :show-grid="showGrid"
+      :light-intensity="lightIntensity"
+      :fov="fov"
+      :camera-type="cameraType"
+      :show-preview="showPreview"
+      :show-f-o-v-button="showFOVButton"
+      :show-light-intensity-button="showLightIntensityButton"
+      :playing="playing"
+      :selected-speed="selectedSpeed"
+      :selected-animation="selectedAnimation"
+      :background-image="backgroundImage"
+      :up-direction="upDirection"
+      :material-mode="materialMode"
+      @material-mode-change="listenMaterialModeChange"
+      @background-color-change="listenBackgroundColorChange"
+      @light-intensity-change="listenLightIntensityChange"
+      @fov-change="listenFOVChange"
+      @camera-type-change="listenCameraTypeChange"
+      @show-grid-change="listenShowGridChange"
+      @show-preview-change="listenShowPreviewChange"
+      @background-image-change="listenBackgroundImageChange"
+      @animation-list-change="animationListChange"
+      @up-direction-change="listenUpDirectionChange"
+      @recording-status-change="listenRecordingStatusChange"
+    />
+    <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
+      <Load3DControls
+        :input-spec="inputSpec"
+        :background-color="backgroundColor"
+        :show-grid="showGrid"
+        :show-preview="showPreview"
+        :light-intensity="lightIntensity"
+        :show-light-intensity-button="showLightIntensityButton"
+        :fov="fov"
+        :show-f-o-v-button="showFOVButton"
+        :show-preview-button="showPreviewButton"
+        :camera-type="cameraType"
+        :has-background-image="hasBackgroundImage"
+        :up-direction="upDirection"
+        :material-mode="materialMode"
+        @update-background-image="handleBackgroundImageUpdate"
+        @switch-camera="switchCamera"
+        @toggle-grid="toggleGrid"
+        @update-background-color="handleBackgroundColorChange"
+        @update-light-intensity="handleUpdateLightIntensity"
+        @toggle-preview="togglePreview"
+        @update-f-o-v="handleUpdateFOV"
+        @update-up-direction="handleUpdateUpDirection"
+        @update-material-mode="handleUpdateMaterialMode"
+      />
+      <Load3DAnimationControls
+        :animations="animations"
+        :playing="playing"
+        @toggle-play="togglePlay"
+        @speed-change="speedChange"
+        @animation-change="animationChange"
+      />
+    </div>
+    <div
+      v-if="showRecordingControls"
+      class="absolute top-12 right-2 z-20 pointer-events-auto"
+    >
+      <RecordingControls
+        :node="node"
+        :is-recording="isRecording"
+        :has-recording="hasRecording"
+        :recording-duration="recordingDuration"
+        @start-recording="handleStartRecording"
+        @stop-recording="handleStopRecording"
+        @export-recording="handleExportRecording"
+        @clear-recording="handleClearRecording"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/load3d/Load3DAnimationControls.vue b/src/components/load3d/Load3DAnimationControls.vue
index 1d619e34a6..b3dde7ef63 100644
--- a/src/components/load3d/Load3DAnimationControls.vue
+++ b/src/components/load3d/Load3DAnimationControls.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    v-if="animations && animations.length > 0"
-    class="absolute top-0 left-0 w-full flex justify-center pt-2 gap-2 items-center pointer-events-auto z-10"
-  >
-    <Button class="p-button-rounded p-button-text" @click="togglePlay">
-      <i
-        :class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-white text-lg']"
-      />
-    </Button>
-
-    <Select
-      v-model="selectedSpeed"
-      :options="speedOptions"
-      option-label="name"
-      option-value="value"
-      class="w-24"
-      @change="speedChange"
-    />
-
-    <Select
-      v-model="selectedAnimation"
-      :options="animations"
-      option-label="name"
-      option-value="index"
-      class="w-32"
-      @change="animationChange"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Select from 'primevue/select'
@@ -79,3 +48,34 @@ const animationChange = () => {
   emit('animationChange', selectedAnimation.value)
 }
 </script>
+
+<template>
+  <div
+    v-if="animations && animations.length > 0"
+    class="absolute top-0 left-0 w-full flex justify-center pt-2 gap-2 items-center pointer-events-auto z-10"
+  >
+    <Button class="p-button-rounded p-button-text" @click="togglePlay">
+      <i
+        :class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-white text-lg']"
+      />
+    </Button>
+
+    <Select
+      v-model="selectedSpeed"
+      :options="speedOptions"
+      option-label="name"
+      option-value="value"
+      class="w-24"
+      @change="speedChange"
+    />
+
+    <Select
+      v-model="selectedAnimation"
+      :options="animations"
+      option-label="name"
+      option-value="index"
+      class="w-32"
+      @change="animationChange"
+    />
+  </div>
+</template>
diff --git a/src/components/load3d/Load3DAnimationScene.vue b/src/components/load3d/Load3DAnimationScene.vue
index 38cbd7169b..b5d214f923 100644
--- a/src/components/load3d/Load3DAnimationScene.vue
+++ b/src/components/load3d/Load3DAnimationScene.vue
@@ -1,28 +1,3 @@
-<template>
-  <Load3DScene
-    ref="load3DSceneRef"
-    :node="node"
-    :input-spec="inputSpec"
-    :background-color="backgroundColor"
-    :show-grid="showGrid"
-    :light-intensity="lightIntensity"
-    :fov="fov"
-    :camera-type="cameraType"
-    :show-preview="showPreview"
-    :extra-listeners="animationListeners"
-    :background-image="backgroundImage"
-    :up-direction="upDirection"
-    :material-mode="materialMode"
-    @material-mode-change="listenMaterialModeChange"
-    @background-color-change="listenBackgroundColorChange"
-    @light-intensity-change="listenLightIntensityChange"
-    @fov-change="listenFOVChange"
-    @camera-type-change="listenCameraTypeChange"
-    @show-grid-change="listenShowGridChange"
-    @show-preview-change="listenShowPreviewChange"
-    @recording-status-change="listenRecordingStatusChange"
-  />
-</template>
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
@@ -206,3 +181,28 @@ defineExpose({
   load3DSceneRef
 })
 </script>
+<template>
+  <Load3DScene
+    ref="load3DSceneRef"
+    :node="node"
+    :input-spec="inputSpec"
+    :background-color="backgroundColor"
+    :show-grid="showGrid"
+    :light-intensity="lightIntensity"
+    :fov="fov"
+    :camera-type="cameraType"
+    :show-preview="showPreview"
+    :extra-listeners="animationListeners"
+    :background-image="backgroundImage"
+    :up-direction="upDirection"
+    :material-mode="materialMode"
+    @material-mode-change="listenMaterialModeChange"
+    @background-color-change="listenBackgroundColorChange"
+    @light-intensity-change="listenLightIntensityChange"
+    @fov-change="listenFOVChange"
+    @camera-type-change="listenCameraTypeChange"
+    @show-grid-change="listenShowGridChange"
+    @show-preview-change="listenShowPreviewChange"
+    @recording-status-change="listenRecordingStatusChange"
+  />
+</template>
diff --git a/src/components/load3d/Load3DControls.vue b/src/components/load3d/Load3DControls.vue
index eea5208b32..8e66262465 100644
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -1,94 +1,3 @@
-<template>
-  <div
-    class="absolute top-12 left-2 flex flex-col pointer-events-auto z-20 bg-gray-700/30 rounded-lg"
-  >
-    <div class="relative show-menu">
-      <Button class="p-button-rounded p-button-text" @click="toggleMenu">
-        <i class="pi pi-bars text-white text-lg" />
-      </Button>
-
-      <div
-        v-show="isMenuOpen"
-        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
-      >
-        <div class="flex flex-col">
-          <Button
-            v-for="category in availableCategories"
-            :key="category"
-            class="p-button-text w-full flex items-center justify-start"
-            :class="{ 'bg-gray-600': activeCategory === category }"
-            @click="selectCategory(category)"
-          >
-            <i :class="getCategoryIcon(category)" />
-            <span class="text-white">{{ t(categoryLabels[category]) }}</span>
-          </Button>
-        </div>
-      </div>
-    </div>
-
-    <div v-show="activeCategory" class="bg-gray-700/30 rounded-lg">
-      <SceneControls
-        v-if="activeCategory === 'scene'"
-        ref="sceneControlsRef"
-        :background-color="backgroundColor"
-        :show-grid="showGrid"
-        :has-background-image="hasBackgroundImage"
-        @toggle-grid="handleToggleGrid"
-        @update-background-color="handleBackgroundColorChange"
-        @update-background-image="handleBackgroundImageUpdate"
-      />
-
-      <ModelControls
-        v-if="activeCategory === 'model'"
-        ref="modelControlsRef"
-        :input-spec="inputSpec"
-        :up-direction="upDirection"
-        :material-mode="materialMode"
-        :edge-threshold="edgeThreshold"
-        @update-up-direction="handleUpdateUpDirection"
-        @update-material-mode="handleUpdateMaterialMode"
-        @update-edge-threshold="handleUpdateEdgeThreshold"
-      />
-
-      <CameraControls
-        v-if="activeCategory === 'camera'"
-        ref="cameraControlsRef"
-        :camera-type="cameraType"
-        :fov="fov"
-        :show-f-o-v-button="showFOVButton"
-        @switch-camera="switchCamera"
-        @update-f-o-v="handleUpdateFOV"
-      />
-
-      <LightControls
-        v-if="activeCategory === 'light'"
-        ref="lightControlsRef"
-        :light-intensity="lightIntensity"
-        :show-light-intensity-button="showLightIntensityButton"
-        @update-light-intensity="handleUpdateLightIntensity"
-      />
-
-      <ExportControls
-        v-if="activeCategory === 'export'"
-        ref="exportControlsRef"
-        @export-model="handleExportModel"
-      />
-    </div>
-    <div v-if="showPreviewButton">
-      <Button class="p-button-rounded p-button-text" @click="togglePreview">
-        <i
-          v-tooltip.right="{ value: t('load3d.previewOutput'), showDelay: 300 }"
-          :class="[
-            'pi',
-            showPreview ? 'pi-eye' : 'pi-eye-slash',
-            'text-white text-lg'
-          ]"
-        />
-      </Button>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
@@ -350,3 +259,94 @@ onUnmounted(() => {
   document.removeEventListener('click', closeSlider)
 })
 </script>
+
+<template>
+  <div
+    class="absolute top-12 left-2 flex flex-col pointer-events-auto z-20 bg-gray-700/30 rounded-lg"
+  >
+    <div class="relative show-menu">
+      <Button class="p-button-rounded p-button-text" @click="toggleMenu">
+        <i class="pi pi-bars text-white text-lg" />
+      </Button>
+
+      <div
+        v-show="isMenuOpen"
+        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
+      >
+        <div class="flex flex-col">
+          <Button
+            v-for="category in availableCategories"
+            :key="category"
+            class="p-button-text w-full flex items-center justify-start"
+            :class="{ 'bg-gray-600': activeCategory === category }"
+            @click="selectCategory(category)"
+          >
+            <i :class="getCategoryIcon(category)" />
+            <span class="text-white">{{ t(categoryLabels[category]) }}</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <div v-show="activeCategory" class="bg-gray-700/30 rounded-lg">
+      <SceneControls
+        v-if="activeCategory === 'scene'"
+        ref="sceneControlsRef"
+        :background-color="backgroundColor"
+        :show-grid="showGrid"
+        :has-background-image="hasBackgroundImage"
+        @toggle-grid="handleToggleGrid"
+        @update-background-color="handleBackgroundColorChange"
+        @update-background-image="handleBackgroundImageUpdate"
+      />
+
+      <ModelControls
+        v-if="activeCategory === 'model'"
+        ref="modelControlsRef"
+        :input-spec="inputSpec"
+        :up-direction="upDirection"
+        :material-mode="materialMode"
+        :edge-threshold="edgeThreshold"
+        @update-up-direction="handleUpdateUpDirection"
+        @update-material-mode="handleUpdateMaterialMode"
+        @update-edge-threshold="handleUpdateEdgeThreshold"
+      />
+
+      <CameraControls
+        v-if="activeCategory === 'camera'"
+        ref="cameraControlsRef"
+        :camera-type="cameraType"
+        :fov="fov"
+        :show-f-o-v-button="showFOVButton"
+        @switch-camera="switchCamera"
+        @update-f-o-v="handleUpdateFOV"
+      />
+
+      <LightControls
+        v-if="activeCategory === 'light'"
+        ref="lightControlsRef"
+        :light-intensity="lightIntensity"
+        :show-light-intensity-button="showLightIntensityButton"
+        @update-light-intensity="handleUpdateLightIntensity"
+      />
+
+      <ExportControls
+        v-if="activeCategory === 'export'"
+        ref="exportControlsRef"
+        @export-model="handleExportModel"
+      />
+    </div>
+    <div v-if="showPreviewButton">
+      <Button class="p-button-rounded p-button-text" @click="togglePreview">
+        <i
+          v-tooltip.right="{ value: t('load3d.previewOutput'), showDelay: 300 }"
+          :class="[
+            'pi',
+            showPreview ? 'pi-eye' : 'pi-eye-slash',
+            'text-white text-lg'
+          ]"
+        />
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/load3d/Load3DScene.vue b/src/components/load3d/Load3DScene.vue
index d9c344bec1..dfa7ba88db 100644
--- a/src/components/load3d/Load3DScene.vue
+++ b/src/components/load3d/Load3DScene.vue
@@ -1,9 +1,3 @@
-<template>
-  <div ref="container" class="w-full h-full relative comfy-load-3d">
-    <LoadingOverlay ref="loadingOverlayRef" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
 
@@ -236,3 +230,9 @@ defineExpose({
   load3d
 })
 </script>
+
+<template>
+  <div ref="container" class="w-full h-full relative comfy-load-3d">
+    <LoadingOverlay ref="loadingOverlayRef" />
+  </div>
+</template>
diff --git a/src/components/load3d/Load3dViewerContent.vue b/src/components/load3d/Load3dViewerContent.vue
index fa22865d6a..8560b59892 100644
--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/src/components/load3d/Load3dViewerContent.vue
@@ -1,71 +1,3 @@
-<template>
-  <div
-    ref="viewerContentRef"
-    class="flex w-full"
-    :class="[maximized ? 'h-full' : 'h-[70vh]']"
-    @mouseenter="viewer.handleMouseEnter"
-    @mouseleave="viewer.handleMouseLeave"
-  >
-    <div ref="mainContentRef" class="flex-1 relative">
-      <div
-        ref="containerRef"
-        class="absolute w-full h-full comfy-load-3d-viewer"
-        @resize="viewer.handleResize"
-      />
-    </div>
-
-    <div class="w-72 flex flex-col">
-      <div class="flex-1 overflow-y-auto p-4">
-        <div class="space-y-2">
-          <div class="p-2 space-y-4">
-            <SceneControls
-              v-model:background-color="viewer.backgroundColor.value"
-              v-model:show-grid="viewer.showGrid.value"
-              :has-background-image="viewer.hasBackgroundImage.value"
-              @update-background-image="viewer.handleBackgroundImageUpdate"
-            />
-          </div>
-
-          <div class="p-2 space-y-4">
-            <ModelControls
-              v-model:up-direction="viewer.upDirection.value"
-              v-model:material-mode="viewer.materialMode.value"
-            />
-          </div>
-
-          <div class="p-2 space-y-4">
-            <CameraControls
-              v-model:camera-type="viewer.cameraType.value"
-              v-model:fov="viewer.fov.value"
-            />
-          </div>
-
-          <div class="p-2 space-y-4">
-            <LightControls
-              v-model:light-intensity="viewer.lightIntensity.value"
-            />
-          </div>
-
-          <div class="p-2 space-y-4">
-            <ExportControls @export-model="viewer.exportModel" />
-          </div>
-        </div>
-      </div>
-
-      <div class="p-4">
-        <div class="flex gap-2">
-          <Button
-            icon="pi pi-times"
-            severity="secondary"
-            :label="t('g.cancel')"
-            @click="handleCancel"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { onBeforeUnmount, onMounted, ref, toRaw } from 'vue'
@@ -142,6 +74,74 @@ onBeforeUnmount(() => {
 })
 </script>
 
+<template>
+  <div
+    ref="viewerContentRef"
+    class="flex w-full"
+    :class="[maximized ? 'h-full' : 'h-[70vh]']"
+    @mouseenter="viewer.handleMouseEnter"
+    @mouseleave="viewer.handleMouseLeave"
+  >
+    <div ref="mainContentRef" class="flex-1 relative">
+      <div
+        ref="containerRef"
+        class="absolute w-full h-full comfy-load-3d-viewer"
+        @resize="viewer.handleResize"
+      />
+    </div>
+
+    <div class="w-72 flex flex-col">
+      <div class="flex-1 overflow-y-auto p-4">
+        <div class="space-y-2">
+          <div class="p-2 space-y-4">
+            <SceneControls
+              v-model:background-color="viewer.backgroundColor.value"
+              v-model:show-grid="viewer.showGrid.value"
+              :has-background-image="viewer.hasBackgroundImage.value"
+              @update-background-image="viewer.handleBackgroundImageUpdate"
+            />
+          </div>
+
+          <div class="p-2 space-y-4">
+            <ModelControls
+              v-model:up-direction="viewer.upDirection.value"
+              v-model:material-mode="viewer.materialMode.value"
+            />
+          </div>
+
+          <div class="p-2 space-y-4">
+            <CameraControls
+              v-model:camera-type="viewer.cameraType.value"
+              v-model:fov="viewer.fov.value"
+            />
+          </div>
+
+          <div class="p-2 space-y-4">
+            <LightControls
+              v-model:light-intensity="viewer.lightIntensity.value"
+            />
+          </div>
+
+          <div class="p-2 space-y-4">
+            <ExportControls @export-model="viewer.exportModel" />
+          </div>
+        </div>
+      </div>
+
+      <div class="p-4">
+        <div class="flex gap-2">
+          <Button
+            icon="pi pi-times"
+            severity="secondary"
+            :label="t('g.cancel')"
+            @click="handleCancel"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 :deep(.p-panel-content) {
   padding: 0;
diff --git a/src/components/load3d/LoadingOverlay.vue b/src/components/load3d/LoadingOverlay.vue
index 361718d9ea..805f019885 100644
--- a/src/components/load3d/LoadingOverlay.vue
+++ b/src/components/load3d/LoadingOverlay.vue
@@ -1,19 +1,3 @@
-<template>
-  <Transition name="fade">
-    <div
-      v-if="modelLoading"
-      class="absolute inset-0 bg-black/50 flex items-center justify-center z-50"
-    >
-      <div class="flex flex-col items-center">
-        <div class="spinner" />
-        <div class="text-white mt-4 text-lg">
-          {{ loadingMessage }}
-        </div>
-      </div>
-    </div>
-  </Transition>
-</template>
-
 <script setup lang="ts">
 import { nextTick, ref } from 'vue'
 
@@ -40,6 +24,22 @@ defineExpose({
 })
 </script>
 
+<template>
+  <Transition name="fade">
+    <div
+      v-if="modelLoading"
+      class="absolute inset-0 bg-black/50 flex items-center justify-center z-50"
+    >
+      <div class="flex flex-col items-center">
+        <div class="spinner" />
+        <div class="text-white mt-4 text-lg">
+          {{ loadingMessage }}
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
 <style scoped>
 .spinner {
   width: 50px;
diff --git a/src/components/load3d/controls/CameraControls.vue b/src/components/load3d/controls/CameraControls.vue
index e19683f657..0da29e2cfb 100644
--- a/src/components/load3d/controls/CameraControls.vue
+++ b/src/components/load3d/controls/CameraControls.vue
@@ -1,39 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <Button class="p-button-rounded p-button-text" @click="switchCamera">
-      <i
-        v-tooltip.right="{
-          value: t('load3d.switchCamera'),
-          showDelay: 300
-        }"
-        :class="['pi', getCameraIcon, 'text-white text-lg']"
-      />
-    </Button>
-    <div v-if="showFOVButton" class="relative show-fov">
-      <Button class="p-button-rounded p-button-text" @click="toggleFOV">
-        <i
-          v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
-          class="pi pi-expand text-white text-lg"
-        />
-      </Button>
-      <div
-        v-show="showFOV"
-        class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
-        style="width: 150px"
-      >
-        <Slider
-          v-model="fov"
-          class="w-full"
-          :min="10"
-          :max="150"
-          :step="1"
-          @change="updateFOV"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
@@ -114,3 +78,39 @@ onUnmounted(() => {
   document.removeEventListener('click', closeCameraSlider)
 })
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <Button class="p-button-rounded p-button-text" @click="switchCamera">
+      <i
+        v-tooltip.right="{
+          value: t('load3d.switchCamera'),
+          showDelay: 300
+        }"
+        :class="['pi', getCameraIcon, 'text-white text-lg']"
+      />
+    </Button>
+    <div v-if="showFOVButton" class="relative show-fov">
+      <Button class="p-button-rounded p-button-text" @click="toggleFOV">
+        <i
+          v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
+          class="pi pi-expand text-white text-lg"
+        />
+      </Button>
+      <div
+        v-show="showFOV"
+        class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
+        style="width: 150px"
+      >
+        <Slider
+          v-model="fov"
+          class="w-full"
+          :min="10"
+          :max="150"
+          :step="1"
+          @change="updateFOV"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/load3d/controls/ExportControls.vue b/src/components/load3d/controls/ExportControls.vue
index 4f718d4482..ae850a4ab4 100644
--- a/src/components/load3d/controls/ExportControls.vue
+++ b/src/components/load3d/controls/ExportControls.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <div class="relative show-export-formats">
-      <Button
-        class="p-button-rounded p-button-text"
-        @click="toggleExportFormats"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.exportModel'),
-            showDelay: 300
-          }"
-          class="pi pi-download text-white text-lg"
-        />
-      </Button>
-      <div
-        v-show="showExportFormats"
-        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
-      >
-        <div class="flex flex-col">
-          <Button
-            v-for="format in exportFormats"
-            :key="format.value"
-            class="p-button-text text-white"
-            @click="exportModel(format.value)"
-          >
-            {{ format.label }}
-          </Button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
@@ -79,3 +45,37 @@ onUnmounted(() => {
   document.removeEventListener('click', closeExportFormatsList)
 })
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="relative show-export-formats">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="toggleExportFormats"
+      >
+        <i
+          v-tooltip.right="{
+            value: t('load3d.exportModel'),
+            showDelay: 300
+          }"
+          class="pi pi-download text-white text-lg"
+        />
+      </Button>
+      <div
+        v-show="showExportFormats"
+        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
+      >
+        <div class="flex flex-col">
+          <Button
+            v-for="format in exportFormats"
+            :key="format.value"
+            class="p-button-text text-white"
+            @click="exportModel(format.value)"
+          >
+            {{ format.label }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/load3d/controls/LightControls.vue b/src/components/load3d/controls/LightControls.vue
index 1c6bc751e4..bf42470efc 100644
--- a/src/components/load3d/controls/LightControls.vue
+++ b/src/components/load3d/controls/LightControls.vue
@@ -1,36 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <div v-if="showLightIntensityButton" class="relative show-light-intensity">
-      <Button
-        class="p-button-rounded p-button-text"
-        @click="toggleLightIntensity"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.lightIntensity'),
-            showDelay: 300
-          }"
-          class="pi pi-sun text-white text-lg"
-        />
-      </Button>
-      <div
-        v-show="showLightIntensity"
-        class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
-        style="width: 150px"
-      >
-        <Slider
-          v-model="lightIntensity"
-          class="w-full"
-          :min="lightIntensityMinimum"
-          :max="lightIntensityMaximum"
-          :step="lightAdjustmentIncrement"
-          @change="updateLightIntensity"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
@@ -103,3 +70,36 @@ onUnmounted(() => {
   document.removeEventListener('click', closeLightSlider)
 })
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <div v-if="showLightIntensityButton" class="relative show-light-intensity">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="toggleLightIntensity"
+      >
+        <i
+          v-tooltip.right="{
+            value: t('load3d.lightIntensity'),
+            showDelay: 300
+          }"
+          class="pi pi-sun text-white text-lg"
+        />
+      </Button>
+      <div
+        v-show="showLightIntensity"
+        class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
+        style="width: 150px"
+      >
+        <Slider
+          v-model="lightIntensity"
+          class="w-full"
+          :min="lightIntensityMinimum"
+          :max="lightIntensityMaximum"
+          :step="lightAdjustmentIncrement"
+          @change="updateLightIntensity"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/load3d/controls/ModelControls.vue b/src/components/load3d/controls/ModelControls.vue
index 1f00ed3e3e..9881f50a1e 100644
--- a/src/components/load3d/controls/ModelControls.vue
+++ b/src/components/load3d/controls/ModelControls.vue
@@ -1,98 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <div class="relative show-up-direction">
-      <Button class="p-button-rounded p-button-text" @click="toggleUpDirection">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.upDirection'),
-            showDelay: 300
-          }"
-          class="pi pi-arrow-up text-white text-lg"
-        />
-      </Button>
-      <div
-        v-show="showUpDirection"
-        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
-      >
-        <div class="flex flex-col">
-          <Button
-            v-for="direction in upDirections"
-            :key="direction"
-            class="p-button-text text-white"
-            :class="{ 'bg-blue-500': upDirection === direction }"
-            @click="selectUpDirection(direction)"
-          >
-            {{ formatOption(direction) }}
-          </Button>
-        </div>
-      </div>
-    </div>
-
-    <div class="relative show-material-mode">
-      <Button
-        class="p-button-rounded p-button-text"
-        @click="toggleMaterialMode"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.materialMode'),
-            showDelay: 300
-          }"
-          class="pi pi-box text-white text-lg"
-        />
-      </Button>
-      <div
-        v-show="showMaterialMode"
-        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
-      >
-        <div class="flex flex-col">
-          <Button
-            v-for="mode in materialModes"
-            :key="mode"
-            class="p-button-text text-white"
-            :class="{ 'bg-blue-500': materialMode === mode }"
-            @click="selectMaterialMode(mode)"
-          >
-            {{ formatMaterialMode(mode) }}
-          </Button>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="materialMode === 'lineart'" class="relative show-edge-threshold">
-      <Button
-        class="p-button-rounded p-button-text"
-        @click="toggleEdgeThreshold"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.edgeThreshold'),
-            showDelay: 300
-          }"
-          class="pi pi-sliders-h text-white text-lg"
-        />
-      </Button>
-      <div
-        v-show="showEdgeThreshold"
-        class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
-        style="width: 150px"
-      >
-        <label class="text-white text-xs mb-1 block"
-          >{{ t('load3d.edgeThreshold') }}: {{ edgeThreshold }}°</label
-        >
-        <Slider
-          v-model="edgeThreshold"
-          class="w-full"
-          :min="0"
-          :max="120"
-          :step="1"
-          @change="updateEdgeThreshold"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
@@ -246,3 +151,98 @@ onUnmounted(() => {
   document.removeEventListener('click', closeSceneSlider)
 })
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="relative show-up-direction">
+      <Button class="p-button-rounded p-button-text" @click="toggleUpDirection">
+        <i
+          v-tooltip.right="{
+            value: t('load3d.upDirection'),
+            showDelay: 300
+          }"
+          class="pi pi-arrow-up text-white text-lg"
+        />
+      </Button>
+      <div
+        v-show="showUpDirection"
+        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
+      >
+        <div class="flex flex-col">
+          <Button
+            v-for="direction in upDirections"
+            :key="direction"
+            class="p-button-text text-white"
+            :class="{ 'bg-blue-500': upDirection === direction }"
+            @click="selectUpDirection(direction)"
+          >
+            {{ formatOption(direction) }}
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative show-material-mode">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="toggleMaterialMode"
+      >
+        <i
+          v-tooltip.right="{
+            value: t('load3d.materialMode'),
+            showDelay: 300
+          }"
+          class="pi pi-box text-white text-lg"
+        />
+      </Button>
+      <div
+        v-show="showMaterialMode"
+        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
+      >
+        <div class="flex flex-col">
+          <Button
+            v-for="mode in materialModes"
+            :key="mode"
+            class="p-button-text text-white"
+            :class="{ 'bg-blue-500': materialMode === mode }"
+            @click="selectMaterialMode(mode)"
+          >
+            {{ formatMaterialMode(mode) }}
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="materialMode === 'lineart'" class="relative show-edge-threshold">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="toggleEdgeThreshold"
+      >
+        <i
+          v-tooltip.right="{
+            value: t('load3d.edgeThreshold'),
+            showDelay: 300
+          }"
+          class="pi pi-sliders-h text-white text-lg"
+        />
+      </Button>
+      <div
+        v-show="showEdgeThreshold"
+        class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
+        style="width: 150px"
+      >
+        <label class="text-white text-xs mb-1 block"
+          >{{ t('load3d.edgeThreshold') }}: {{ edgeThreshold }}°</label
+        >
+        <Slider
+          v-model="edgeThreshold"
+          class="w-full"
+          :min="0"
+          :max="120"
+          :step="1"
+          @change="updateEdgeThreshold"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/load3d/controls/RecordingControls.vue b/src/components/load3d/controls/RecordingControls.vue
index fdac4abcb8..28d793a054 100644
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -1,79 +1,3 @@
-<template>
-  <div class="relative bg-gray-700/30 rounded-lg">
-    <div class="flex flex-col gap-2">
-      <Button
-        class="p-button-rounded p-button-text"
-        @click="resizeNodeMatchOutput"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.resizeNodeMatchOutput'),
-            showDelay: 300
-          }"
-          class="pi pi-window-maximize text-white text-lg"
-        />
-      </Button>
-      <Button
-        class="p-button-rounded p-button-text"
-        :class="{
-          'p-button-danger': isRecording,
-          'recording-button-blink': isRecording
-        }"
-        @click="toggleRecording"
-      >
-        <i
-          v-tooltip.right="{
-            value: isRecording
-              ? t('load3d.stopRecording')
-              : t('load3d.startRecording'),
-            showDelay: 300
-          }"
-          :class="[
-            'pi',
-            isRecording ? 'pi-circle-fill' : 'pi-video',
-            'text-white text-lg'
-          ]"
-        />
-      </Button>
-
-      <Button
-        v-if="hasRecording && !isRecording"
-        class="p-button-rounded p-button-text"
-        @click="exportRecording"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.exportRecording'),
-            showDelay: 300
-          }"
-          class="pi pi-download text-white text-lg"
-        />
-      </Button>
-
-      <Button
-        v-if="hasRecording && !isRecording"
-        class="p-button-rounded p-button-text"
-        @click="clearRecording"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.clearRecording'),
-            showDelay: 300
-          }"
-          class="pi pi-trash text-white text-lg"
-        />
-      </Button>
-
-      <div
-        v-if="recordingDuration > 0 && !isRecording"
-        class="text-xs text-white text-center mt-1"
-      >
-        {{ formatDuration(recordingDuration) }}
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
@@ -151,6 +75,82 @@ const formatDuration = (seconds: number): string => {
 }
 </script>
 
+<template>
+  <div class="relative bg-gray-700/30 rounded-lg">
+    <div class="flex flex-col gap-2">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="resizeNodeMatchOutput"
+      >
+        <i
+          v-tooltip.right="{
+            value: t('load3d.resizeNodeMatchOutput'),
+            showDelay: 300
+          }"
+          class="pi pi-window-maximize text-white text-lg"
+        />
+      </Button>
+      <Button
+        class="p-button-rounded p-button-text"
+        :class="{
+          'p-button-danger': isRecording,
+          'recording-button-blink': isRecording
+        }"
+        @click="toggleRecording"
+      >
+        <i
+          v-tooltip.right="{
+            value: isRecording
+              ? t('load3d.stopRecording')
+              : t('load3d.startRecording'),
+            showDelay: 300
+          }"
+          :class="[
+            'pi',
+            isRecording ? 'pi-circle-fill' : 'pi-video',
+            'text-white text-lg'
+          ]"
+        />
+      </Button>
+
+      <Button
+        v-if="hasRecording && !isRecording"
+        class="p-button-rounded p-button-text"
+        @click="exportRecording"
+      >
+        <i
+          v-tooltip.right="{
+            value: t('load3d.exportRecording'),
+            showDelay: 300
+          }"
+          class="pi pi-download text-white text-lg"
+        />
+      </Button>
+
+      <Button
+        v-if="hasRecording && !isRecording"
+        class="p-button-rounded p-button-text"
+        @click="clearRecording"
+      >
+        <i
+          v-tooltip.right="{
+            value: t('load3d.clearRecording'),
+            showDelay: 300
+          }"
+          class="pi pi-trash text-white text-lg"
+        />
+      </Button>
+
+      <div
+        v-if="recordingDuration > 0 && !isRecording"
+        class="text-xs text-white text-center mt-1"
+      >
+        {{ formatDuration(recordingDuration) }}
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .recording-button-blink {
   animation: blink 1s infinite;
diff --git a/src/components/load3d/controls/SceneControls.vue b/src/components/load3d/controls/SceneControls.vue
index 8fd620f33a..1ed87f3dc5 100644
--- a/src/components/load3d/controls/SceneControls.vue
+++ b/src/components/load3d/controls/SceneControls.vue
@@ -1,73 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <Button
-      class="p-button-rounded p-button-text"
-      :class="{ 'p-button-outlined': showGrid }"
-      @click="toggleGrid"
-    >
-      <i
-        v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
-        class="pi pi-table text-white text-lg"
-      />
-    </Button>
-
-    <div v-if="!hasBackgroundImage">
-      <Button class="p-button-rounded p-button-text" @click="openColorPicker">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.backgroundColor'),
-            showDelay: 300
-          }"
-          class="pi pi-palette text-white text-lg"
-        />
-        <input
-          ref="colorPickerRef"
-          type="color"
-          :value="backgroundColor"
-          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
-          @input="
-            updateBackgroundColor(($event.target as HTMLInputElement).value)
-          "
-        />
-      </Button>
-    </div>
-
-    <div v-if="!hasBackgroundImage">
-      <Button class="p-button-rounded p-button-text" @click="openImagePicker">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.uploadBackgroundImage'),
-            showDelay: 300
-          }"
-          class="pi pi-image text-white text-lg"
-        />
-        <input
-          ref="imagePickerRef"
-          type="file"
-          accept="image/*"
-          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
-          @change="uploadBackgroundImage"
-        />
-      </Button>
-    </div>
-
-    <div v-if="hasBackgroundImage">
-      <Button
-        class="p-button-rounded p-button-text"
-        @click="removeBackgroundImage"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.removeBackgroundImage'),
-            showDelay: 300
-          }"
-          class="pi pi-times text-white text-lg"
-        />
-      </Button>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
@@ -145,3 +75,73 @@ const removeBackgroundImage = () => {
   emit('updateBackgroundImage', null)
 }
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <Button
+      class="p-button-rounded p-button-text"
+      :class="{ 'p-button-outlined': showGrid }"
+      @click="toggleGrid"
+    >
+      <i
+        v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
+        class="pi pi-table text-white text-lg"
+      />
+    </Button>
+
+    <div v-if="!hasBackgroundImage">
+      <Button class="p-button-rounded p-button-text" @click="openColorPicker">
+        <i
+          v-tooltip.right="{
+            value: t('load3d.backgroundColor'),
+            showDelay: 300
+          }"
+          class="pi pi-palette text-white text-lg"
+        />
+        <input
+          ref="colorPickerRef"
+          type="color"
+          :value="backgroundColor"
+          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
+          @input="
+            updateBackgroundColor(($event.target as HTMLInputElement).value)
+          "
+        />
+      </Button>
+    </div>
+
+    <div v-if="!hasBackgroundImage">
+      <Button class="p-button-rounded p-button-text" @click="openImagePicker">
+        <i
+          v-tooltip.right="{
+            value: t('load3d.uploadBackgroundImage'),
+            showDelay: 300
+          }"
+          class="pi pi-image text-white text-lg"
+        />
+        <input
+          ref="imagePickerRef"
+          type="file"
+          accept="image/*"
+          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
+          @change="uploadBackgroundImage"
+        />
+      </Button>
+    </div>
+
+    <div v-if="hasBackgroundImage">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="removeBackgroundImage"
+      >
+        <i
+          v-tooltip.right="{
+            value: t('load3d.removeBackgroundImage'),
+            showDelay: 300
+          }"
+          class="pi pi-times text-white text-lg"
+        />
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/load3d/controls/ViewerControls.vue b/src/components/load3d/controls/ViewerControls.vue
index 0f2cea8833..bb2d5ee5ba 100644
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/src/components/load3d/controls/ViewerControls.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="relative bg-gray-700/30 rounded-lg">
-    <div class="flex flex-col gap-2">
-      <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.openIn3DViewer'),
-            showDelay: 300
-          }"
-          class="pi pi-expand text-white text-lg"
-        />
-      </Button>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
@@ -49,4 +33,20 @@ const openIn3DViewer = () => {
 }
 </script>
 
+<template>
+  <div class="relative bg-gray-700/30 rounded-lg">
+    <div class="flex flex-col gap-2">
+      <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
+        <i
+          v-tooltip.right="{
+            value: t('load3d.openIn3DViewer'),
+            showDelay: 300
+          }"
+          class="pi pi-expand text-white text-lg"
+        />
+      </Button>
+    </div>
+  </div>
+</template>
+
 <style scoped></style>
diff --git a/src/components/load3d/controls/viewer/ViewerCameraControls.vue b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
index 94dd8b9327..5400ef0716 100644
--- a/src/components/load3d/controls/viewer/ViewerCameraControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import Select from 'primevue/select'
+import Slider from 'primevue/slider'
+import { computed } from 'vue'
+
+import type { CameraType } from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
+
+const cameras = [
+  { title: t('load3d.cameraType.perspective'), value: 'perspective' },
+  { title: t('load3d.cameraType.orthographic'), value: 'orthographic' }
+]
+
+const cameraType = defineModel<CameraType>('cameraType')
+const fov = defineModel<number>('fov')
+const showFOVButton = computed(() => cameraType.value === 'perspective')
+</script>
+
 <template>
   <div class="space-y-4">
     <label>
@@ -17,21 +35,3 @@
     <Slider v-model="fov" :min="10" :max="150" :step="1" aria-label="fov" />
   </div>
 </template>
-
-<script setup lang="ts">
-import Select from 'primevue/select'
-import Slider from 'primevue/slider'
-import { computed } from 'vue'
-
-import type { CameraType } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
-
-const cameras = [
-  { title: t('load3d.cameraType.perspective'), value: 'perspective' },
-  { title: t('load3d.cameraType.orthographic'), value: 'orthographic' }
-]
-
-const cameraType = defineModel<CameraType>('cameraType')
-const fov = defineModel<number>('fov')
-const showFOVButton = computed(() => cameraType.value === 'perspective')
-</script>
diff --git a/src/components/load3d/controls/viewer/ViewerExportControls.vue b/src/components/load3d/controls/viewer/ViewerExportControls.vue
index 6164e5bb0c..d55d20ca51 100644
--- a/src/components/load3d/controls/viewer/ViewerExportControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerExportControls.vue
@@ -1,17 +1,3 @@
-<template>
-  <Select
-    v-model="exportFormat"
-    :options="exportFormats"
-    option-label="label"
-    option-value="value"
-  >
-  </Select>
-
-  <Button severity="secondary" text rounded @click="exportModel(exportFormat)">
-    {{ t('load3d.export') }}
-  </Button>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Select from 'primevue/select'
@@ -35,3 +21,17 @@ const exportModel = (format: string) => {
   emit('exportModel', format)
 }
 </script>
+
+<template>
+  <Select
+    v-model="exportFormat"
+    :options="exportFormats"
+    option-label="label"
+    option-value="value"
+  >
+  </Select>
+
+  <Button severity="secondary" text rounded @click="exportModel(exportFormat)">
+    {{ t('load3d.export') }}
+  </Button>
+</template>
diff --git a/src/components/load3d/controls/viewer/ViewerLightControls.vue b/src/components/load3d/controls/viewer/ViewerLightControls.vue
index e4cbcdb0c3..93b432e045 100644
--- a/src/components/load3d/controls/viewer/ViewerLightControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerLightControls.vue
@@ -1,15 +1,3 @@
-<template>
-  <label>{{ t('load3d.lightIntensity') }}</label>
-
-  <Slider
-    v-model="lightIntensity"
-    class="w-full"
-    :min="lightIntensityMinimum"
-    :max="lightIntensityMaximum"
-    :step="lightAdjustmentIncrement"
-  />
-</template>
-
 <script setup lang="ts">
 import Slider from 'primevue/slider'
 
@@ -28,3 +16,15 @@ const lightAdjustmentIncrement = useSettingStore().get(
   'Comfy.Load3D.LightAdjustmentIncrement'
 )
 </script>
+
+<template>
+  <label>{{ t('load3d.lightIntensity') }}</label>
+
+  <Slider
+    v-model="lightIntensity"
+    class="w-full"
+    :min="lightIntensityMinimum"
+    :max="lightIntensityMaximum"
+    :step="lightAdjustmentIncrement"
+  />
+</template>
diff --git a/src/components/load3d/controls/viewer/ViewerModelControls.vue b/src/components/load3d/controls/viewer/ViewerModelControls.vue
index ca8f26364f..046020282f 100644
--- a/src/components/load3d/controls/viewer/ViewerModelControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerModelControls.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="space-y-4">
-    <div>
-      <label>{{ t('load3d.upDirection') }}</label>
-      <Select
-        v-model="upDirection"
-        :options="upDirectionOptions"
-        option-label="label"
-        option-value="value"
-      />
-    </div>
-
-    <div>
-      <label>{{ t('load3d.materialMode') }}</label>
-      <Select
-        v-model="materialMode"
-        :options="materialModeOptions"
-        option-label="label"
-        option-value="value"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Select from 'primevue/select'
 import { computed } from 'vue'
@@ -53,3 +29,27 @@ const materialModeOptions = computed(() => {
   ]
 })
 </script>
+
+<template>
+  <div class="space-y-4">
+    <div>
+      <label>{{ t('load3d.upDirection') }}</label>
+      <Select
+        v-model="upDirection"
+        :options="upDirectionOptions"
+        option-label="label"
+        option-value="value"
+      />
+    </div>
+
+    <div>
+      <label>{{ t('load3d.materialMode') }}</label>
+      <Select
+        v-model="materialMode"
+        :options="materialModeOptions"
+        option-label="label"
+        option-value="value"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/load3d/controls/viewer/ViewerSceneControls.vue b/src/components/load3d/controls/viewer/ViewerSceneControls.vue
index 3cabcc7bed..62fe46f36a 100644
--- a/src/components/load3d/controls/viewer/ViewerSceneControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerSceneControls.vue
@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
+import { ref } from 'vue'
+
+import { t } from '@/i18n'
+
+const backgroundColor = defineModel<string>('backgroundColor')
+const showGrid = defineModel<boolean>('showGrid')
+
+defineProps<{
+  hasBackgroundImage?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'updateBackgroundImage', file: File | null): void
+}>()
+
+const imagePickerRef = ref<HTMLInputElement | null>(null)
+
+const openImagePicker = () => {
+  imagePickerRef.value?.click()
+}
+
+const handleImageUpload = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  if (input.files && input.files[0]) {
+    emit('updateBackgroundImage', input.files[0])
+  }
+
+  input.value = ''
+}
+
+const removeBackgroundImage = () => {
+  emit('updateBackgroundImage', null)
+}
+</script>
+
 <template>
   <div class="space-y-4">
     <div v-if="!hasBackgroundImage">
@@ -42,41 +80,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import { ref } from 'vue'
-
-import { t } from '@/i18n'
-
-const backgroundColor = defineModel<string>('backgroundColor')
-const showGrid = defineModel<boolean>('showGrid')
-
-defineProps<{
-  hasBackgroundImage?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'updateBackgroundImage', file: File | null): void
-}>()
-
-const imagePickerRef = ref<HTMLInputElement | null>(null)
-
-const openImagePicker = () => {
-  imagePickerRef.value?.click()
-}
-
-const handleImageUpload = (event: Event) => {
-  const input = event.target as HTMLInputElement
-  if (input.files && input.files[0]) {
-    emit('updateBackgroundImage', input.files[0])
-  }
-
-  input.value = ''
-}
-
-const removeBackgroundImage = () => {
-  emit('updateBackgroundImage', null)
-}
-</script>
diff --git a/src/components/maintenance/StatusTag.vue b/src/components/maintenance/StatusTag.vue
index 3fd2791dff..fc79537cf5 100644
--- a/src/components/maintenance/StatusTag.vue
+++ b/src/components/maintenance/StatusTag.vue
@@ -1,7 +1,3 @@
-<template>
-  <Tag :icon :severity :value />
-</template>
-
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
 import Tag from 'primevue/tag'
@@ -34,3 +30,7 @@ const value = computed(() => {
   return t('maintenance.OK')
 })
 </script>
+
+<template>
+  <Tag :icon :severity :value />
+</template>
diff --git a/src/components/maintenance/TaskCard.vue b/src/components/maintenance/TaskCard.vue
index 1287169ce1..3330246102 100644
--- a/src/components/maintenance/TaskCard.vue
+++ b/src/components/maintenance/TaskCard.vue
@@ -1,3 +1,40 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Card from 'primevue/card'
+import { computed } from 'vue'
+
+import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
+import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
+import { useMinLoadingDurationRef } from '@/utils/refUtil'
+
+const taskStore = useMaintenanceTaskStore()
+const runner = computed(() => taskStore.getRunner(props.task))
+
+// Properties
+const props = defineProps<{
+  task: MaintenanceTask
+}>()
+
+// Events
+defineEmits<{
+  execute: [event: MouseEvent]
+}>()
+
+// Bindings
+const description = computed(() =>
+  runner.value.state === 'error'
+    ? props.task.errorDescription ?? props.task.shortDescription
+    : props.task.shortDescription
+)
+
+// Use a minimum run time to ensure tasks "feel" like they have run
+const reactiveLoading = computed(() => !!runner.value.refreshing)
+const reactiveExecuting = computed(() => !!runner.value.executing)
+
+const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
+const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
+</script>
+
 <template>
   <div
     class="task-div max-w-48 min-h-52 grid relative"
@@ -48,43 +85,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import { computed } from 'vue'
-
-import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
-import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import { useMinLoadingDurationRef } from '@/utils/refUtil'
-
-const taskStore = useMaintenanceTaskStore()
-const runner = computed(() => taskStore.getRunner(props.task))
-
-// Properties
-const props = defineProps<{
-  task: MaintenanceTask
-}>()
-
-// Events
-defineEmits<{
-  execute: [event: MouseEvent]
-}>()
-
-// Bindings
-const description = computed(() =>
-  runner.value.state === 'error'
-    ? props.task.errorDescription ?? props.task.shortDescription
-    : props.task.shortDescription
-)
-
-// Use a minimum run time to ensure tasks "feel" like they have run
-const reactiveLoading = computed(() => !!runner.value.refreshing)
-const reactiveExecuting = computed(() => !!runner.value.executing)
-
-const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
-const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
-</script>
-
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/maintenance/TaskListItem.vue b/src/components/maintenance/TaskListItem.vue
index 0762bbd057..40b7f5ea3c 100644
--- a/src/components/maintenance/TaskListItem.vue
+++ b/src/components/maintenance/TaskListItem.vue
@@ -1,44 +1,3 @@
-<template>
-  <tr
-    class="border-neutral-700 border-solid border-y"
-    :class="{
-      'opacity-50': runner.resolved,
-      'opacity-75': isLoading && runner.resolved
-    }"
-  >
-    <td class="text-center w-16">
-      <TaskListStatusIcon :state="runner.state" :loading="isLoading" />
-    </td>
-    <td>
-      <p class="inline-block">
-        {{ task.name }}
-      </p>
-      <Button
-        class="inline-block mx-2"
-        type="button"
-        :icon="PrimeIcons.INFO_CIRCLE"
-        severity="secondary"
-        :text="true"
-        @click="toggle"
-      />
-
-      <Popover ref="infoPopover" class="block m-1 max-w-64 min-w-32">
-        <span class="whitespace-pre-line">{{ task.description }}</span>
-      </Popover>
-    </td>
-    <td class="text-right px-4">
-      <Button
-        :icon="task.button?.icon"
-        :label="task.button?.text"
-        :severity
-        icon-pos="right"
-        :loading="isExecuting"
-        @click="(event) => $emit('execute', event)"
-      />
-    </td>
-  </tr>
-</template>
-
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
 import Button from 'primevue/button'
@@ -86,3 +45,44 @@ const toggle = (event: Event) => {
   infoPopover.value?.toggle(event)
 }
 </script>
+
+<template>
+  <tr
+    class="border-neutral-700 border-solid border-y"
+    :class="{
+      'opacity-50': runner.resolved,
+      'opacity-75': isLoading && runner.resolved
+    }"
+  >
+    <td class="text-center w-16">
+      <TaskListStatusIcon :state="runner.state" :loading="isLoading" />
+    </td>
+    <td>
+      <p class="inline-block">
+        {{ task.name }}
+      </p>
+      <Button
+        class="inline-block mx-2"
+        type="button"
+        :icon="PrimeIcons.INFO_CIRCLE"
+        severity="secondary"
+        :text="true"
+        @click="toggle"
+      />
+
+      <Popover ref="infoPopover" class="block m-1 max-w-64 min-w-32">
+        <span class="whitespace-pre-line">{{ task.description }}</span>
+      </Popover>
+    </td>
+    <td class="text-right px-4">
+      <Button
+        :icon="task.button?.icon"
+        :label="task.button?.text"
+        :severity
+        icon-pos="right"
+        :loading="isExecuting"
+        @click="(event) => $emit('execute', event)"
+      />
+    </td>
+  </tr>
+</template>
diff --git a/src/components/maintenance/TaskListPanel.vue b/src/components/maintenance/TaskListPanel.vue
index c70db0af03..45a5258031 100644
--- a/src/components/maintenance/TaskListPanel.vue
+++ b/src/components/maintenance/TaskListPanel.vue
@@ -1,44 +1,3 @@
-<template>
-  <!-- Tasks -->
-  <section class="my-4">
-    <template v-if="filter.tasks.length === 0">
-      <!-- Empty filter -->
-      <Divider />
-      <p class="text-neutral-400 w-full text-center">
-        {{ $t('maintenance.allOk') }}
-      </p>
-    </template>
-
-    <template v-else>
-      <!-- Display: List -->
-      <table
-        v-if="displayAsList === PrimeIcons.LIST"
-        class="w-full border-collapse border-hidden"
-      >
-        <TaskListItem
-          v-for="task in filter.tasks"
-          :key="task.id"
-          :task
-          @execute="(event) => confirmButton(event, task)"
-        />
-      </table>
-
-      <!-- Display: Cards -->
-      <template v-else>
-        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
-          <TaskCard
-            v-for="task in filter.tasks"
-            :key="task.id"
-            :task
-            @execute="(event) => confirmButton(event, task)"
-          />
-        </div>
-      </template>
-    </template>
-    <ConfirmPopup />
-  </section>
-</template>
-
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
 import { useConfirm, useToast } from 'primevue'
@@ -113,3 +72,44 @@ const confirmButton = async (event: MouseEvent, task: MaintenanceTask) => {
   })
 }
 </script>
+
+<template>
+  <!-- Tasks -->
+  <section class="my-4">
+    <template v-if="filter.tasks.length === 0">
+      <!-- Empty filter -->
+      <Divider />
+      <p class="text-neutral-400 w-full text-center">
+        {{ $t('maintenance.allOk') }}
+      </p>
+    </template>
+
+    <template v-else>
+      <!-- Display: List -->
+      <table
+        v-if="displayAsList === PrimeIcons.LIST"
+        class="w-full border-collapse border-hidden"
+      >
+        <TaskListItem
+          v-for="task in filter.tasks"
+          :key="task.id"
+          :task
+          @execute="(event) => confirmButton(event, task)"
+        />
+      </table>
+
+      <!-- Display: Cards -->
+      <template v-else>
+        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
+          <TaskCard
+            v-for="task in filter.tasks"
+            :key="task.id"
+            :task
+            @execute="(event) => confirmButton(event, task)"
+          />
+        </div>
+      </template>
+    </template>
+    <ConfirmPopup />
+  </section>
+</template>
diff --git a/src/components/maintenance/TaskListStatusIcon.vue b/src/components/maintenance/TaskListStatusIcon.vue
index 08eb87572d..cdbc5fdc03 100644
--- a/src/components/maintenance/TaskListStatusIcon.vue
+++ b/src/components/maintenance/TaskListStatusIcon.vue
@@ -1,10 +1,3 @@
-<template>
-  <ProgressSpinner v-if="!state || loading" class="h-8 w-8" />
-  <template v-else>
-    <i v-tooltip.top="{ value: tooltip, showDelay: 250 }" :class="cssClasses" />
-  </template>
-</template>
-
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -43,3 +36,10 @@ const props = defineProps<{
   loading?: MaybeRef<boolean>
 }>()
 </script>
+
+<template>
+  <ProgressSpinner v-if="!state || loading" class="h-8 w-8" />
+  <template v-else>
+    <i v-tooltip.top="{ value: tooltip, showDelay: 250 }" :class="cssClasses" />
+  </template>
+</template>
diff --git a/src/components/maintenance/TerminalOutputDrawer.vue b/src/components/maintenance/TerminalOutputDrawer.vue
index b3cf67cc50..b26bedc12e 100644
--- a/src/components/maintenance/TerminalOutputDrawer.vue
+++ b/src/components/maintenance/TerminalOutputDrawer.vue
@@ -1,14 +1,3 @@
-<template>
-  <Drawer
-    v-model:visible="terminalVisible"
-    :header
-    position="bottom"
-    style="height: max(50vh, 34rem)"
-  >
-    <BaseTerminal @created="terminalCreated" @unmounted="terminalUnmounted" />
-  </Drawer>
-</template>
-
 <script setup lang="ts">
 import type { Terminal } from '@xterm/xterm'
 import Drawer from 'primevue/drawer'
@@ -60,3 +49,14 @@ onMounted(async () => {
   })
 })
 </script>
+
+<template>
+  <Drawer
+    v-model:visible="terminalVisible"
+    :header
+    position="bottom"
+    style="height: max(50vh, 34rem)"
+  >
+    <BaseTerminal @created="terminalCreated" @unmounted="terminalUnmounted" />
+  </Drawer>
+</template>
diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index f55c934368..6c7ec9ea4b 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -2,6 +2,57 @@
 https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c683087a3e168db/app/js/functions/sb_fn.js#L149
 -->
 
+<script setup lang="ts">
+import _ from 'es-toolkit/compat'
+import { computed } from 'vue'
+
+import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { useWidgetStore } from '@/stores/widgetStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+
+const { nodeDef } = defineProps<{
+  nodeDef: ComfyNodeDefV2
+}>()
+
+const colorPaletteStore = useColorPaletteStore()
+const litegraphColors = computed(
+  () => colorPaletteStore.completedActivePalette.colors.litegraph_base
+)
+
+const widgetStore = useWidgetStore()
+
+const { description } = nodeDef
+const renderedDescription = computed(() => {
+  if (!description) return ''
+  return renderMarkdownToHtml(description)
+})
+
+const allInputDefs = Object.values(nodeDef.inputs)
+const allOutputDefs = nodeDef.outputs
+const slotInputDefs = allInputDefs.filter(
+  (input) => !widgetStore.inputIsWidget(input)
+)
+const widgetInputDefs = allInputDefs.filter((input) =>
+  widgetStore.inputIsWidget(input)
+)
+const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
+  let stringValue: string
+
+  if (typeof value === 'object' && value !== null) {
+    stringValue = JSON.stringify(value)
+  } else if (Array.isArray(value)) {
+    stringValue = JSON.stringify(value)
+  } else if (typeof value === 'string') {
+    stringValue = value
+  } else {
+    stringValue = String(value)
+  }
+
+  return _.truncate(stringValue, { length: charLimit })
+}
+</script>
+
 <template>
   <div class="_sb_node_preview">
     <div class="_sb_table">
@@ -81,57 +132,6 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
   </div>
 </template>
 
-<script setup lang="ts">
-import _ from 'es-toolkit/compat'
-import { computed } from 'vue'
-
-import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { useWidgetStore } from '@/stores/widgetStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
-
-const { nodeDef } = defineProps<{
-  nodeDef: ComfyNodeDefV2
-}>()
-
-const colorPaletteStore = useColorPaletteStore()
-const litegraphColors = computed(
-  () => colorPaletteStore.completedActivePalette.colors.litegraph_base
-)
-
-const widgetStore = useWidgetStore()
-
-const { description } = nodeDef
-const renderedDescription = computed(() => {
-  if (!description) return ''
-  return renderMarkdownToHtml(description)
-})
-
-const allInputDefs = Object.values(nodeDef.inputs)
-const allOutputDefs = nodeDef.outputs
-const slotInputDefs = allInputDefs.filter(
-  (input) => !widgetStore.inputIsWidget(input)
-)
-const widgetInputDefs = allInputDefs.filter((input) =>
-  widgetStore.inputIsWidget(input)
-)
-const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
-  let stringValue: string
-
-  if (typeof value === 'object' && value !== null) {
-    stringValue = JSON.stringify(value)
-  } else if (Array.isArray(value)) {
-    stringValue = JSON.stringify(value)
-  } else if (typeof value === 'string') {
-    stringValue = value
-  } else {
-    stringValue = String(value)
-  }
-
-  return _.truncate(stringValue, { length: charLimit })
-}
-</script>
-
 <style scoped>
 .slot_row {
   padding: 2px;
diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 916575ea09..3407aa64f9 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -1,82 +1,3 @@
-<template>
-  <div
-    class="comfy-vue-node-search-container flex justify-center items-center w-full min-w-96"
-  >
-    <div
-      v-if="enableNodePreview"
-      class="comfy-vue-node-preview-container absolute left-[-350px] top-[50px]"
-    >
-      <NodePreview
-        v-if="hoveredSuggestion"
-        :key="hoveredSuggestion?.name || ''"
-        :node-def="hoveredSuggestion"
-      />
-    </div>
-
-    <Button
-      icon="pi pi-filter"
-      severity="secondary"
-      class="filter-button z-10"
-      @click="nodeSearchFilterVisible = true"
-    />
-    <Dialog
-      v-model:visible="nodeSearchFilterVisible"
-      class="min-w-96"
-      dismissable-mask
-      modal
-      @hide="reFocusInput"
-    >
-      <template #header>
-        <h3>{{ $t('g.addNodeFilterCondition') }}</h3>
-      </template>
-      <div class="_dialog-body">
-        <NodeSearchFilter @add-filter="onAddFilter" />
-      </div>
-    </Dialog>
-
-    <AutoCompletePlus
-      :model-value="filters"
-      class="comfy-vue-node-search-box z-10 grow"
-      scroll-height="40vh"
-      :placeholder="placeholder"
-      :input-id="inputId"
-      append-to="self"
-      :suggestions="suggestions"
-      :min-length="0"
-      :delay="100"
-      :loading="!nodeFrequencyStore.isLoaded"
-      complete-on-focus
-      auto-option-focus
-      force-selection
-      multiple
-      :option-label="'display_name'"
-      @complete="search($event.query)"
-      @option-select="emit('addNode', $event.value)"
-      @focused-option-changed="setHoverSuggestion($event)"
-    >
-      <template #option="{ option }">
-        <NodeSearchItem :node-def="option" :current-query="currentQuery" />
-      </template>
-      <!-- FilterAndValue -->
-      <template #chip="{ value }">
-        <SearchFilterChip
-          v-if="value.filterDef && value.value"
-          :key="`${value.filterDef.id}-${value.value}`"
-          :text="value.value"
-          :badge="value.filterDef.invokeSequence.toUpperCase()"
-          :badge-class="value.filterDef.invokeSequence + '-badge'"
-          @remove="
-            onRemoveFilter(
-              $event,
-              value as FuseFilterWithValue<ComfyNodeDefImpl, string>
-            )
-          "
-        />
-      </template>
-    </AutoCompletePlus>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
@@ -165,3 +86,82 @@ const setHoverSuggestion = (index: number) => {
   hoveredSuggestion.value = value
 }
 </script>
+
+<template>
+  <div
+    class="comfy-vue-node-search-container flex justify-center items-center w-full min-w-96"
+  >
+    <div
+      v-if="enableNodePreview"
+      class="comfy-vue-node-preview-container absolute left-[-350px] top-[50px]"
+    >
+      <NodePreview
+        v-if="hoveredSuggestion"
+        :key="hoveredSuggestion?.name || ''"
+        :node-def="hoveredSuggestion"
+      />
+    </div>
+
+    <Button
+      icon="pi pi-filter"
+      severity="secondary"
+      class="filter-button z-10"
+      @click="nodeSearchFilterVisible = true"
+    />
+    <Dialog
+      v-model:visible="nodeSearchFilterVisible"
+      class="min-w-96"
+      dismissable-mask
+      modal
+      @hide="reFocusInput"
+    >
+      <template #header>
+        <h3>{{ $t('g.addNodeFilterCondition') }}</h3>
+      </template>
+      <div class="_dialog-body">
+        <NodeSearchFilter @add-filter="onAddFilter" />
+      </div>
+    </Dialog>
+
+    <AutoCompletePlus
+      :model-value="filters"
+      class="comfy-vue-node-search-box z-10 grow"
+      scroll-height="40vh"
+      :placeholder="placeholder"
+      :input-id="inputId"
+      append-to="self"
+      :suggestions="suggestions"
+      :min-length="0"
+      :delay="100"
+      :loading="!nodeFrequencyStore.isLoaded"
+      complete-on-focus
+      auto-option-focus
+      force-selection
+      multiple
+      :option-label="'display_name'"
+      @complete="search($event.query)"
+      @option-select="emit('addNode', $event.value)"
+      @focused-option-changed="setHoverSuggestion($event)"
+    >
+      <template #option="{ option }">
+        <NodeSearchItem :node-def="option" :current-query="currentQuery" />
+      </template>
+      <!-- FilterAndValue -->
+      <template #chip="{ value }">
+        <SearchFilterChip
+          v-if="value.filterDef && value.value"
+          :key="`${value.filterDef.id}-${value.value}`"
+          :text="value.value"
+          :badge="value.filterDef.invokeSequence.toUpperCase()"
+          :badge-class="value.filterDef.invokeSequence + '-badge'"
+          @remove="
+            onRemoveFilter(
+              $event,
+              value as FuseFilterWithValue<ComfyNodeDefImpl, string>
+            )
+          "
+        />
+      </template>
+    </AutoCompletePlus>
+  </div>
+</template>
diff --git a/src/components/searchbox/NodeSearchBoxPopover.vue b/src/components/searchbox/NodeSearchBoxPopover.vue
index 58492cf720..c47d7e67fb 100644
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/src/components/searchbox/NodeSearchBoxPopover.vue
@@ -1,37 +1,3 @@
-<template>
-  <div>
-    <Dialog
-      v-model:visible="visible"
-      modal
-      :dismissable-mask="dismissable"
-      :pt="{
-        root: {
-          class: 'invisible-dialog-root',
-          role: 'search'
-        },
-        mask: { class: 'node-search-box-dialog-mask' },
-        transition: {
-          enterFromClass: 'opacity-0 scale-75',
-          // 100ms is the duration of the transition in the dialog component
-          enterActiveClass: 'transition-all duration-100 ease-out',
-          leaveActiveClass: 'transition-all duration-100 ease-in',
-          leaveToClass: 'opacity-0 scale-75'
-        }
-      }"
-      @hide="clearFilters"
-    >
-      <template #container>
-        <NodeSearchBox
-          :filters="nodeFilters"
-          @add-filter="addFilter"
-          @remove-filter="removeFilter"
-          @add-node="addNode"
-        />
-      </template>
-    </Dialog>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
@@ -303,6 +269,40 @@ useEventListener(document, 'litegraph:canvas', canvasEventHandler)
 defineExpose({ showSearchBox })
 </script>
 
+<template>
+  <div>
+    <Dialog
+      v-model:visible="visible"
+      modal
+      :dismissable-mask="dismissable"
+      :pt="{
+        root: {
+          class: 'invisible-dialog-root',
+          role: 'search'
+        },
+        mask: { class: 'node-search-box-dialog-mask' },
+        transition: {
+          enterFromClass: 'opacity-0 scale-75',
+          // 100ms is the duration of the transition in the dialog component
+          enterActiveClass: 'transition-all duration-100 ease-out',
+          leaveActiveClass: 'transition-all duration-100 ease-in',
+          leaveToClass: 'opacity-0 scale-75'
+        }
+      }"
+      @hide="clearFilters"
+    >
+      <template #container>
+        <NodeSearchBox
+          :filters="nodeFilters"
+          @add-filter="addFilter"
+          @remove-filter="removeFilter"
+          @add-node="addNode"
+        />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
 <style>
 .invisible-dialog-root {
   width: 60%;
diff --git a/src/components/searchbox/NodeSearchFilter.vue b/src/components/searchbox/NodeSearchFilter.vue
index 7b650cebad..4ed461d0e1 100644
--- a/src/components/searchbox/NodeSearchFilter.vue
+++ b/src/components/searchbox/NodeSearchFilter.vue
@@ -1,26 +1,3 @@
-<template>
-  <div class="_content">
-    <SelectButton
-      v-model="selectedFilter"
-      class="filter-type-select"
-      :options="filters"
-      :allow-empty="false"
-      option-label="name"
-      @change="updateSelectedFilterValue"
-    />
-    <Select
-      v-model="selectedFilterValue"
-      class="filter-value-select"
-      :options="filterValues"
-      filter
-      auto-filter-focus
-    />
-  </div>
-  <div class="_footer">
-    <Button type="button" :label="$t('g.add')" @click="submit" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Select from 'primevue/select'
@@ -68,6 +45,29 @@ const submit = () => {
 }
 </script>
 
+<template>
+  <div class="_content">
+    <SelectButton
+      v-model="selectedFilter"
+      class="filter-type-select"
+      :options="filters"
+      :allow-empty="false"
+      option-label="name"
+      @change="updateSelectedFilterValue"
+    />
+    <Select
+      v-model="selectedFilterValue"
+      class="filter-value-select"
+      :options="filterValues"
+      filter
+      auto-filter-focus
+    />
+  </div>
+  <div class="_footer">
+    <Button type="button" :label="$t('g.add')" @click="submit" />
+  </div>
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/searchbox/NodeSearchItem.vue b/src/components/searchbox/NodeSearchItem.vue
index 406963f222..302afc1220 100644
--- a/src/components/searchbox/NodeSearchItem.vue
+++ b/src/components/searchbox/NodeSearchItem.vue
@@ -1,3 +1,42 @@
+<script setup lang="ts">
+import Chip from 'primevue/chip'
+import Tag from 'primevue/tag'
+import { computed } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeFrequencyStore } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+import { highlightQuery } from '@/utils/formatUtil'
+import { formatNumberWithSuffix } from '@/utils/formatUtil'
+
+const settingStore = useSettingStore()
+const showCategory = computed(() =>
+  settingStore.get('Comfy.NodeSearchBoxImpl.ShowCategory')
+)
+const showIdName = computed(() =>
+  settingStore.get('Comfy.NodeSearchBoxImpl.ShowIdName')
+)
+const showNodeFrequency = computed(() =>
+  settingStore.get('Comfy.NodeSearchBoxImpl.ShowNodeFrequency')
+)
+const nodeFrequencyStore = useNodeFrequencyStore()
+const nodeFrequency = computed(() =>
+  nodeFrequencyStore.getNodeFrequency(props.nodeDef)
+)
+
+const nodeBookmarkStore = useNodeBookmarkStore()
+const isBookmarked = computed(() =>
+  nodeBookmarkStore.isBookmarked(props.nodeDef)
+)
+
+const props = defineProps<{
+  nodeDef: ComfyNodeDefImpl
+  currentQuery: string
+}>()
+</script>
+
 <template>
   <div
     class="option-container flex justify-between items-center px-2 py-0 cursor-pointer overflow-hidden w-full"
@@ -46,45 +85,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import Chip from 'primevue/chip'
-import Tag from 'primevue/tag'
-import { computed } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeFrequencyStore } from '@/stores/nodeDefStore'
-import { NodeSourceType } from '@/types/nodeSource'
-import { highlightQuery } from '@/utils/formatUtil'
-import { formatNumberWithSuffix } from '@/utils/formatUtil'
-
-const settingStore = useSettingStore()
-const showCategory = computed(() =>
-  settingStore.get('Comfy.NodeSearchBoxImpl.ShowCategory')
-)
-const showIdName = computed(() =>
-  settingStore.get('Comfy.NodeSearchBoxImpl.ShowIdName')
-)
-const showNodeFrequency = computed(() =>
-  settingStore.get('Comfy.NodeSearchBoxImpl.ShowNodeFrequency')
-)
-const nodeFrequencyStore = useNodeFrequencyStore()
-const nodeFrequency = computed(() =>
-  nodeFrequencyStore.getNodeFrequency(props.nodeDef)
-)
-
-const nodeBookmarkStore = useNodeBookmarkStore()
-const isBookmarked = computed(() =>
-  nodeBookmarkStore.isBookmarked(props.nodeDef)
-)
-
-const props = defineProps<{
-  nodeDef: ComfyNodeDefImpl
-  currentQuery: string
-}>()
-</script>
-
 <style scoped>
 :deep(.highlight) {
   background-color: var(--p-primary-color);
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 288deade86..c3e6b72c1b 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -1,36 +1,3 @@
-<template>
-  <teleport :to="teleportTarget">
-    <nav class="side-tool-bar-container" :class="{ 'small-sidebar': isSmall }">
-      <SidebarIcon
-        v-for="tab in tabs"
-        :key="tab.id"
-        :icon="tab.icon"
-        :icon-badge="tab.iconBadge"
-        :tooltip="tab.tooltip"
-        :tooltip-suffix="getTabTooltipSuffix(tab)"
-        :label="tab.label || tab.title"
-        :is-small="isSmall"
-        :selected="tab.id === selectedTab?.id"
-        :class="tab.id + '-tab-button'"
-        @click="onTabClick(tab)"
-      />
-      <SidebarTemplatesButton />
-      <div class="side-tool-bar-end">
-        <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
-        <SidebarHelpCenterIcon />
-        <SidebarBottomPanelToggleButton />
-        <SidebarShortcutsToggleButton />
-      </div>
-    </nav>
-  </teleport>
-  <div
-    v-if="selectedTab"
-    class="sidebar-content-container h-full overflow-y-auto overflow-x-hidden"
-  >
-    <ExtensionSlot :extension="selectedTab" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -76,6 +43,39 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 }
 </script>
 
+<template>
+  <teleport :to="teleportTarget">
+    <nav class="side-tool-bar-container" :class="{ 'small-sidebar': isSmall }">
+      <SidebarIcon
+        v-for="tab in tabs"
+        :key="tab.id"
+        :icon="tab.icon"
+        :icon-badge="tab.iconBadge"
+        :tooltip="tab.tooltip"
+        :tooltip-suffix="getTabTooltipSuffix(tab)"
+        :label="tab.label || tab.title"
+        :is-small="isSmall"
+        :selected="tab.id === selectedTab?.id"
+        :class="tab.id + '-tab-button'"
+        @click="onTabClick(tab)"
+      />
+      <SidebarTemplatesButton />
+      <div class="side-tool-bar-end">
+        <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
+        <SidebarHelpCenterIcon />
+        <SidebarBottomPanelToggleButton />
+        <SidebarShortcutsToggleButton />
+      </div>
+    </nav>
+  </teleport>
+  <div
+    v-if="selectedTab"
+    class="sidebar-content-container h-full overflow-y-auto overflow-x-hidden"
+  >
+    <ExtensionSlot :extension="selectedTab" />
+  </div>
+</template>
+
 <style>
 /* Global CSS variables for sidebar
  * These variables need to be global (not scoped) because they are used by
diff --git a/src/components/sidebar/SidebarBottomPanelToggleButton.vue b/src/components/sidebar/SidebarBottomPanelToggleButton.vue
index c51d9df89a..3a64d217f8 100644
--- a/src/components/sidebar/SidebarBottomPanelToggleButton.vue
+++ b/src/components/sidebar/SidebarBottomPanelToggleButton.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+
+import SidebarIcon from './SidebarIcon.vue'
+
+const bottomPanelStore = useBottomPanelStore()
+</script>
+
 <template>
   <SidebarIcon
     :tooltip="$t('menu.toggleBottomPanel')"
@@ -9,11 +17,3 @@
     </template>
   </SidebarIcon>
 </template>
-
-<script setup lang="ts">
-import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
-
-import SidebarIcon from './SidebarIcon.vue'
-
-const bottomPanelStore = useBottomPanelStore()
-</script>
diff --git a/src/components/sidebar/SidebarHelpCenterIcon.vue b/src/components/sidebar/SidebarHelpCenterIcon.vue
index 04589a5519..6f6b55bfc3 100644
--- a/src/components/sidebar/SidebarHelpCenterIcon.vue
+++ b/src/components/sidebar/SidebarHelpCenterIcon.vue
@@ -1,62 +1,3 @@
-<template>
-  <div>
-    <SidebarIcon
-      icon="pi pi-question-circle"
-      class="comfy-help-center-btn"
-      :tooltip="$t('sideToolbar.helpCenter')"
-      :icon-badge="shouldShowRedDot ? '•' : ''"
-      @click="toggleHelpCenter"
-    />
-
-    <!-- Help Center Popup positioned within canvas area -->
-    <Teleport to="#graph-canvas-container">
-      <div
-        v-if="isHelpCenterVisible"
-        class="help-center-popup"
-        :class="{
-          'sidebar-left': sidebarLocation === 'left',
-          'sidebar-right': sidebarLocation === 'right',
-          'small-sidebar': sidebarSize === 'small'
-        }"
-      >
-        <HelpCenterMenuContent @close="closeHelpCenter" />
-      </div>
-    </Teleport>
-
-    <!-- Release Notification Toast positioned within canvas area -->
-    <Teleport to="#graph-canvas-container">
-      <ReleaseNotificationToast
-        :class="{
-          'sidebar-left': sidebarLocation === 'left',
-          'sidebar-right': sidebarLocation === 'right',
-          'small-sidebar': sidebarSize === 'small'
-        }"
-      />
-    </Teleport>
-
-    <!-- WhatsNew Popup positioned within canvas area -->
-    <Teleport to="#graph-canvas-container">
-      <WhatsNewPopup
-        :class="{
-          'sidebar-left': sidebarLocation === 'left',
-          'sidebar-right': sidebarLocation === 'right',
-          'small-sidebar': sidebarSize === 'small'
-        }"
-        @whats-new-dismissed="handleWhatsNewDismissed"
-      />
-    </Teleport>
-
-    <!-- Backdrop to close popup when clicking outside -->
-    <Teleport to="body">
-      <div
-        v-if="isHelpCenterVisible"
-        class="help-center-backdrop"
-        @click="closeHelpCenter"
-      />
-    </Teleport>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { computed, onMounted } from 'vue'
@@ -144,6 +85,65 @@ onMounted(async () => {
 })
 </script>
 
+<template>
+  <div>
+    <SidebarIcon
+      icon="pi pi-question-circle"
+      class="comfy-help-center-btn"
+      :tooltip="$t('sideToolbar.helpCenter')"
+      :icon-badge="shouldShowRedDot ? '•' : ''"
+      @click="toggleHelpCenter"
+    />
+
+    <!-- Help Center Popup positioned within canvas area -->
+    <Teleport to="#graph-canvas-container">
+      <div
+        v-if="isHelpCenterVisible"
+        class="help-center-popup"
+        :class="{
+          'sidebar-left': sidebarLocation === 'left',
+          'sidebar-right': sidebarLocation === 'right',
+          'small-sidebar': sidebarSize === 'small'
+        }"
+      >
+        <HelpCenterMenuContent @close="closeHelpCenter" />
+      </div>
+    </Teleport>
+
+    <!-- Release Notification Toast positioned within canvas area -->
+    <Teleport to="#graph-canvas-container">
+      <ReleaseNotificationToast
+        :class="{
+          'sidebar-left': sidebarLocation === 'left',
+          'sidebar-right': sidebarLocation === 'right',
+          'small-sidebar': sidebarSize === 'small'
+        }"
+      />
+    </Teleport>
+
+    <!-- WhatsNew Popup positioned within canvas area -->
+    <Teleport to="#graph-canvas-container">
+      <WhatsNewPopup
+        :class="{
+          'sidebar-left': sidebarLocation === 'left',
+          'sidebar-right': sidebarLocation === 'right',
+          'small-sidebar': sidebarSize === 'small'
+        }"
+        @whats-new-dismissed="handleWhatsNewDismissed"
+      />
+    </Teleport>
+
+    <!-- Backdrop to close popup when clicking outside -->
+    <Teleport to="body">
+      <div
+        v-if="isHelpCenterVisible"
+        class="help-center-backdrop"
+        @click="closeHelpCenter"
+      />
+    </Teleport>
+  </div>
+</template>
+
 <style scoped>
 .help-center-backdrop {
   position: absolute;
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index 4edce9b5bf..ff0d20db02 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -1,3 +1,39 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import OverlayBadge from 'primevue/overlaybadge'
+import { computed } from 'vue'
+import type { Component } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const {
+  icon = '',
+  selected = false,
+  tooltip = '',
+  tooltipSuffix = '',
+  iconBadge = '',
+  label = '',
+  isSmall = false
+} = defineProps<{
+  icon?: string | Component
+  selected?: boolean
+  tooltip?: string
+  tooltipSuffix?: string
+  iconBadge?: string | (() => string | null)
+  label?: string
+  isSmall?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+const overlayValue = computed(() =>
+  typeof iconBadge === 'function' ? iconBadge() ?? '' : iconBadge
+)
+const shouldShowBadge = computed(() => !!overlayValue.value)
+const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
+</script>
+
 <template>
   <Button
     v-tooltip="{
@@ -46,42 +82,6 @@
   </Button>
 </template>
 
-<script setup lang="ts">
-import Button from 'primevue/button'
-import OverlayBadge from 'primevue/overlaybadge'
-import { computed } from 'vue'
-import type { Component } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-const {
-  icon = '',
-  selected = false,
-  tooltip = '',
-  tooltipSuffix = '',
-  iconBadge = '',
-  label = '',
-  isSmall = false
-} = defineProps<{
-  icon?: string | Component
-  selected?: boolean
-  tooltip?: string
-  tooltipSuffix?: string
-  iconBadge?: string | (() => string | null)
-  label?: string
-  isSmall?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'click', event: MouseEvent): void
-}>()
-const overlayValue = computed(() =>
-  typeof iconBadge === 'function' ? iconBadge() ?? '' : iconBadge
-)
-const shouldShowBadge = computed(() => !!overlayValue.value)
-const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
-</script>
-
 <style>
 .side-bar-button-icon {
   font-size: var(--sidebar-icon-size) !important;
diff --git a/src/components/sidebar/SidebarLogoutIcon.vue b/src/components/sidebar/SidebarLogoutIcon.vue
index db89817a76..9b6b51f0b9 100644
--- a/src/components/sidebar/SidebarLogoutIcon.vue
+++ b/src/components/sidebar/SidebarLogoutIcon.vue
@@ -1,7 +1,3 @@
-<template>
-  <SidebarIcon icon="pi pi-sign-out" :tooltip="tooltip" @click="logout" />
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -21,3 +17,7 @@ const logout = async () => {
   window.location.reload()
 }
 </script>
+
+<template>
+  <SidebarIcon icon="pi pi-sign-out" :tooltip="tooltip" @click="logout" />
+</template>
diff --git a/src/components/sidebar/SidebarShortcutsToggleButton.vue b/src/components/sidebar/SidebarShortcutsToggleButton.vue
index cbe5580089..7191e1b00a 100644
--- a/src/components/sidebar/SidebarShortcutsToggleButton.vue
+++ b/src/components/sidebar/SidebarShortcutsToggleButton.vue
@@ -1,15 +1,3 @@
-<template>
-  <SidebarIcon
-    :tooltip="tooltipText"
-    :selected="isShortcutsPanelVisible"
-    @click="toggleShortcutsPanel"
-  >
-    <template #icon>
-      <i-lucide:keyboard />
-    </template>
-  </SidebarIcon>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -37,3 +25,15 @@ const toggleShortcutsPanel = () => {
   bottomPanelStore.togglePanel('shortcuts')
 }
 </script>
+
+<template>
+  <SidebarIcon
+    :tooltip="tooltipText"
+    :selected="isShortcutsPanelVisible"
+    @click="toggleShortcutsPanel"
+  >
+    <template #icon>
+      <i-lucide:keyboard />
+    </template>
+  </SidebarIcon>
+</template>
diff --git a/src/components/sidebar/SidebarTemplatesButton.vue b/src/components/sidebar/SidebarTemplatesButton.vue
index e6c9e8f484..82d4ec6e77 100644
--- a/src/components/sidebar/SidebarTemplatesButton.vue
+++ b/src/components/sidebar/SidebarTemplatesButton.vue
@@ -1,14 +1,3 @@
-<template>
-  <SidebarIcon
-    icon="icon-[comfy--template]"
-    :tooltip="$t('sideToolbar.templates')"
-    :label="$t('sideToolbar.labels.templates')"
-    :is-small="isSmall"
-    class="templates-tab-button"
-    @click="openTemplates"
-  />
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -28,3 +17,14 @@ const openTemplates = () => {
   void commandStore.execute('Comfy.BrowseTemplates')
 }
 </script>
+
+<template>
+  <SidebarIcon
+    icon="icon-[comfy--template]"
+    :tooltip="$t('sideToolbar.templates')"
+    :label="$t('sideToolbar.labels.templates')"
+    :is-small="isSmall"
+    class="templates-tab-button"
+    @click="openTemplates"
+  />
+</template>
diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index ccb105bfe5..61a1a8bac4 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -1,49 +1,3 @@
-<template>
-  <SidebarTabTemplate
-    :title="$t('sideToolbar.modelLibrary')"
-    class="bg-(--p-tree-background)"
-  >
-    <template #tool-buttons>
-      <Button
-        v-tooltip.bottom="$t('g.refresh')"
-        icon="pi pi-refresh"
-        severity="secondary"
-        text
-        @click="modelStore.loadModelFolders"
-      />
-      <Button
-        v-tooltip.bottom="$t('g.loadAllFolders')"
-        icon="pi pi-cloud-download"
-        severity="secondary"
-        text
-        @click="modelStore.loadModels"
-      />
-    </template>
-    <template #header>
-      <SearchBox
-        v-model:model-value="searchQuery"
-        class="model-lib-search-box p-2 2xl:p-4"
-        :placeholder="$t('g.searchModels') + '...'"
-        @search="handleSearch"
-      />
-    </template>
-    <template #body>
-      <ElectronDownloadItems v-if="isElectron()" />
-
-      <TreeExplorer
-        v-model:expanded-keys="expandedKeys"
-        class="model-lib-tree-explorer"
-        :root="renderedRoot"
-      >
-        <template #node="{ node }">
-          <ModelTreeLeaf :node="node" />
-        </template>
-      </TreeExplorer>
-    </template>
-  </SidebarTabTemplate>
-  <div id="model-library-model-preview-container" />
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
@@ -187,6 +141,52 @@ onMounted(async () => {
 })
 </script>
 
+<template>
+  <SidebarTabTemplate
+    :title="$t('sideToolbar.modelLibrary')"
+    class="bg-(--p-tree-background)"
+  >
+    <template #tool-buttons>
+      <Button
+        v-tooltip.bottom="$t('g.refresh')"
+        icon="pi pi-refresh"
+        severity="secondary"
+        text
+        @click="modelStore.loadModelFolders"
+      />
+      <Button
+        v-tooltip.bottom="$t('g.loadAllFolders')"
+        icon="pi pi-cloud-download"
+        severity="secondary"
+        text
+        @click="modelStore.loadModels"
+      />
+    </template>
+    <template #header>
+      <SearchBox
+        v-model:model-value="searchQuery"
+        class="model-lib-search-box p-2 2xl:p-4"
+        :placeholder="$t('g.searchModels') + '...'"
+        @search="handleSearch"
+      />
+    </template>
+    <template #body>
+      <ElectronDownloadItems v-if="isElectron()" />
+
+      <TreeExplorer
+        v-model:expanded-keys="expandedKeys"
+        class="model-lib-tree-explorer"
+        :root="renderedRoot"
+      >
+        <template #node="{ node }">
+          <ModelTreeLeaf :node="node" />
+        </template>
+      </TreeExplorer>
+    </template>
+  </SidebarTabTemplate>
+  <div id="model-library-model-preview-container" />
+</template>
+
 <style scoped>
 :deep(.pi-fake-spacer) {
   height: 1px;
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
index 7cf1465011..5b7e305bfd 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -1,128 +1,3 @@
-<template>
-  <div class="h-full">
-    <SidebarTabTemplate
-      v-if="!isHelpOpen"
-      :title="$t('sideToolbar.nodeLibrary')"
-      class="bg-(--p-tree-background)"
-    >
-      <template #tool-buttons>
-        <Button
-          v-tooltip.bottom="$t('g.newFolder')"
-          class="new-folder-button"
-          icon="pi pi-folder-plus"
-          text
-          severity="secondary"
-          @click="nodeBookmarkTreeExplorerRef?.addNewBookmarkFolder()"
-        />
-        <Button
-          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.groupBy')"
-          :icon="selectedGroupingIcon"
-          text
-          severity="secondary"
-          @click="groupingPopover?.toggle($event)"
-        />
-        <Button
-          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortMode')"
-          :icon="selectedSortingIcon"
-          text
-          severity="secondary"
-          @click="sortingPopover?.toggle($event)"
-        />
-        <Button
-          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
-          icon="pi pi-filter-slash"
-          text
-          severity="secondary"
-          @click="resetOrganization"
-        />
-        <Button
-          v-tooltip.bottom="$t('menu.refresh')"
-          icon="pi pi-refresh"
-          text
-          severity="secondary"
-          @click="() => commandStore.execute('Comfy.RefreshNodeDefinitions')"
-        />
-        <Popover ref="groupingPopover">
-          <div class="flex flex-col gap-1 p-2">
-            <Button
-              v-for="option in groupingOptions"
-              :key="option.id"
-              :icon="option.icon"
-              :label="$t(option.label)"
-              text
-              :severity="
-                selectedGroupingId === option.id ? 'primary' : 'secondary'
-              "
-              class="justify-start"
-              @click="selectGrouping(option.id)"
-            />
-          </div>
-        </Popover>
-        <Popover ref="sortingPopover">
-          <div class="flex flex-col gap-1 p-2">
-            <Button
-              v-for="option in sortingOptions"
-              :key="option.id"
-              :icon="option.icon"
-              :label="$t(option.label)"
-              text
-              :severity="
-                selectedSortingId === option.id ? 'primary' : 'secondary'
-              "
-              class="justify-start"
-              @click="selectSorting(option.id)"
-            />
-          </div>
-        </Popover>
-      </template>
-      <template #header>
-        <div>
-          <SearchBox
-            v-model:model-value="searchQuery"
-            class="node-lib-search-box p-2 2xl:p-4"
-            :placeholder="$t('g.searchNodes') + '...'"
-            filter-icon="pi pi-filter"
-            :filters
-            @search="handleSearch"
-            @show-filter="($event) => searchFilter?.toggle($event)"
-            @remove-filter="onRemoveFilter"
-          />
-
-          <Popover ref="searchFilter" class="ml-[-13px]">
-            <NodeSearchFilter @add-filter="onAddFilter" />
-          </Popover>
-        </div>
-      </template>
-      <template #body>
-        <div>
-          <NodeBookmarkTreeExplorer
-            ref="nodeBookmarkTreeExplorerRef"
-            :filtered-node-defs="filteredNodeDefs"
-            :open-node-help="openHelp"
-          />
-          <Divider
-            v-show="nodeBookmarkStore.bookmarks.length > 0"
-            type="dashed"
-            class="m-2"
-          />
-          <TreeExplorer
-            v-model:expanded-keys="expandedKeys"
-            class="node-lib-tree-explorer"
-            :root="renderedRoot"
-          >
-            <template #node="{ node }">
-              <NodeTreeLeaf :node="node" :open-node-help="openHelp" />
-            </template>
-          </TreeExplorer>
-        </div>
-      </template>
-    </SidebarTabTemplate>
-
-    <NodeHelpPage v-else :node="currentHelpNode!" @close="closeHelp" />
-  </div>
-  <div id="node-library-node-preview-container" />
-</template>
-
 <script setup lang="ts">
 import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
@@ -330,3 +205,128 @@ const onRemoveFilter = async (filterAndValue) => {
   await handleSearch(searchQuery.value)
 }
 </script>
+
+<template>
+  <div class="h-full">
+    <SidebarTabTemplate
+      v-if="!isHelpOpen"
+      :title="$t('sideToolbar.nodeLibrary')"
+      class="bg-(--p-tree-background)"
+    >
+      <template #tool-buttons>
+        <Button
+          v-tooltip.bottom="$t('g.newFolder')"
+          class="new-folder-button"
+          icon="pi pi-folder-plus"
+          text
+          severity="secondary"
+          @click="nodeBookmarkTreeExplorerRef?.addNewBookmarkFolder()"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.groupBy')"
+          :icon="selectedGroupingIcon"
+          text
+          severity="secondary"
+          @click="groupingPopover?.toggle($event)"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortMode')"
+          :icon="selectedSortingIcon"
+          text
+          severity="secondary"
+          @click="sortingPopover?.toggle($event)"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
+          icon="pi pi-filter-slash"
+          text
+          severity="secondary"
+          @click="resetOrganization"
+        />
+        <Button
+          v-tooltip.bottom="$t('menu.refresh')"
+          icon="pi pi-refresh"
+          text
+          severity="secondary"
+          @click="() => commandStore.execute('Comfy.RefreshNodeDefinitions')"
+        />
+        <Popover ref="groupingPopover">
+          <div class="flex flex-col gap-1 p-2">
+            <Button
+              v-for="option in groupingOptions"
+              :key="option.id"
+              :icon="option.icon"
+              :label="$t(option.label)"
+              text
+              :severity="
+                selectedGroupingId === option.id ? 'primary' : 'secondary'
+              "
+              class="justify-start"
+              @click="selectGrouping(option.id)"
+            />
+          </div>
+        </Popover>
+        <Popover ref="sortingPopover">
+          <div class="flex flex-col gap-1 p-2">
+            <Button
+              v-for="option in sortingOptions"
+              :key="option.id"
+              :icon="option.icon"
+              :label="$t(option.label)"
+              text
+              :severity="
+                selectedSortingId === option.id ? 'primary' : 'secondary'
+              "
+              class="justify-start"
+              @click="selectSorting(option.id)"
+            />
+          </div>
+        </Popover>
+      </template>
+      <template #header>
+        <div>
+          <SearchBox
+            v-model:model-value="searchQuery"
+            class="node-lib-search-box p-2 2xl:p-4"
+            :placeholder="$t('g.searchNodes') + '...'"
+            filter-icon="pi pi-filter"
+            :filters
+            @search="handleSearch"
+            @show-filter="($event) => searchFilter?.toggle($event)"
+            @remove-filter="onRemoveFilter"
+          />
+
+          <Popover ref="searchFilter" class="ml-[-13px]">
+            <NodeSearchFilter @add-filter="onAddFilter" />
+          </Popover>
+        </div>
+      </template>
+      <template #body>
+        <div>
+          <NodeBookmarkTreeExplorer
+            ref="nodeBookmarkTreeExplorerRef"
+            :filtered-node-defs="filteredNodeDefs"
+            :open-node-help="openHelp"
+          />
+          <Divider
+            v-show="nodeBookmarkStore.bookmarks.length > 0"
+            type="dashed"
+            class="m-2"
+          />
+          <TreeExplorer
+            v-model:expanded-keys="expandedKeys"
+            class="node-lib-tree-explorer"
+            :root="renderedRoot"
+          >
+            <template #node="{ node }">
+              <NodeTreeLeaf :node="node" :open-node-help="openHelp" />
+            </template>
+          </TreeExplorer>
+        </div>
+      </template>
+    </SidebarTabTemplate>
+
+    <NodeHelpPage v-else :node="currentHelpNode!" @close="closeHelp" />
+  </div>
+  <div id="node-library-node-preview-container" />
+</template>
diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
index 9e1219c2fc..9e1920f265 100644
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -1,96 +1,3 @@
-<template>
-  <SidebarTabTemplate :title="$t('sideToolbar.queue')">
-    <template #tool-buttons>
-      <Button
-        v-tooltip.bottom="$t(`sideToolbar.queueTab.${imageFit}ImagePreview`)"
-        :icon="
-          imageFit === 'cover'
-            ? 'pi pi-arrow-down-left-and-arrow-up-right-to-center'
-            : 'pi pi-arrow-up-right-and-arrow-down-left-from-center'
-        "
-        text
-        severity="secondary"
-        class="toggle-expanded-button"
-        @click="toggleImageFit"
-      />
-      <Button
-        v-if="isInFolderView"
-        v-tooltip.bottom="$t('sideToolbar.queueTab.backToAllTasks')"
-        icon="pi pi-arrow-left"
-        text
-        severity="secondary"
-        class="back-button"
-        @click="exitFolderView"
-      />
-      <template v-else>
-        <Button
-          v-tooltip="$t('sideToolbar.queueTab.showFlatList')"
-          :icon="isExpanded ? 'pi pi-images' : 'pi pi-image'"
-          text
-          severity="secondary"
-          class="toggle-expanded-button"
-          @click="toggleExpanded"
-        />
-        <Button
-          v-if="queueStore.hasPendingTasks"
-          v-tooltip.bottom="$t('sideToolbar.queueTab.clearPendingTasks')"
-          icon="pi pi-stop"
-          severity="danger"
-          text
-          @click="() => commandStore.execute('Comfy.ClearPendingTasks')"
-        />
-        <Button
-          icon="pi pi-trash"
-          text
-          severity="primary"
-          class="clear-all-button"
-          @click="confirmRemoveAll($event)"
-        />
-      </template>
-    </template>
-    <template #body>
-      <VirtualGrid
-        v-if="allTasks?.length"
-        :items="allTasks"
-        :grid-style="{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-          padding: '0.5rem',
-          gap: '0.5rem'
-        }"
-      >
-        <template #item="{ item }">
-          <TaskItem
-            :task="item"
-            :is-flat-task="isExpanded || isInFolderView"
-            @contextmenu="handleContextMenu"
-            @preview="handlePreview"
-            @task-output-length-clicked="enterFolderView($event)"
-          />
-        </template>
-      </VirtualGrid>
-      <div v-else-if="queueStore.isLoading">
-        <ProgressSpinner
-          style="width: 50px; left: 50%; transform: translateX(-50%)"
-        />
-      </div>
-      <div v-else>
-        <NoResultsPlaceholder
-          icon="pi pi-info-circle"
-          :title="$t('g.noTasksFound')"
-          :message="$t('g.noTasksFoundMessage')"
-        />
-      </div>
-    </template>
-  </SidebarTabTemplate>
-  <ConfirmPopup />
-  <ContextMenu ref="menu" :model="menuItems" />
-  <ResultGallery
-    v-model:active-index="galleryActiveIndex"
-    :all-gallery-items="allGalleryItems"
-  />
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ConfirmPopup from 'primevue/confirmpopup'
@@ -284,3 +191,96 @@ watch(allTasks, () => {
   galleryActiveIndex.value = Math.max(0, newIndex)
 })
 </script>
+
+<template>
+  <SidebarTabTemplate :title="$t('sideToolbar.queue')">
+    <template #tool-buttons>
+      <Button
+        v-tooltip.bottom="$t(`sideToolbar.queueTab.${imageFit}ImagePreview`)"
+        :icon="
+          imageFit === 'cover'
+            ? 'pi pi-arrow-down-left-and-arrow-up-right-to-center'
+            : 'pi pi-arrow-up-right-and-arrow-down-left-from-center'
+        "
+        text
+        severity="secondary"
+        class="toggle-expanded-button"
+        @click="toggleImageFit"
+      />
+      <Button
+        v-if="isInFolderView"
+        v-tooltip.bottom="$t('sideToolbar.queueTab.backToAllTasks')"
+        icon="pi pi-arrow-left"
+        text
+        severity="secondary"
+        class="back-button"
+        @click="exitFolderView"
+      />
+      <template v-else>
+        <Button
+          v-tooltip="$t('sideToolbar.queueTab.showFlatList')"
+          :icon="isExpanded ? 'pi pi-images' : 'pi pi-image'"
+          text
+          severity="secondary"
+          class="toggle-expanded-button"
+          @click="toggleExpanded"
+        />
+        <Button
+          v-if="queueStore.hasPendingTasks"
+          v-tooltip.bottom="$t('sideToolbar.queueTab.clearPendingTasks')"
+          icon="pi pi-stop"
+          severity="danger"
+          text
+          @click="() => commandStore.execute('Comfy.ClearPendingTasks')"
+        />
+        <Button
+          icon="pi pi-trash"
+          text
+          severity="primary"
+          class="clear-all-button"
+          @click="confirmRemoveAll($event)"
+        />
+      </template>
+    </template>
+    <template #body>
+      <VirtualGrid
+        v-if="allTasks?.length"
+        :items="allTasks"
+        :grid-style="{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+          padding: '0.5rem',
+          gap: '0.5rem'
+        }"
+      >
+        <template #item="{ item }">
+          <TaskItem
+            :task="item"
+            :is-flat-task="isExpanded || isInFolderView"
+            @contextmenu="handleContextMenu"
+            @preview="handlePreview"
+            @task-output-length-clicked="enterFolderView($event)"
+          />
+        </template>
+      </VirtualGrid>
+      <div v-else-if="queueStore.isLoading">
+        <ProgressSpinner
+          style="width: 50px; left: 50%; transform: translateX(-50%)"
+        />
+      </div>
+      <div v-else>
+        <NoResultsPlaceholder
+          icon="pi pi-info-circle"
+          :title="$t('g.noTasksFound')"
+          :message="$t('g.noTasksFoundMessage')"
+        />
+      </div>
+    </template>
+  </SidebarTabTemplate>
+  <ConfirmPopup />
+  <ContextMenu ref="menu" :model="menuItems" />
+  <ResultGallery
+    v-model:active-index="galleryActiveIndex"
+    :all-gallery-items="allGalleryItems"
+  />
+</template>
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 8ce323125b..f15172f44d 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import Toolbar from 'primevue/toolbar'
+
+const props = defineProps<{
+  title: string
+  class?: string
+}>()
+</script>
+
 <template>
   <div
     class="comfy-vue-side-bar-container flex flex-col h-full group/sidebar-tab"
@@ -27,16 +37,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import ScrollPanel from 'primevue/scrollpanel'
-import Toolbar from 'primevue/toolbar'
-
-const props = defineProps<{
-  title: string
-  class?: string
-}>()
-</script>
-
 <style scoped>
 @reference '../../../assets/css/style.css';
 
diff --git a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
index 2e0df8b0e7..87ac23e579 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -1,132 +1,3 @@
-<template>
-  <SidebarTabTemplate
-    :title="$t('sideToolbar.workflows')"
-    class="workflows-sidebar-tab bg-(--p-tree-background)"
-  >
-    <template #tool-buttons>
-      <Button
-        v-tooltip.bottom="$t('g.refresh')"
-        icon="pi pi-refresh"
-        severity="secondary"
-        text
-        @click="workflowStore.syncWorkflows()"
-      />
-    </template>
-    <template #header>
-      <SearchBox
-        v-model:model-value="searchQuery"
-        class="workflows-search-box p-2 2xl:p-4"
-        :placeholder="$t('g.searchWorkflows') + '...'"
-        @search="handleSearch"
-      />
-    </template>
-    <template #body>
-      <div v-if="!isSearching" class="comfyui-workflows-panel">
-        <div
-          v-if="workflowTabsPosition === 'Sidebar'"
-          class="comfyui-workflows-open"
-        >
-          <TextDivider
-            :text="t('sideToolbar.workflowTab.workflowTreeType.open')"
-            type="dashed"
-            class="ml-2"
-          />
-          <TreeExplorer
-            v-model:expanded-keys="dummyExpandedKeys"
-            :root="renderTreeNode(openWorkflowsTree, WorkflowTreeType.Open)"
-            :selection-keys="selectionKeys"
-          >
-            <template #node="{ node }">
-              <TreeExplorerTreeNode :node="node">
-                <template #before-label="{ node: treeNode }">
-                  <span
-                    v-if="
-                      treeNode.data?.isModified || !treeNode.data?.isPersisted
-                    "
-                    >*</span
-                  >
-                </template>
-                <template #actions="{ node: treeNode }">
-                  <Button
-                    class="close-workflow-button"
-                    icon="pi pi-times"
-                    text
-                    :severity="
-                      workspaceStore.shiftDown ? 'danger' : 'secondary'
-                    "
-                    size="small"
-                    @click.stop="
-                      handleCloseWorkflow(treeNode.data as ComfyWorkflow)
-                    "
-                  />
-                </template>
-              </TreeExplorerTreeNode>
-            </template>
-          </TreeExplorer>
-        </div>
-        <div
-          v-show="workflowStore.bookmarkedWorkflows.length > 0"
-          class="comfyui-workflows-bookmarks"
-        >
-          <TextDivider
-            :text="t('sideToolbar.workflowTab.workflowTreeType.bookmarks')"
-            type="dashed"
-            class="ml-2"
-          />
-          <TreeExplorer
-            v-model:expanded-keys="dummyExpandedKeys"
-            :root="
-              renderTreeNode(
-                bookmarkedWorkflowsTree,
-                WorkflowTreeType.Bookmarks
-              )
-            "
-            :selection-keys="selectionKeys"
-          >
-            <template #node="{ node }">
-              <WorkflowTreeLeaf :node="node" />
-            </template>
-          </TreeExplorer>
-        </div>
-        <div class="comfyui-workflows-browse">
-          <TextDivider
-            :text="t('sideToolbar.workflowTab.workflowTreeType.browse')"
-            type="dashed"
-            class="ml-2"
-          />
-          <TreeExplorer
-            v-if="workflowStore.persistedWorkflows.length > 0"
-            v-model:expanded-keys="expandedKeys"
-            :root="renderTreeNode(workflowsTree, WorkflowTreeType.Browse)"
-            :selection-keys="selectionKeys"
-          >
-            <template #node="{ node }">
-              <WorkflowTreeLeaf :node="node" />
-            </template>
-          </TreeExplorer>
-          <NoResultsPlaceholder
-            v-else
-            icon="pi pi-folder"
-            :title="$t('g.empty')"
-            :message="$t('g.noWorkflowsFound')"
-          />
-        </div>
-      </div>
-      <div v-else class="comfyui-workflows-search-panel">
-        <TreeExplorer
-          v-model:expanded-keys="expandedKeys"
-          :root="renderTreeNode(filteredRoot, WorkflowTreeType.Browse)"
-        >
-          <template #node="{ node }">
-            <WorkflowTreeLeaf :node="node" />
-          </template>
-        </TreeExplorer>
-      </div>
-    </template>
-  </SidebarTabTemplate>
-  <ConfirmDialog />
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ConfirmDialog from 'primevue/confirmdialog'
@@ -299,3 +170,132 @@ onMounted(async () => {
   await workflowBookmarkStore.loadBookmarks()
 })
 </script>
+
+<template>
+  <SidebarTabTemplate
+    :title="$t('sideToolbar.workflows')"
+    class="workflows-sidebar-tab bg-(--p-tree-background)"
+  >
+    <template #tool-buttons>
+      <Button
+        v-tooltip.bottom="$t('g.refresh')"
+        icon="pi pi-refresh"
+        severity="secondary"
+        text
+        @click="workflowStore.syncWorkflows()"
+      />
+    </template>
+    <template #header>
+      <SearchBox
+        v-model:model-value="searchQuery"
+        class="workflows-search-box p-2 2xl:p-4"
+        :placeholder="$t('g.searchWorkflows') + '...'"
+        @search="handleSearch"
+      />
+    </template>
+    <template #body>
+      <div v-if="!isSearching" class="comfyui-workflows-panel">
+        <div
+          v-if="workflowTabsPosition === 'Sidebar'"
+          class="comfyui-workflows-open"
+        >
+          <TextDivider
+            :text="t('sideToolbar.workflowTab.workflowTreeType.open')"
+            type="dashed"
+            class="ml-2"
+          />
+          <TreeExplorer
+            v-model:expanded-keys="dummyExpandedKeys"
+            :root="renderTreeNode(openWorkflowsTree, WorkflowTreeType.Open)"
+            :selection-keys="selectionKeys"
+          >
+            <template #node="{ node }">
+              <TreeExplorerTreeNode :node="node">
+                <template #before-label="{ node: treeNode }">
+                  <span
+                    v-if="
+                      treeNode.data?.isModified || !treeNode.data?.isPersisted
+                    "
+                    >*</span
+                  >
+                </template>
+                <template #actions="{ node: treeNode }">
+                  <Button
+                    class="close-workflow-button"
+                    icon="pi pi-times"
+                    text
+                    :severity="
+                      workspaceStore.shiftDown ? 'danger' : 'secondary'
+                    "
+                    size="small"
+                    @click.stop="
+                      handleCloseWorkflow(treeNode.data as ComfyWorkflow)
+                    "
+                  />
+                </template>
+              </TreeExplorerTreeNode>
+            </template>
+          </TreeExplorer>
+        </div>
+        <div
+          v-show="workflowStore.bookmarkedWorkflows.length > 0"
+          class="comfyui-workflows-bookmarks"
+        >
+          <TextDivider
+            :text="t('sideToolbar.workflowTab.workflowTreeType.bookmarks')"
+            type="dashed"
+            class="ml-2"
+          />
+          <TreeExplorer
+            v-model:expanded-keys="dummyExpandedKeys"
+            :root="
+              renderTreeNode(
+                bookmarkedWorkflowsTree,
+                WorkflowTreeType.Bookmarks
+              )
+            "
+            :selection-keys="selectionKeys"
+          >
+            <template #node="{ node }">
+              <WorkflowTreeLeaf :node="node" />
+            </template>
+          </TreeExplorer>
+        </div>
+        <div class="comfyui-workflows-browse">
+          <TextDivider
+            :text="t('sideToolbar.workflowTab.workflowTreeType.browse')"
+            type="dashed"
+            class="ml-2"
+          />
+          <TreeExplorer
+            v-if="workflowStore.persistedWorkflows.length > 0"
+            v-model:expanded-keys="expandedKeys"
+            :root="renderTreeNode(workflowsTree, WorkflowTreeType.Browse)"
+            :selection-keys="selectionKeys"
+          >
+            <template #node="{ node }">
+              <WorkflowTreeLeaf :node="node" />
+            </template>
+          </TreeExplorer>
+          <NoResultsPlaceholder
+            v-else
+            icon="pi pi-folder"
+            :title="$t('g.empty')"
+            :message="$t('g.noWorkflowsFound')"
+          />
+        </div>
+      </div>
+      <div v-else class="comfyui-workflows-search-panel">
+        <TreeExplorer
+          v-model:expanded-keys="expandedKeys"
+          :root="renderTreeNode(filteredRoot, WorkflowTreeType.Browse)"
+        >
+          <template #node="{ node }">
+            <WorkflowTreeLeaf :node="node" />
+          </template>
+        </TreeExplorer>
+      </div>
+    </template>
+  </SidebarTabTemplate>
+  <ConfirmDialog />
+</template>
diff --git a/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue b/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
index 3b62fc9f2a..8dc005305b 100644
--- a/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
+++ b/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
@@ -1,3 +1,46 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Chip from 'primevue/chip'
+import ProgressBar from 'primevue/progressbar'
+import { useI18n } from 'vue-i18n'
+
+import {
+  type ElectronDownload,
+  useElectronDownloadStore
+} from '@/stores/electronDownloadStore'
+
+const { t } = useI18n()
+
+const electronDownloadStore = useElectronDownloadStore()
+
+const props = defineProps<{
+  download: ElectronDownload
+}>()
+
+const getDownloadLabel = (savePath: string) => {
+  let parts = savePath.split('/')
+  parts = parts.length === 1 ? parts[0].split('\\') : parts
+  const name = parts.pop()
+  const dir = parts.pop()
+  return `${dir}/${name}`
+}
+
+const triggerCancelDownload = () =>
+  electronDownloadStore.cancel(props.download.url)
+const triggerPauseDownload = () =>
+  electronDownloadStore.pause(props.download.url)
+const triggerResumeDownload = () =>
+  electronDownloadStore.resume(props.download.url)
+
+const handleRemoveDownload = () => {
+  electronDownloadStore.$patch((state) => {
+    state.downloads = state.downloads.filter(
+      ({ url }) => url !== props.download.url
+    )
+  })
+}
+</script>
+
 <template>
   <div class="flex flex-col">
     <div>
@@ -60,46 +103,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Chip from 'primevue/chip'
-import ProgressBar from 'primevue/progressbar'
-import { useI18n } from 'vue-i18n'
-
-import {
-  type ElectronDownload,
-  useElectronDownloadStore
-} from '@/stores/electronDownloadStore'
-
-const { t } = useI18n()
-
-const electronDownloadStore = useElectronDownloadStore()
-
-const props = defineProps<{
-  download: ElectronDownload
-}>()
-
-const getDownloadLabel = (savePath: string) => {
-  let parts = savePath.split('/')
-  parts = parts.length === 1 ? parts[0].split('\\') : parts
-  const name = parts.pop()
-  const dir = parts.pop()
-  return `${dir}/${name}`
-}
-
-const triggerCancelDownload = () =>
-  electronDownloadStore.cancel(props.download.url)
-const triggerPauseDownload = () =>
-  electronDownloadStore.pause(props.download.url)
-const triggerResumeDownload = () =>
-  electronDownloadStore.resume(props.download.url)
-
-const handleRemoveDownload = () => {
-  electronDownloadStore.$patch((state) => {
-    state.downloads = state.downloads.filter(
-      ({ url }) => url !== props.download.url
-    )
-  })
-}
-</script>
diff --git a/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue b/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue
index 6a6f722ccf..d291df7ef7 100644
--- a/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue
@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+
+import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+
+import DownloadItem from './DownloadItem.vue'
+
+const electronDownloadStore = useElectronDownloadStore()
+const { inProgressDownloads } = storeToRefs(electronDownloadStore)
+</script>
+
 <template>
   <div v-if="inProgressDownloads.length > 0" class="mx-6 mb-4">
     <div class="text-lg my-4">
@@ -9,14 +20,3 @@
     </template>
   </div>
 </template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
-import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
-
-import DownloadItem from './DownloadItem.vue'
-
-const electronDownloadStore = useElectronDownloadStore()
-const { inProgressDownloads } = storeToRefs(electronDownloadStore)
-</script>
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
index 3d5032b98c..3d5f3902a5 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import { ComfyModelDef } from '@/stores/modelStore'
+
+const props = defineProps({
+  modelDef: {
+    type: ComfyModelDef,
+    required: true
+  }
+})
+
+const modelDef = props.modelDef
+</script>
+
 <template>
   <div class="model_preview">
     <div class="model_preview_title">
@@ -33,19 +46,6 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { ComfyModelDef } from '@/stores/modelStore'
-
-const props = defineProps({
-  modelDef: {
-    type: ComfyModelDef,
-    required: true
-  }
-})
-
-const modelDef = props.modelDef
-</script>
 <style scoped>
 .model_preview {
   background-color: var(--comfy-menu-bg);
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index ed16819e38..508680e6b7 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -1,24 +1,3 @@
-<template>
-  <div ref="container" class="model-lib-node-container h-full w-full">
-    <TreeExplorerTreeNode :node="node">
-      <template #before-label>
-        <span v-if="modelPreviewUrl" class="model-lib-model-icon-container">
-          <span
-            class="model-lib-model-icon"
-            :style="{ backgroundImage: `url(${modelPreviewUrl})` }"
-          />
-        </span>
-      </template>
-    </TreeExplorerTreeNode>
-
-    <teleport v-if="showPreview" to="#model-library-model-preview-container">
-      <div class="model-lib-model-preview" :style="modelPreviewStyle">
-        <ModelPreview ref="previewRef" :model-def="modelDef" />
-      </div>
-    </teleport>
-  </div>
-</template>
-
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
@@ -123,6 +102,27 @@ onUnmounted(() => {
 })
 </script>
 
+<template>
+  <div ref="container" class="model-lib-node-container h-full w-full">
+    <TreeExplorerTreeNode :node="node">
+      <template #before-label>
+        <span v-if="modelPreviewUrl" class="model-lib-model-icon-container">
+          <span
+            class="model-lib-model-icon"
+            :style="{ backgroundImage: `url(${modelPreviewUrl})` }"
+          />
+        </span>
+      </template>
+    </TreeExplorerTreeNode>
+
+    <teleport v-if="showPreview" to="#model-library-model-preview-container">
+      <div class="model-lib-model-preview" :style="modelPreviewStyle">
+        <ModelPreview ref="previewRef" :model-def="modelDef" />
+      </div>
+    </teleport>
+  </div>
+</template>
+
 <style scoped>
 .model-lib-model-icon-container {
   display: inline-block;
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue b/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
index 8c15c27d18..43d4bc3519 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
@@ -1,26 +1,3 @@
-<template>
-  <TreeExplorer
-    ref="treeExplorerRef"
-    class="node-lib-bookmark-tree-explorer"
-    :root="renderedBookmarkedRoot"
-    :expanded-keys="expandedKeys"
-  >
-    <template #folder="{ node }">
-      <NodeTreeFolder :node="node" />
-    </template>
-    <template #node="{ node }">
-      <NodeTreeLeaf :node="node" :open-node-help="props.openNodeHelp" />
-    </template>
-  </TreeExplorer>
-
-  <FolderCustomizationDialog
-    v-model="showCustomizationDialog"
-    :initial-icon="initialIcon"
-    :initial-color="initialColor"
-    @confirm="updateCustomization"
-  />
-</template>
-
 <script setup lang="ts">
 import { computed, h, nextTick, ref, render, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -222,3 +199,26 @@ const updateCustomization = async (icon: string, color: string) => {
   }
 }
 </script>
+
+<template>
+  <TreeExplorer
+    ref="treeExplorerRef"
+    class="node-lib-bookmark-tree-explorer"
+    :root="renderedBookmarkedRoot"
+    :expanded-keys="expandedKeys"
+  >
+    <template #folder="{ node }">
+      <NodeTreeFolder :node="node" />
+    </template>
+    <template #node="{ node }">
+      <NodeTreeLeaf :node="node" :open-node-help="props.openNodeHelp" />
+    </template>
+  </TreeExplorer>
+
+  <FolderCustomizationDialog
+    v-model="showCustomizationDialog"
+    :initial-icon="initialIcon"
+    :initial-color="initialColor"
+    @confirm="updateCustomization"
+  />
+</template>
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
index a1da62b4fc..25185d114f 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
@@ -1,3 +1,38 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed } from 'vue'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+
+const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
+
+const nodeHelpStore = useNodeHelpStore()
+const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+
+const inputList = computed(() =>
+  Object.values(node.inputs).map((spec) => ({
+    name: spec.name,
+    type: spec.type,
+    tooltip: spec.tooltip || ''
+  }))
+)
+
+const outputList = computed(() =>
+  node.outputs.map((spec) => ({
+    name: spec.name,
+    type: spec.type,
+    tooltip: spec.tooltip || ''
+  }))
+)
+</script>
+
 <template>
   <div class="flex flex-col h-full bg-(--p-tree-background) overflow-auto">
     <div
@@ -83,41 +118,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
-import ProgressSpinner from 'primevue/progressspinner'
-import { computed } from 'vue'
-
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
-
-const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
-
-const nodeHelpStore = useNodeHelpStore()
-const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
-
-defineEmits<{
-  (e: 'close'): void
-}>()
-
-const inputList = computed(() =>
-  Object.values(node.inputs).map((spec) => ({
-    name: spec.name,
-    type: spec.type,
-    tooltip: spec.tooltip || ''
-  }))
-)
-
-const outputList = computed(() =>
-  node.outputs.map((spec) => ({
-    name: spec.name,
-    type: spec.type,
-    tooltip: spec.tooltip || ''
-  }))
-)
-</script>
-
 <style scoped>
 @reference './../../../../assets/css/style.css';
 
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue
index 800d07ff9f..46780a4a68 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue
@@ -1,9 +1,3 @@
-<template>
-  <div ref="container" class="node-lib-node-container">
-    <TreeExplorerTreeNode :node="node" @item-dropped="handleItemDrop" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
 
@@ -65,3 +59,9 @@ const handleItemDrop = (node: RenderedTreeExplorerNode) => {
   expandedKeys.value[node.key] = true
 }
 </script>
+
+<template>
+  <div ref="container" class="node-lib-node-container">
+    <TreeExplorerTreeNode :node="node" @item-dropped="handleItemDrop" />
+  </div>
+</template>
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
index b0f64f196c..666feec752 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -1,71 +1,3 @@
-<template>
-  <div ref="container" class="node-lib-node-container">
-    <TreeExplorerTreeNode :node="node" @contextmenu="handleContextMenu">
-      <template #before-label>
-        <Tag
-          v-if="nodeDef.experimental"
-          :value="$t('g.experimental')"
-          severity="primary"
-        />
-        <Tag
-          v-if="nodeDef.deprecated"
-          :value="$t('g.deprecated')"
-          severity="danger"
-        />
-      </template>
-      <template
-        v-if="nodeDef.name.startsWith(useSubgraphStore().typePrefix)"
-        #actions
-      >
-        <Button
-          size="small"
-          icon="pi pi-trash"
-          text
-          severity="danger"
-          @click.stop="deleteBlueprint"
-        >
-        </Button>
-        <Button
-          size="small"
-          text
-          severity="secondary"
-          @click.stop="editBlueprint"
-        >
-          <template #icon>
-            <i-lucide:square-pen />
-          </template>
-        </Button>
-      </template>
-      <template v-else #actions>
-        <Button
-          class="bookmark-button"
-          size="small"
-          :icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
-          text
-          severity="secondary"
-          @click.stop="toggleBookmark"
-        />
-        <Button
-          v-tooltip.bottom="$t('g.learnMore')"
-          class="help-button"
-          size="small"
-          icon="pi pi-question"
-          text
-          severity="secondary"
-          @click.stop="props.openNodeHelp(nodeDef)"
-        />
-      </template>
-    </TreeExplorerTreeNode>
-
-    <teleport v-if="isHovered" to="#node-library-node-preview-container">
-      <div class="node-lib-node-preview" :style="nodePreviewStyle">
-        <NodePreview ref="previewRef" :node-def="nodeDef" />
-      </div>
-    </teleport>
-  </div>
-  <ContextMenu ref="menu" :model="menuItems" />
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ContextMenu from 'primevue/contextmenu'
@@ -183,6 +115,74 @@ onUnmounted(() => {
 })
 </script>
 
+<template>
+  <div ref="container" class="node-lib-node-container">
+    <TreeExplorerTreeNode :node="node" @contextmenu="handleContextMenu">
+      <template #before-label>
+        <Tag
+          v-if="nodeDef.experimental"
+          :value="$t('g.experimental')"
+          severity="primary"
+        />
+        <Tag
+          v-if="nodeDef.deprecated"
+          :value="$t('g.deprecated')"
+          severity="danger"
+        />
+      </template>
+      <template
+        v-if="nodeDef.name.startsWith(useSubgraphStore().typePrefix)"
+        #actions
+      >
+        <Button
+          size="small"
+          icon="pi pi-trash"
+          text
+          severity="danger"
+          @click.stop="deleteBlueprint"
+        >
+        </Button>
+        <Button
+          size="small"
+          text
+          severity="secondary"
+          @click.stop="editBlueprint"
+        >
+          <template #icon>
+            <i-lucide:square-pen />
+          </template>
+        </Button>
+      </template>
+      <template v-else #actions>
+        <Button
+          class="bookmark-button"
+          size="small"
+          :icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
+          text
+          severity="secondary"
+          @click.stop="toggleBookmark"
+        />
+        <Button
+          v-tooltip.bottom="$t('g.learnMore')"
+          class="help-button"
+          size="small"
+          icon="pi pi-question"
+          text
+          severity="secondary"
+          @click.stop="props.openNodeHelp(nodeDef)"
+        />
+      </template>
+    </TreeExplorerTreeNode>
+
+    <teleport v-if="isHovered" to="#node-library-node-preview-container">
+      <div class="node-lib-node-preview" :style="nodePreviewStyle">
+        <NodePreview ref="previewRef" :node-def="nodeDef" />
+      </div>
+    </teleport>
+  </div>
+  <ContextMenu ref="menu" :model="menuItems" />
+</template>
+
 <style scoped>
 @reference '../../../../assets/css/style.css';
 
diff --git a/src/components/sidebar/tabs/queue/ResultAudio.vue b/src/components/sidebar/tabs/queue/ResultAudio.vue
index 7a55fb8543..a746930892 100644
--- a/src/components/sidebar/tabs/queue/ResultAudio.vue
+++ b/src/components/sidebar/tabs/queue/ResultAudio.vue
@@ -1,10 +1,3 @@
-<template>
-  <audio controls width="100%" height="100%">
-    <source :src="url" :type="htmlAudioType" />
-    {{ $t('g.audioFailedToLoad') }}
-  </audio>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -17,3 +10,10 @@ const { result } = defineProps<{
 const url = computed(() => result.url)
 const htmlAudioType = computed(() => result.htmlAudioType)
 </script>
+
+<template>
+  <audio controls width="100%" height="100%">
+    <source :src="url" :type="htmlAudioType" />
+    {{ $t('g.audioFailedToLoad') }}
+  </audio>
+</template>
diff --git a/src/components/sidebar/tabs/queue/ResultGallery.vue b/src/components/sidebar/tabs/queue/ResultGallery.vue
index 430567da22..4bf830b631 100644
--- a/src/components/sidebar/tabs/queue/ResultGallery.vue
+++ b/src/components/sidebar/tabs/queue/ResultGallery.vue
@@ -1,45 +1,3 @@
-<template>
-  <Galleria
-    v-model:visible="galleryVisible"
-    :active-index="activeIndex"
-    :value="allGalleryItems"
-    :show-indicators="false"
-    change-item-on-indicator-hover
-    show-item-navigators
-    full-screen
-    circular
-    :show-thumbnails="false"
-    :pt="{
-      mask: {
-        onMousedown: onMaskMouseDown,
-        onMouseup: onMaskMouseUp,
-        'data-mask': true
-      },
-      prevButton: {
-        style: 'position: fixed !important'
-      },
-      nextButton: {
-        style: 'position: fixed !important'
-      }
-    }"
-    @update:visible="handleVisibilityChange"
-    @update:active-index="handleActiveIndexChange"
-  >
-    <template #item="{ item }">
-      <ComfyImage
-        v-if="item.isImage"
-        :key="item.url"
-        :src="item.url"
-        :contain="false"
-        :alt="item.filename"
-        class="galleria-image"
-      />
-      <ResultVideo v-else-if="item.isVideo" :result="item" />
-      <ResultAudio v-else-if="item.isAudio" :result="item" />
-    </template>
-  </Galleria>
-</template>
-
 <script setup lang="ts">
 import Galleria from 'primevue/galleria'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
@@ -131,6 +89,48 @@ onUnmounted(() => {
 })
 </script>
 
+<template>
+  <Galleria
+    v-model:visible="galleryVisible"
+    :active-index="activeIndex"
+    :value="allGalleryItems"
+    :show-indicators="false"
+    change-item-on-indicator-hover
+    show-item-navigators
+    full-screen
+    circular
+    :show-thumbnails="false"
+    :pt="{
+      mask: {
+        onMousedown: onMaskMouseDown,
+        onMouseup: onMaskMouseUp,
+        'data-mask': true
+      },
+      prevButton: {
+        style: 'position: fixed !important'
+      },
+      nextButton: {
+        style: 'position: fixed !important'
+      }
+    }"
+    @update:visible="handleVisibilityChange"
+    @update:active-index="handleActiveIndexChange"
+  >
+    <template #item="{ item }">
+      <ComfyImage
+        v-if="item.isImage"
+        :key="item.url"
+        :src="item.url"
+        :contain="false"
+        :alt="item.filename"
+        class="galleria-image"
+      />
+      <ResultVideo v-else-if="item.isVideo" :result="item" />
+      <ResultAudio v-else-if="item.isAudio" :result="item" />
+    </template>
+  </Galleria>
+</template>
+
 <style>
 /* PrimeVue's galleria teleports the fullscreen gallery out of subtree so we
 cannot use scoped style here. */
diff --git a/src/components/sidebar/tabs/queue/ResultItem.vue b/src/components/sidebar/tabs/queue/ResultItem.vue
index f4dad64fa6..d6f90cb190 100644
--- a/src/components/sidebar/tabs/queue/ResultItem.vue
+++ b/src/components/sidebar/tabs/queue/ResultItem.vue
@@ -1,25 +1,3 @@
-<template>
-  <div
-    ref="resultContainer"
-    class="result-container"
-    @click="handlePreviewClick"
-  >
-    <ComfyImage
-      v-if="result.isImage"
-      :src="result.url"
-      class="task-output-image"
-      :contain="imageFit === 'contain'"
-      :alt="result.filename"
-    />
-    <ResultVideo v-else-if="result.isVideo" :result="result" />
-    <ResultAudio v-else-if="result.isAudio" :result="result" />
-    <div v-else class="task-result-preview">
-      <i class="pi pi-file" />
-      <span>{{ result.mediaType }}</span>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 
@@ -59,6 +37,28 @@ onMounted(() => {
 })
 </script>
 
+<template>
+  <div
+    ref="resultContainer"
+    class="result-container"
+    @click="handlePreviewClick"
+  >
+    <ComfyImage
+      v-if="result.isImage"
+      :src="result.url"
+      class="task-output-image"
+      :contain="imageFit === 'contain'"
+      :alt="result.filename"
+    />
+    <ResultVideo v-else-if="result.isVideo" :result="result" />
+    <ResultAudio v-else-if="result.isAudio" :result="result" />
+    <div v-else class="task-result-preview">
+      <i class="pi pi-file" />
+      <span>{{ result.mediaType }}</span>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .result-container {
   width: 100%;
diff --git a/src/components/sidebar/tabs/queue/ResultVideo.vue b/src/components/sidebar/tabs/queue/ResultVideo.vue
index d8b0764fec..555bb6813b 100644
--- a/src/components/sidebar/tabs/queue/ResultVideo.vue
+++ b/src/components/sidebar/tabs/queue/ResultVideo.vue
@@ -1,10 +1,3 @@
-<template>
-  <video controls width="100%" height="100%">
-    <source :src="url" :type="htmlVideoType" />
-    {{ $t('g.videoFailedToLoad') }}
-  </video>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -37,3 +30,10 @@ const htmlVideoType = computed(() =>
   vhsAdvancedPreviews.value ? 'video/webm' : props.result.htmlVideoType
 )
 </script>
+
+<template>
+  <video controls width="100%" height="100%">
+    <source :src="url" :type="htmlVideoType" />
+    {{ $t('g.videoFailedToLoad') }}
+  </video>
+</template>
diff --git a/src/components/sidebar/tabs/queue/TaskItem.vue b/src/components/sidebar/tabs/queue/TaskItem.vue
index 6f4297d5e1..0ede608729 100644
--- a/src/components/sidebar/tabs/queue/TaskItem.vue
+++ b/src/components/sidebar/tabs/queue/TaskItem.vue
@@ -1,78 +1,3 @@
-<template>
-  <div class="task-item" @contextmenu="handleContextMenu">
-    <div class="task-result-preview">
-      <template
-        v-if="
-          task.displayStatus === TaskItemDisplayStatus.Completed ||
-          cancelledWithResults
-        "
-      >
-        <ResultItem
-          v-if="flatOutputs.length && coverResult"
-          :result="coverResult"
-          @preview="handlePreview"
-        />
-      </template>
-      <template v-if="task.displayStatus === TaskItemDisplayStatus.Running">
-        <i v-if="!progressPreviewBlobUrl" class="pi pi-spin pi-spinner" />
-        <img
-          v-else
-          :src="progressPreviewBlobUrl"
-          class="progress-preview-img"
-        />
-      </template>
-      <span v-else-if="task.displayStatus === TaskItemDisplayStatus.Pending"
-        >...</span
-      >
-      <i
-        v-else-if="cancelledWithoutResults"
-        class="pi pi-exclamation-triangle"
-      />
-      <i
-        v-else-if="task.displayStatus === TaskItemDisplayStatus.Failed"
-        class="pi pi-exclamation-circle"
-      />
-    </div>
-
-    <div class="task-item-details">
-      <div class="tag-wrapper status-tag-group">
-        <Tag v-if="isFlatTask && task.isHistory" class="node-name-tag">
-          <Button
-            class="task-node-link"
-            :label="`${node?.type} (#${node?.id})`"
-            link
-            size="small"
-            @click="
-              () => {
-                if (!node) return
-                litegraphService.goToNode(node.id)
-              }
-            "
-          />
-        </Tag>
-        <Tag :severity="taskTagSeverity(task.displayStatus)">
-          <span v-html="taskStatusText(task.displayStatus)" />
-          <span v-if="task.isHistory" class="task-time">
-            {{ formatTime(task.executionTimeInSeconds) }}
-          </span>
-          <span v-if="isFlatTask" class="task-prompt-id">
-            {{ task.promptId.split('-')[0] }}
-          </span>
-        </Tag>
-      </div>
-      <div class="tag-wrapper">
-        <Button
-          v-if="task.isHistory && flatOutputs.length > 1"
-          outlined
-          @click="handleOutputLengthClick"
-        >
-          <span style="font-weight: bold">{{ flatOutputs.length }}</span>
-        </Button>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Tag from 'primevue/tag'
@@ -198,6 +123,81 @@ const cancelledWithoutResults = computed(() => {
 })
 </script>
 
+<template>
+  <div class="task-item" @contextmenu="handleContextMenu">
+    <div class="task-result-preview">
+      <template
+        v-if="
+          task.displayStatus === TaskItemDisplayStatus.Completed ||
+          cancelledWithResults
+        "
+      >
+        <ResultItem
+          v-if="flatOutputs.length && coverResult"
+          :result="coverResult"
+          @preview="handlePreview"
+        />
+      </template>
+      <template v-if="task.displayStatus === TaskItemDisplayStatus.Running">
+        <i v-if="!progressPreviewBlobUrl" class="pi pi-spin pi-spinner" />
+        <img
+          v-else
+          :src="progressPreviewBlobUrl"
+          class="progress-preview-img"
+        />
+      </template>
+      <span v-else-if="task.displayStatus === TaskItemDisplayStatus.Pending"
+        >...</span
+      >
+      <i
+        v-else-if="cancelledWithoutResults"
+        class="pi pi-exclamation-triangle"
+      />
+      <i
+        v-else-if="task.displayStatus === TaskItemDisplayStatus.Failed"
+        class="pi pi-exclamation-circle"
+      />
+    </div>
+
+    <div class="task-item-details">
+      <div class="tag-wrapper status-tag-group">
+        <Tag v-if="isFlatTask && task.isHistory" class="node-name-tag">
+          <Button
+            class="task-node-link"
+            :label="`${node?.type} (#${node?.id})`"
+            link
+            size="small"
+            @click="
+              () => {
+                if (!node) return
+                litegraphService.goToNode(node.id)
+              }
+            "
+          />
+        </Tag>
+        <Tag :severity="taskTagSeverity(task.displayStatus)">
+          <span v-html="taskStatusText(task.displayStatus)" />
+          <span v-if="task.isHistory" class="task-time">
+            {{ formatTime(task.executionTimeInSeconds) }}
+          </span>
+          <span v-if="isFlatTask" class="task-prompt-id">
+            {{ task.promptId.split('-')[0] }}
+          </span>
+        </Tag>
+      </div>
+      <div class="tag-wrapper">
+        <Button
+          v-if="task.isHistory && flatOutputs.length > 1"
+          outlined
+          @click="handleOutputLengthClick"
+        >
+          <span style="font-weight: bold">{{ flatOutputs.length }}</span>
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .task-result-preview {
   aspect-ratio: 1 / 1;
diff --git a/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue b/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
index c1f2078f8c..198b659936 100644
--- a/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
+++ b/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
@@ -1,17 +1,3 @@
-<template>
-  <TreeExplorerTreeNode :node="node">
-    <template #actions>
-      <Button
-        :icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
-        text
-        severity="secondary"
-        size="small"
-        @click.stop="handleBookmarkClick"
-      />
-    </template>
-  </TreeExplorerTreeNode>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
@@ -36,3 +22,17 @@ const handleBookmarkClick = async () => {
   }
 }
 </script>
+
+<template>
+  <TreeExplorerTreeNode :node="node">
+    <template #actions>
+      <Button
+        :icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
+        text
+        severity="secondary"
+        size="small"
+        @click.stop="handleBookmarkClick"
+      />
+    </template>
+  </TreeExplorerTreeNode>
+</template>
diff --git a/src/components/templates/TemplateSearchBar.vue b/src/components/templates/TemplateSearchBar.vue
index 17b564b126..8c3123d40e 100644
--- a/src/components/templates/TemplateSearchBar.vue
+++ b/src/components/templates/TemplateSearchBar.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+import AutoComplete from 'primevue/autocomplete'
+import Button from 'primevue/button'
+
+const { filteredCount } = defineProps<{
+  filteredCount?: number | null
+}>()
+
+const searchQuery = defineModel<string>('searchQuery', { default: '' })
+
+const emit = defineEmits<{
+  clearFilters: []
+}>()
+
+const clearFilters = () => {
+  searchQuery.value = ''
+  emit('clearFilters')
+}
+</script>
+
 <template>
   <div class="relative w-full p-4">
     <div class="h-12 flex items-center gap-4 justify-between">
@@ -42,23 +62,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import AutoComplete from 'primevue/autocomplete'
-import Button from 'primevue/button'
-
-const { filteredCount } = defineProps<{
-  filteredCount?: number | null
-}>()
-
-const searchQuery = defineModel<string>('searchQuery', { default: '' })
-
-const emit = defineEmits<{
-  clearFilters: []
-}>()
-
-const clearFilters = () => {
-  searchQuery.value = ''
-  emit('clearFilters')
-}
-</script>
diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index eb6a930388..084b54160c 100644
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -1,3 +1,65 @@
+<script setup lang="ts">
+import { useElementHover } from '@vueuse/core'
+import Card from 'primevue/card'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed, ref } from 'vue'
+
+import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
+import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
+import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
+import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
+import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+
+const UPSCALE_ZOOM_SCALE = 16 // for upscale templates, exaggerate the hover zoom
+const DEFAULT_ZOOM_SCALE = 5
+
+const { sourceModule, loading, template } = defineProps<{
+  sourceModule: string
+  categoryTitle: string
+  loading: boolean
+  template: TemplateInfo
+}>()
+
+const cardRef = ref<HTMLElement | null>(null)
+const isHovered = useElementHover(cardRef)
+
+const { getTemplateThumbnailUrl, getTemplateTitle, getTemplateDescription } =
+  useTemplateWorkflows()
+
+// Determine the effective source module to use (from template or prop)
+const effectiveSourceModule = computed(
+  () => template.sourceModule || sourceModule
+)
+
+const baseThumbnailSrc = computed(() =>
+  getTemplateThumbnailUrl(
+    template,
+    effectiveSourceModule.value,
+    effectiveSourceModule.value === 'default' ? '1' : ''
+  )
+)
+
+const overlayThumbnailSrc = computed(() =>
+  getTemplateThumbnailUrl(
+    template,
+    effectiveSourceModule.value,
+    effectiveSourceModule.value === 'default' ? '2' : ''
+  )
+)
+
+const description = computed(() =>
+  getTemplateDescription(template, effectiveSourceModule.value)
+)
+const title = computed(() =>
+  getTemplateTitle(template, effectiveSourceModule.value)
+)
+
+defineEmits<{
+  loadWorkflow: [name: string]
+}>()
+</script>
+
 <template>
   <Card
     ref="cardRef"
@@ -75,65 +137,3 @@
     </template>
   </Card>
 </template>
-
-<script setup lang="ts">
-import { useElementHover } from '@vueuse/core'
-import Card from 'primevue/card'
-import ProgressSpinner from 'primevue/progressspinner'
-import { computed, ref } from 'vue'
-
-import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
-import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
-import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
-import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
-import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
-import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
-
-const UPSCALE_ZOOM_SCALE = 16 // for upscale templates, exaggerate the hover zoom
-const DEFAULT_ZOOM_SCALE = 5
-
-const { sourceModule, loading, template } = defineProps<{
-  sourceModule: string
-  categoryTitle: string
-  loading: boolean
-  template: TemplateInfo
-}>()
-
-const cardRef = ref<HTMLElement | null>(null)
-const isHovered = useElementHover(cardRef)
-
-const { getTemplateThumbnailUrl, getTemplateTitle, getTemplateDescription } =
-  useTemplateWorkflows()
-
-// Determine the effective source module to use (from template or prop)
-const effectiveSourceModule = computed(
-  () => template.sourceModule || sourceModule
-)
-
-const baseThumbnailSrc = computed(() =>
-  getTemplateThumbnailUrl(
-    template,
-    effectiveSourceModule.value,
-    effectiveSourceModule.value === 'default' ? '1' : ''
-  )
-)
-
-const overlayThumbnailSrc = computed(() =>
-  getTemplateThumbnailUrl(
-    template,
-    effectiveSourceModule.value,
-    effectiveSourceModule.value === 'default' ? '2' : ''
-  )
-)
-
-const description = computed(() =>
-  getTemplateDescription(template, effectiveSourceModule.value)
-)
-const title = computed(() =>
-  getTemplateTitle(template, effectiveSourceModule.value)
-)
-
-defineEmits<{
-  loadWorkflow: [name: string]
-}>()
-</script>
diff --git a/src/components/templates/TemplateWorkflowCardSkeleton.vue b/src/components/templates/TemplateWorkflowCardSkeleton.vue
index 00bf738398..5965630d08 100644
--- a/src/components/templates/TemplateWorkflowCardSkeleton.vue
+++ b/src/components/templates/TemplateWorkflowCardSkeleton.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+import Card from 'primevue/card'
+import Skeleton from 'primevue/skeleton'
+</script>
+
 <template>
   <Card
     class="w-64 template-card rounded-2xl overflow-hidden shadow-elevation-2 dark-theme:bg-dark-elevation-1.5 h-full"
@@ -23,8 +28,3 @@
     </template>
   </Card>
 </template>
-
-<script setup lang="ts">
-import Card from 'primevue/card'
-import Skeleton from 'primevue/skeleton'
-</script>
diff --git a/src/components/templates/TemplateWorkflowList.vue b/src/components/templates/TemplateWorkflowList.vue
index b6ac99c5ed..ebb058b347 100644
--- a/src/components/templates/TemplateWorkflowList.vue
+++ b/src/components/templates/TemplateWorkflowList.vue
@@ -1,37 +1,3 @@
-<template>
-  <DataTable
-    v-model:selection="selectedTemplate"
-    :value="enrichedTemplates"
-    striped-rows
-    selection-mode="single"
-  >
-    <Column field="title" :header="$t('g.title')">
-      <template #body="slotProps">
-        <span :title="slotProps.data.title">{{ slotProps.data.title }}</span>
-      </template>
-    </Column>
-    <Column field="description" :header="$t('g.description')">
-      <template #body="slotProps">
-        <span :title="slotProps.data.description">
-          {{ slotProps.data.description }}
-        </span>
-      </template>
-    </Column>
-    <Column field="actions" header="" class="w-12">
-      <template #body="slotProps">
-        <Button
-          icon="pi pi-arrow-right"
-          text
-          rounded
-          size="small"
-          :loading="loading === slotProps.data.name"
-          @click="emit('loadWorkflow', slotProps.data.name)"
-        />
-      </template>
-    </Column>
-  </DataTable>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Column from 'primevue/column'
@@ -66,3 +32,37 @@ const emit = defineEmits<{
   loadWorkflow: [name: string]
 }>()
 </script>
+
+<template>
+  <DataTable
+    v-model:selection="selectedTemplate"
+    :value="enrichedTemplates"
+    striped-rows
+    selection-mode="single"
+  >
+    <Column field="title" :header="$t('g.title')">
+      <template #body="slotProps">
+        <span :title="slotProps.data.title">{{ slotProps.data.title }}</span>
+      </template>
+    </Column>
+    <Column field="description" :header="$t('g.description')">
+      <template #body="slotProps">
+        <span :title="slotProps.data.description">
+          {{ slotProps.data.description }}
+        </span>
+      </template>
+    </Column>
+    <Column field="actions" header="" class="w-12">
+      <template #body="slotProps">
+        <Button
+          icon="pi pi-arrow-right"
+          text
+          rounded
+          size="small"
+          :loading="loading === slotProps.data.name"
+          @click="emit('loadWorkflow', slotProps.data.name)"
+        />
+      </template>
+    </Column>
+  </DataTable>
+</template>
diff --git a/src/components/templates/TemplateWorkflowView.vue b/src/components/templates/TemplateWorkflowView.vue
index 9c73ddc86c..7be04da5e5 100644
--- a/src/components/templates/TemplateWorkflowView.vue
+++ b/src/components/templates/TemplateWorkflowView.vue
@@ -1,79 +1,3 @@
-<template>
-  <DataView
-    :value="displayTemplates"
-    :layout="layout"
-    data-key="name"
-    :lazy="true"
-    pt:root="h-full grid grid-rows-[auto_1fr_auto]"
-    pt:content="p-2 overflow-auto"
-  >
-    <template #header>
-      <div class="flex flex-col">
-        <div class="flex justify-between items-center mb-4">
-          <h2 class="text-lg">{{ title }}</h2>
-          <SelectButton
-            v-model="layout"
-            :options="['grid', 'list']"
-            :allow-empty="false"
-          >
-            <template #option="{ option }">
-              <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-            </template>
-          </SelectButton>
-        </div>
-        <TemplateSearchBar
-          v-model:search-query="searchQuery"
-          :filtered-count="filteredCount"
-          @clear-filters="() => reset()"
-        />
-      </div>
-    </template>
-
-    <template #list="{ items }">
-      <TemplateWorkflowList
-        :source-module="sourceModule"
-        :templates="items"
-        :loading="loading"
-        :category-title="categoryTitle"
-        @load-workflow="onLoadWorkflow"
-      />
-    </template>
-
-    <template #grid="{ items }">
-      <div>
-        <div
-          class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-x-4 gap-y-8 px-4 justify-items-center"
-        >
-          <TemplateWorkflowCard
-            v-for="template in items"
-            :key="template.name"
-            :source-module="sourceModule"
-            :template="template"
-            :loading="loading === template.name"
-            :category-title="categoryTitle"
-            @load-workflow="onLoadWorkflow"
-          />
-          <TemplateWorkflowCardSkeleton
-            v-for="n in shouldUsePagination && isLoadingMore
-              ? skeletonCount
-              : 0"
-            :key="`skeleton-${n}`"
-          />
-        </div>
-        <div
-          v-if="shouldUsePagination && hasMoreTemplates"
-          ref="loadTrigger"
-          class="w-full h-4 flex justify-center items-center"
-        >
-          <div v-if="isLoadingMore" class="text-sm text-muted">
-            {{ t('templateWorkflows.loadingMore') }}
-          </div>
-        </div>
-      </div>
-    </template>
-  </DataView>
-</template>
-
 <script setup lang="ts">
 import { useLocalStorage } from '@vueuse/core'
 import DataView from 'primevue/dataview'
@@ -166,3 +90,79 @@ const onLoadWorkflow = (name: string) => {
   emit('loadWorkflow', name)
 }
 </script>
+
+<template>
+  <DataView
+    :value="displayTemplates"
+    :layout="layout"
+    data-key="name"
+    :lazy="true"
+    pt:root="h-full grid grid-rows-[auto_1fr_auto]"
+    pt:content="p-2 overflow-auto"
+  >
+    <template #header>
+      <div class="flex flex-col">
+        <div class="flex justify-between items-center mb-4">
+          <h2 class="text-lg">{{ title }}</h2>
+          <SelectButton
+            v-model="layout"
+            :options="['grid', 'list']"
+            :allow-empty="false"
+          >
+            <template #option="{ option }">
+              <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+            </template>
+          </SelectButton>
+        </div>
+        <TemplateSearchBar
+          v-model:search-query="searchQuery"
+          :filtered-count="filteredCount"
+          @clear-filters="() => reset()"
+        />
+      </div>
+    </template>
+
+    <template #list="{ items }">
+      <TemplateWorkflowList
+        :source-module="sourceModule"
+        :templates="items"
+        :loading="loading"
+        :category-title="categoryTitle"
+        @load-workflow="onLoadWorkflow"
+      />
+    </template>
+
+    <template #grid="{ items }">
+      <div>
+        <div
+          class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-x-4 gap-y-8 px-4 justify-items-center"
+        >
+          <TemplateWorkflowCard
+            v-for="template in items"
+            :key="template.name"
+            :source-module="sourceModule"
+            :template="template"
+            :loading="loading === template.name"
+            :category-title="categoryTitle"
+            @load-workflow="onLoadWorkflow"
+          />
+          <TemplateWorkflowCardSkeleton
+            v-for="n in shouldUsePagination && isLoadingMore
+              ? skeletonCount
+              : 0"
+            :key="`skeleton-${n}`"
+          />
+        </div>
+        <div
+          v-if="shouldUsePagination && hasMoreTemplates"
+          ref="loadTrigger"
+          class="w-full h-4 flex justify-center items-center"
+        >
+          <div v-if="isLoadingMore" class="text-sm text-muted">
+            {{ t('templateWorkflows.loadingMore') }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </DataView>
+</template>
diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 38925b9e40..7f021815f7 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -1,56 +1,3 @@
-<template>
-  <div
-    class="flex flex-col h-[83vh] w-[90vw] relative pb-6"
-    data-testid="template-workflows-content"
-  >
-    <Button
-      v-if="isSmallScreen"
-      :icon="isSideNavOpen ? 'pi pi-chevron-left' : 'pi pi-chevron-right'"
-      text
-      class="absolute top-1/2 -translate-y-1/2 z-10"
-      :class="isSideNavOpen ? 'left-[19rem]' : 'left-2'"
-      @click="toggleSideNav"
-    />
-    <Divider
-      class="m-0 [&::before]:border-surface-border/70 [&::before]:border-t-2"
-    />
-    <div class="flex flex-1 relative overflow-hidden">
-      <aside
-        v-if="isSideNavOpen"
-        class="absolute translate-x-0 top-0 left-0 h-full w-80 shadow-md z-5 transition-transform duration-300 ease-in-out"
-      >
-        <ProgressSpinner
-          v-if="!isTemplatesLoaded || !isReady"
-          class="absolute w-8 h-full inset-0"
-        />
-        <TemplateWorkflowsSideNav
-          :tabs="allTemplateGroups"
-          :selected-tab="selectedTemplate"
-          @update:selected-tab="handleTabSelection"
-        />
-      </aside>
-      <div
-        class="flex-1 transition-all duration-300"
-        :class="{
-          'pl-80': isSideNavOpen || !isSmallScreen,
-          'pl-8': !isSideNavOpen && isSmallScreen
-        }"
-      >
-        <TemplateWorkflowView
-          v-if="isReady && selectedTemplate"
-          class="px-12 py-4"
-          :title="selectedTemplate.title"
-          :source-module="selectedTemplate.moduleName"
-          :templates="selectedTemplate.templates"
-          :loading="loadingTemplateId"
-          :category-title="selectedTemplate.title"
-          @load-workflow="handleLoadWorkflow"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
 import Button from 'primevue/button'
@@ -110,3 +57,56 @@ const handleLoadWorkflow = async (id: string) => {
   return loadWorkflowTemplate(id, selectedTemplate.value.moduleName)
 }
 </script>
+
+<template>
+  <div
+    class="flex flex-col h-[83vh] w-[90vw] relative pb-6"
+    data-testid="template-workflows-content"
+  >
+    <Button
+      v-if="isSmallScreen"
+      :icon="isSideNavOpen ? 'pi pi-chevron-left' : 'pi pi-chevron-right'"
+      text
+      class="absolute top-1/2 -translate-y-1/2 z-10"
+      :class="isSideNavOpen ? 'left-[19rem]' : 'left-2'"
+      @click="toggleSideNav"
+    />
+    <Divider
+      class="m-0 [&::before]:border-surface-border/70 [&::before]:border-t-2"
+    />
+    <div class="flex flex-1 relative overflow-hidden">
+      <aside
+        v-if="isSideNavOpen"
+        class="absolute translate-x-0 top-0 left-0 h-full w-80 shadow-md z-5 transition-transform duration-300 ease-in-out"
+      >
+        <ProgressSpinner
+          v-if="!isTemplatesLoaded || !isReady"
+          class="absolute w-8 h-full inset-0"
+        />
+        <TemplateWorkflowsSideNav
+          :tabs="allTemplateGroups"
+          :selected-tab="selectedTemplate"
+          @update:selected-tab="handleTabSelection"
+        />
+      </aside>
+      <div
+        class="flex-1 transition-all duration-300"
+        :class="{
+          'pl-80': isSideNavOpen || !isSmallScreen,
+          'pl-8': !isSideNavOpen && isSmallScreen
+        }"
+      >
+        <TemplateWorkflowView
+          v-if="isReady && selectedTemplate"
+          class="px-12 py-4"
+          :title="selectedTemplate.title"
+          :source-module="selectedTemplate.moduleName"
+          :templates="selectedTemplate.templates"
+          :loading="loadingTemplateId"
+          :category-title="selectedTemplate.title"
+          @load-workflow="handleLoadWorkflow"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/templates/TemplateWorkflowsSideNav.vue b/src/components/templates/TemplateWorkflowsSideNav.vue
index 07ff87990e..f62952daf7 100644
--- a/src/components/templates/TemplateWorkflowsSideNav.vue
+++ b/src/components/templates/TemplateWorkflowsSideNav.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import Listbox from 'primevue/listbox'
+import ScrollPanel from 'primevue/scrollpanel'
+
+import type {
+  TemplateGroup,
+  WorkflowTemplates
+} from '@/platform/workflow/templates/types/template'
+
+defineProps<{
+  tabs: TemplateGroup[]
+  selectedTab: WorkflowTemplates | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:selectedTab', tab: WorkflowTemplates): void
+}>()
+
+const handleTabSelection = (tab: WorkflowTemplates) => {
+  emit('update:selectedTab', tab)
+}
+</script>
+
 <template>
   <ScrollPanel class="w-80" style="height: calc(83vh - 48px)">
     <Listbox
@@ -25,26 +48,3 @@
     </Listbox>
   </ScrollPanel>
 </template>
-
-<script setup lang="ts">
-import Listbox from 'primevue/listbox'
-import ScrollPanel from 'primevue/scrollpanel'
-
-import type {
-  TemplateGroup,
-  WorkflowTemplates
-} from '@/platform/workflow/templates/types/template'
-
-defineProps<{
-  tabs: TemplateGroup[]
-  selectedTab: WorkflowTemplates | null
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:selectedTab', tab: WorkflowTemplates): void
-}>()
-
-const handleTabSelection = (tab: WorkflowTemplates) => {
-  emit('update:selectedTab', tab)
-}
-</script>
diff --git a/src/components/templates/thumbnails/AudioThumbnail.vue b/src/components/templates/thumbnails/AudioThumbnail.vue
index dda6e79a52..0418e91f4f 100644
--- a/src/components/templates/thumbnails/AudioThumbnail.vue
+++ b/src/components/templates/thumbnails/AudioThumbnail.vue
@@ -1,11 +1,3 @@
-<template>
-  <BaseThumbnail>
-    <div class="w-full h-full flex items-center justify-center p-4">
-      <audio controls class="w-full relative" :src="src" @click.stop />
-    </div>
-  </BaseThumbnail>
-</template>
-
 <script setup lang="ts">
 import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
 
@@ -13,3 +5,11 @@ defineProps<{
   src: string
 }>()
 </script>
+
+<template>
+  <BaseThumbnail>
+    <div class="w-full h-full flex items-center justify-center p-4">
+      <audio controls class="w-full relative" :src="src" @click.stop />
+    </div>
+  </BaseThumbnail>
+</template>
diff --git a/src/components/templates/thumbnails/BaseThumbnail.vue b/src/components/templates/thumbnails/BaseThumbnail.vue
index ee4c0f3a4d..d2aa80212d 100644
--- a/src/components/templates/thumbnails/BaseThumbnail.vue
+++ b/src/components/templates/thumbnails/BaseThumbnail.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="relative w-64 h-64 rounded-t-lg overflow-hidden select-none">
-    <div
-      v-if="!error"
-      ref="contentRef"
-      class="w-full h-full transform-gpu transition-transform duration-1000 ease-out"
-      :style="
-        isHovered ? { transform: `scale(${1 + hoverZoom / 100})` } : undefined
-      "
-    >
-      <slot />
-    </div>
-    <div v-else class="w-full h-full flex items-center justify-center">
-      <i class="pi pi-file text-4xl" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import { onMounted, ref } from 'vue'
@@ -37,6 +19,24 @@ onMounted(() => {
   })
 })
 </script>
+
+<template>
+  <div class="relative w-64 h-64 rounded-t-lg overflow-hidden select-none">
+    <div
+      v-if="!error"
+      ref="contentRef"
+      class="w-full h-full transform-gpu transition-transform duration-1000 ease-out"
+      :style="
+        isHovered ? { transform: `scale(${1 + hoverZoom / 100})` } : undefined
+      "
+    >
+      <slot />
+    </div>
+    <div v-else class="w-full h-full flex items-center justify-center">
+      <i class="pi pi-file text-4xl" />
+    </div>
+  </div>
+</template>
 <style scoped>
 img {
   transition: transform 1s cubic-bezier(0.2, 0, 0.4, 1);
diff --git a/src/components/templates/thumbnails/CompareSliderThumbnail.vue b/src/components/templates/thumbnails/CompareSliderThumbnail.vue
index 3633c5dc52..2d5e919528 100644
--- a/src/components/templates/thumbnails/CompareSliderThumbnail.vue
+++ b/src/components/templates/thumbnails/CompareSliderThumbnail.vue
@@ -1,37 +1,3 @@
-<template>
-  <BaseThumbnail :is-hovered="isHovered">
-    <LazyImage
-      :src="baseImageSrc"
-      :alt="alt"
-      :image-class="
-        isVideoType
-          ? 'w-full h-full object-cover'
-          : 'max-w-full max-h-64 object-contain'
-      "
-    />
-    <div ref="containerRef" class="absolute inset-0">
-      <LazyImage
-        :src="overlayImageSrc"
-        :alt="alt"
-        :image-class="
-          isVideoType
-            ? 'w-full h-full object-cover'
-            : 'max-w-full max-h-64 object-contain'
-        "
-        :image-style="{
-          clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`
-        }"
-      />
-      <div
-        class="absolute inset-y-0 w-0.5 bg-white/30 backdrop-blur-sm z-10 pointer-events-none"
-        :style="{
-          left: `${sliderPosition}%`
-        }"
-      />
-    </div>
-  </BaseThumbnail>
-</template>
-
 <script setup lang="ts">
 import { useMouseInElement } from '@vueuse/core'
 import { ref, watch } from 'vue'
@@ -71,3 +37,37 @@ watch(
   }
 )
 </script>
+
+<template>
+  <BaseThumbnail :is-hovered="isHovered">
+    <LazyImage
+      :src="baseImageSrc"
+      :alt="alt"
+      :image-class="
+        isVideoType
+          ? 'w-full h-full object-cover'
+          : 'max-w-full max-h-64 object-contain'
+      "
+    />
+    <div ref="containerRef" class="absolute inset-0">
+      <LazyImage
+        :src="overlayImageSrc"
+        :alt="alt"
+        :image-class="
+          isVideoType
+            ? 'w-full h-full object-cover'
+            : 'max-w-full max-h-64 object-contain'
+        "
+        :image-style="{
+          clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`
+        }"
+      />
+      <div
+        class="absolute inset-y-0 w-0.5 bg-white/30 backdrop-blur-sm z-10 pointer-events-none"
+        :style="{
+          left: `${sliderPosition}%`
+        }"
+      />
+    </div>
+  </BaseThumbnail>
+</template>
diff --git a/src/components/templates/thumbnails/DefaultThumbnail.vue b/src/components/templates/thumbnails/DefaultThumbnail.vue
index 45e053e677..68fba14446 100644
--- a/src/components/templates/thumbnails/DefaultThumbnail.vue
+++ b/src/components/templates/thumbnails/DefaultThumbnail.vue
@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import LazyImage from '@/components/common/LazyImage.vue'
+import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
+
+const { src, isVideo } = defineProps<{
+  src: string
+  alt: string
+  hoverZoom: number
+  isHovered?: boolean
+  isVideo?: boolean
+}>()
+
+const isVideoType = isVideo ?? (src?.toLowerCase().endsWith('.webp') || false)
+</script>
+
 <template>
   <BaseThumbnail :hover-zoom="hoverZoom" :is-hovered="isHovered">
     <LazyImage
@@ -15,18 +30,3 @@
     />
   </BaseThumbnail>
 </template>
-
-<script setup lang="ts">
-import LazyImage from '@/components/common/LazyImage.vue'
-import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
-
-const { src, isVideo } = defineProps<{
-  src: string
-  alt: string
-  hoverZoom: number
-  isHovered?: boolean
-  isVideo?: boolean
-}>()
-
-const isVideoType = isVideo ?? (src?.toLowerCase().endsWith('.webp') || false)
-</script>
diff --git a/src/components/templates/thumbnails/HoverDissolveThumbnail.vue b/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
index f02c939d3e..eeef395bbf 100644
--- a/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
+++ b/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
@@ -1,24 +1,3 @@
-<template>
-  <BaseThumbnail :is-hovered="isHovered">
-    <div class="relative w-full h-full">
-      <div class="absolute inset-0">
-        <LazyImage
-          :src="baseImageSrc"
-          :alt="alt"
-          :image-class="baseImageClass"
-        />
-      </div>
-      <div class="absolute inset-0 z-10">
-        <LazyImage
-          :src="overlayImageSrc"
-          :alt="alt"
-          :image-class="overlayImageClass"
-        />
-      </div>
-    </div>
-  </BaseThumbnail>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -53,3 +32,24 @@ const overlayImageClass = computed(() => {
   return `${baseClasses} ${sizeClasses} ${opacityClasses}`
 })
 </script>
+
+<template>
+  <BaseThumbnail :is-hovered="isHovered">
+    <div class="relative w-full h-full">
+      <div class="absolute inset-0">
+        <LazyImage
+          :src="baseImageSrc"
+          :alt="alt"
+          :image-class="baseImageClass"
+        />
+      </div>
+      <div class="absolute inset-0 z-10">
+        <LazyImage
+          :src="overlayImageSrc"
+          :alt="alt"
+          :image-class="overlayImageClass"
+        />
+      </div>
+    </div>
+  </BaseThumbnail>
+</template>
diff --git a/src/components/toast/GlobalToast.vue b/src/components/toast/GlobalToast.vue
index c60524a485..6563e652cc 100644
--- a/src/components/toast/GlobalToast.vue
+++ b/src/components/toast/GlobalToast.vue
@@ -1,7 +1,3 @@
-<template>
-  <Toast />
-</template>
-
 <script setup lang="ts">
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
@@ -88,3 +84,7 @@ watch(
   { immediate: true }
 )
 </script>
+
+<template>
+  <Toast />
+</template>
diff --git a/src/components/toast/RerouteMigrationToast.vue b/src/components/toast/RerouteMigrationToast.vue
index 18d26b3afb..4824f2464a 100644
--- a/src/components/toast/RerouteMigrationToast.vue
+++ b/src/components/toast/RerouteMigrationToast.vue
@@ -1,22 +1,3 @@
-<template>
-  <Toast group="reroute-migration">
-    <template #message>
-      <div class="flex flex-col items-start flex-auto">
-        <div class="font-medium text-lg my-4">
-          {{ t('toastMessages.migrateToLitegraphReroute') }}
-        </div>
-        <Button
-          class="self-end"
-          size="small"
-          :label="t('g.migrate')"
-          severity="warn"
-          @click="migrateToLitegraphReroute"
-        />
-      </div>
-    </template>
-  </Toast>
-</template>
-
 <script setup lang="ts">
 import { useToast } from 'primevue'
 import Button from 'primevue/button'
@@ -44,3 +25,22 @@ const migrateToLitegraphReroute = async () => {
   toast.removeGroup('reroute-migration')
 }
 </script>
+
+<template>
+  <Toast group="reroute-migration">
+    <template #message>
+      <div class="flex flex-col items-start flex-auto">
+        <div class="font-medium text-lg my-4">
+          {{ t('toastMessages.migrateToLitegraphReroute') }}
+        </div>
+        <Button
+          class="self-end"
+          size="small"
+          :label="t('g.migrate')"
+          severity="warn"
+          @click="migrateToLitegraphReroute"
+        />
+      </div>
+    </template>
+  </Toast>
+</template>
diff --git a/src/components/topbar/CommandMenubar.vue b/src/components/topbar/CommandMenubar.vue
index e9f33f8123..c1f988581a 100644
--- a/src/components/topbar/CommandMenubar.vue
+++ b/src/components/topbar/CommandMenubar.vue
@@ -1,76 +1,3 @@
-<template>
-  <div
-    class="comfyui-logo-wrapper p-1 flex justify-center items-center cursor-pointer rounded-md mr-2"
-    :class="{
-      'comfyui-logo-menu-visible': menuRef?.visible
-    }"
-    :style="{
-      minWidth: isLargeSidebar ? '4rem' : 'auto'
-    }"
-    @click="menuRef?.toggle($event)"
-  >
-    <img
-      src="/assets/images/comfy-logo-mono.svg"
-      alt="ComfyUI Logo"
-      class="comfyui-logo h-7"
-      @contextmenu="showNativeSystemMenu"
-    />
-    <i class="pi pi-angle-down ml-1 text-[10px]" />
-  </div>
-  <TieredMenu
-    ref="menuRef"
-    :model="translatedItems"
-    :popup="true"
-    class="comfy-command-menu"
-    :class="{
-      'comfy-command-menu-top': isTopMenu
-    }"
-    @show="onMenuShow"
-  >
-    <template #item="{ item, props }">
-      <a
-        class="p-menubar-item-link px-4 py-2"
-        v-bind="props.action"
-        :href="item.url"
-        target="_blank"
-        :class="typeof item.class === 'function' ? item.class() : item.class"
-        @mousedown="
-          isZoomCommand(item) ? handleZoomMouseDown(item, $event) : undefined
-        "
-        @click="handleItemClick(item, $event)"
-      >
-        <i
-          v-if="hasActiveStateSiblings(item)"
-          class="p-menubar-item-icon pi pi-check text-sm"
-          :class="{ invisible: !item.comfyCommand?.active?.() }"
-        />
-        <span
-          v-else-if="
-            item.icon && item.comfyCommand?.id !== 'Comfy.NewBlankWorkflow'
-          "
-          class="p-menubar-item-icon"
-          :class="item.icon"
-        />
-        <span class="p-menubar-item-label text-nowrap">{{ item.label }}</span>
-        <i
-          v-if="item.comfyCommand?.id === 'Comfy.NewBlankWorkflow'"
-          class="ml-auto"
-          :class="item.icon"
-        />
-        <span
-          v-if="item?.comfyCommand?.keybinding"
-          class="ml-auto border border-surface rounded text-muted text-xs text-nowrap p-1 keybinding-tag"
-        >
-          {{ item.comfyCommand.keybinding.combo.toString() }}
-        </span>
-        <i v-if="item.items" class="ml-auto pi pi-angle-right" />
-      </a>
-    </template>
-  </TieredMenu>
-
-  <SubgraphBreadcrumb />
-</template>
-
 <script setup lang="ts">
 import type { MenuItem } from 'primevue/menuitem'
 import TieredMenu, {
@@ -279,6 +206,79 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
 }
 </script>
 
+<template>
+  <div
+    class="comfyui-logo-wrapper p-1 flex justify-center items-center cursor-pointer rounded-md mr-2"
+    :class="{
+      'comfyui-logo-menu-visible': menuRef?.visible
+    }"
+    :style="{
+      minWidth: isLargeSidebar ? '4rem' : 'auto'
+    }"
+    @click="menuRef?.toggle($event)"
+  >
+    <img
+      src="/assets/images/comfy-logo-mono.svg"
+      alt="ComfyUI Logo"
+      class="comfyui-logo h-7"
+      @contextmenu="showNativeSystemMenu"
+    />
+    <i class="pi pi-angle-down ml-1 text-[10px]" />
+  </div>
+  <TieredMenu
+    ref="menuRef"
+    :model="translatedItems"
+    :popup="true"
+    class="comfy-command-menu"
+    :class="{
+      'comfy-command-menu-top': isTopMenu
+    }"
+    @show="onMenuShow"
+  >
+    <template #item="{ item, props }">
+      <a
+        class="p-menubar-item-link px-4 py-2"
+        v-bind="props.action"
+        :href="item.url"
+        target="_blank"
+        :class="typeof item.class === 'function' ? item.class() : item.class"
+        @mousedown="
+          isZoomCommand(item) ? handleZoomMouseDown(item, $event) : undefined
+        "
+        @click="handleItemClick(item, $event)"
+      >
+        <i
+          v-if="hasActiveStateSiblings(item)"
+          class="p-menubar-item-icon pi pi-check text-sm"
+          :class="{ invisible: !item.comfyCommand?.active?.() }"
+        />
+        <span
+          v-else-if="
+            item.icon && item.comfyCommand?.id !== 'Comfy.NewBlankWorkflow'
+          "
+          class="p-menubar-item-icon"
+          :class="item.icon"
+        />
+        <span class="p-menubar-item-label text-nowrap">{{ item.label }}</span>
+        <i
+          v-if="item.comfyCommand?.id === 'Comfy.NewBlankWorkflow'"
+          class="ml-auto"
+          :class="item.icon"
+        />
+        <span
+          v-if="item?.comfyCommand?.keybinding"
+          class="ml-auto border border-surface rounded text-muted text-xs text-nowrap p-1 keybinding-tag"
+        >
+          {{ item.comfyCommand.keybinding.combo.toString() }}
+        </span>
+        <i v-if="item.items" class="ml-auto pi pi-angle-right" />
+      </a>
+    </template>
+  </TieredMenu>
+
+  <SubgraphBreadcrumb />
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/topbar/CurrentUserButton.vue b/src/components/topbar/CurrentUserButton.vue
index 1d92552e14..884c1082f5 100644
--- a/src/components/topbar/CurrentUserButton.vue
+++ b/src/components/topbar/CurrentUserButton.vue
@@ -1,4 +1,26 @@
 <!-- A button that shows current authenticated user's avatar -->
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+
+import UserAvatar from '@/components/common/UserAvatar.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+
+import CurrentUserPopover from './CurrentUserPopover.vue'
+
+const { isLoggedIn, userPhotoUrl } = useCurrentUser()
+
+const popover = ref<InstanceType<typeof Popover> | null>(null)
+const photoURL = computed<string | undefined>(
+  () => userPhotoUrl.value ?? undefined
+)
+
+const closePopover = () => {
+  popover.value?.hide()
+}
+</script>
+
 <template>
   <div>
     <Button
@@ -21,25 +43,3 @@
     </Popover>
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Popover from 'primevue/popover'
-import { computed, ref } from 'vue'
-
-import UserAvatar from '@/components/common/UserAvatar.vue'
-import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-
-import CurrentUserPopover from './CurrentUserPopover.vue'
-
-const { isLoggedIn, userPhotoUrl } = useCurrentUser()
-
-const popover = ref<InstanceType<typeof Popover> | null>(null)
-const photoURL = computed<string | undefined>(
-  () => userPhotoUrl.value ?? undefined
-)
-
-const closePopover = () => {
-  popover.value?.hide()
-}
-</script>
diff --git a/src/components/topbar/CurrentUserPopover.vue b/src/components/topbar/CurrentUserPopover.vue
index de9fab40cf..7c282daff5 100644
--- a/src/components/topbar/CurrentUserPopover.vue
+++ b/src/components/topbar/CurrentUserPopover.vue
@@ -1,4 +1,49 @@
 <!-- A popover that shows current user information and actions -->
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import { onMounted } from 'vue'
+
+import UserAvatar from '@/components/common/UserAvatar.vue'
+import UserCredit from '@/components/common/UserCredit.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useDialogService } from '@/services/dialogService'
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
+  useCurrentUser()
+const authActions = useFirebaseAuthActions()
+const dialogService = useDialogService()
+
+const handleOpenUserSettings = () => {
+  dialogService.showSettingsDialog('user')
+  emit('close')
+}
+
+const handleTopUp = () => {
+  dialogService.showTopUpCreditsDialog()
+  emit('close')
+}
+
+const handleLogout = async () => {
+  await handleSignOut()
+  emit('close')
+}
+
+const handleOpenApiPricing = () => {
+  window.open('https://docs.comfy.org/tutorials/api-nodes/pricing', '_blank')
+  emit('close')
+}
+
+onMounted(() => {
+  void authActions.fetchBalance()
+})
+</script>
+
 <template>
   <div class="current-user-popover w-72">
     <!-- User Info Section -->
@@ -72,48 +117,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Divider from 'primevue/divider'
-import { onMounted } from 'vue'
-
-import UserAvatar from '@/components/common/UserAvatar.vue'
-import UserCredit from '@/components/common/UserCredit.vue'
-import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useDialogService } from '@/services/dialogService'
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
-  useCurrentUser()
-const authActions = useFirebaseAuthActions()
-const dialogService = useDialogService()
-
-const handleOpenUserSettings = () => {
-  dialogService.showSettingsDialog('user')
-  emit('close')
-}
-
-const handleTopUp = () => {
-  dialogService.showTopUpCreditsDialog()
-  emit('close')
-}
-
-const handleLogout = async () => {
-  await handleSignOut()
-  emit('close')
-}
-
-const handleOpenApiPricing = () => {
-  window.open('https://docs.comfy.org/tutorials/api-nodes/pricing', '_blank')
-  emit('close')
-}
-
-onMounted(() => {
-  void authActions.fetchBalance()
-})
-</script>
diff --git a/src/components/topbar/SecondRowWorkflowTabs.vue b/src/components/topbar/SecondRowWorkflowTabs.vue
index 777f4944a1..63ecc96a31 100644
--- a/src/components/topbar/SecondRowWorkflowTabs.vue
+++ b/src/components/topbar/SecondRowWorkflowTabs.vue
@@ -1,13 +1,13 @@
+<script setup lang="ts">
+import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
+</script>
+
 <template>
   <div class="w-auto max-w-full">
     <WorkflowTabs />
   </div>
 </template>
 
-<script setup lang="ts">
-import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
-</script>
-
 <style scoped>
 :deep(.workflow-tabs) {
   background-color: var(--comfy-menu-bg);
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index e7e049b350..fd86048e12 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -1,36 +1,3 @@
-<template>
-  <div>
-    <div
-      v-show="showTopMenu && workflowTabsPosition === 'Topbar'"
-      class="w-full flex content-end z-1001 h-[38px]"
-      style="background: var(--border-color)"
-    >
-      <WorkflowTabs />
-    </div>
-    <div
-      v-show="showTopMenu"
-      ref="topMenuRef"
-      class="comfyui-menu flex items-center"
-      :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
-    >
-      <CommandMenubar />
-      <div class="grow min-w-0 app-drag h-full"></div>
-      <div
-        ref="menuRight"
-        class="comfyui-menu-right flex-shrink-1 overflow-auto"
-      />
-      <Actionbar />
-      <CurrentUserButton class="shrink-0" />
-    </div>
-
-    <!-- Virtual top menu for native window (drag handle) -->
-    <div
-      v-show="isNativeWindow() && !showTopMenu"
-      class="fixed top-0 left-0 app-drag w-full h-(--comfy-topbar-height)"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useEventBus } from '@vueuse/core'
 import { computed, onMounted, provide, ref } from 'vue'
@@ -86,6 +53,39 @@ onMounted(() => {
 })
 </script>
 
+<template>
+  <div>
+    <div
+      v-show="showTopMenu && workflowTabsPosition === 'Topbar'"
+      class="w-full flex content-end z-1001 h-[38px]"
+      style="background: var(--border-color)"
+    >
+      <WorkflowTabs />
+    </div>
+    <div
+      v-show="showTopMenu"
+      ref="topMenuRef"
+      class="comfyui-menu flex items-center"
+      :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
+    >
+      <CommandMenubar />
+      <div class="grow min-w-0 app-drag h-full"></div>
+      <div
+        ref="menuRight"
+        class="comfyui-menu-right flex-shrink-1 overflow-auto"
+      />
+      <Actionbar />
+      <CurrentUserButton class="shrink-0" />
+    </div>
+
+    <!-- Virtual top menu for native window (drag handle) -->
+    <div
+      v-show="isNativeWindow() && !showTopMenu"
+      class="fixed top-0 left-0 app-drag w-full h-(--comfy-topbar-height)"
+    />
+  </div>
+</template>
+
 <style scoped>
 .comfyui-menu {
   width: 100vw;
diff --git a/src/components/topbar/WorkflowOverflowMenu.vue b/src/components/topbar/WorkflowOverflowMenu.vue
index 33b8475a3a..871875d109 100644
--- a/src/components/topbar/WorkflowOverflowMenu.vue
+++ b/src/components/topbar/WorkflowOverflowMenu.vue
@@ -1,23 +1,3 @@
-<template>
-  <div>
-    <Button
-      v-tooltip="{ value: $t('g.moreWorkflows'), showDelay: 300 }"
-      class="rounded-none"
-      icon="pi pi-ellipsis-h"
-      text
-      severity="secondary"
-      :aria-label="$t('g.moreWorkflows')"
-      @click="menu?.toggle($event)"
-    />
-    <Menu
-      ref="menu"
-      :model="menuItems"
-      :popup="true"
-      class="max-h-[40vh] overflow-auto"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Menu from 'primevue/menu'
@@ -45,3 +25,23 @@ const menuItems = computed(() =>
   }))
 )
 </script>
+
+<template>
+  <div>
+    <Button
+      v-tooltip="{ value: $t('g.moreWorkflows'), showDelay: 300 }"
+      class="rounded-none"
+      icon="pi pi-ellipsis-h"
+      text
+      severity="secondary"
+      :aria-label="$t('g.moreWorkflows')"
+      @click="menu?.toggle($event)"
+    />
+    <Menu
+      ref="menu"
+      :model="menuItems"
+      :popup="true"
+      class="max-h-[40vh] overflow-auto"
+    />
+  </div>
+</template>
diff --git a/src/components/topbar/WorkflowTab.vue b/src/components/topbar/WorkflowTab.vue
index db570a55d3..68edeeb392 100644
--- a/src/components/topbar/WorkflowTab.vue
+++ b/src/components/topbar/WorkflowTab.vue
@@ -1,36 +1,3 @@
-<template>
-  <div
-    ref="workflowTabRef"
-    class="flex p-2 gap-2 workflow-tab"
-    v-bind="$attrs"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-    @click="handleClick"
-  >
-    <span class="workflow-label text-sm max-w-[150px] truncate inline-block">
-      {{ workflowOption.workflow.filename }}
-    </span>
-    <div class="relative">
-      <span v-if="shouldShowStatusIndicator" class="status-indicator">•</span>
-      <Button
-        class="close-button p-0 w-auto"
-        icon="pi pi-times"
-        text
-        severity="secondary"
-        size="small"
-        @click.stop="onCloseWorkflow(workflowOption)"
-      />
-    </div>
-  </div>
-
-  <WorkflowTabPopover
-    ref="popoverRef"
-    :workflow-filename="workflowOption.workflow.filename"
-    :thumbnail-url="thumbnailUrl"
-    :is-active-tab="isActiveTab"
-  />
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed, onUnmounted, ref } from 'vue'
@@ -174,6 +141,39 @@ onUnmounted(() => {
 })
 </script>
 
+<template>
+  <div
+    ref="workflowTabRef"
+    class="flex p-2 gap-2 workflow-tab"
+    v-bind="$attrs"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="handleClick"
+  >
+    <span class="workflow-label text-sm max-w-[150px] truncate inline-block">
+      {{ workflowOption.workflow.filename }}
+    </span>
+    <div class="relative">
+      <span v-if="shouldShowStatusIndicator" class="status-indicator">•</span>
+      <Button
+        class="close-button p-0 w-auto"
+        icon="pi pi-times"
+        text
+        severity="secondary"
+        size="small"
+        @click.stop="onCloseWorkflow(workflowOption)"
+      />
+    </div>
+  </div>
+
+  <WorkflowTabPopover
+    ref="popoverRef"
+    :workflow-filename="workflowOption.workflow.filename"
+    :thumbnail-url="thumbnailUrl"
+    :is-active-tab="isActiveTab"
+  />
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/topbar/WorkflowTabPopover.vue b/src/components/topbar/WorkflowTabPopover.vue
index df8a4e7ec4..a5e58165f4 100644
--- a/src/components/topbar/WorkflowTabPopover.vue
+++ b/src/components/topbar/WorkflowTabPopover.vue
@@ -1,42 +1,3 @@
-<template>
-  <div
-    ref="positionRef"
-    class="absolute left-1/2 -translate-x-1/2"
-    :class="positions.positioner"
-  ></div>
-  <Popover
-    ref="popoverRef"
-    append-to="body"
-    :pt="{
-      root: {
-        class: 'workflow-popover-fade fit-content ' + positions.root,
-        'data-popover-id': id,
-        style: {
-          transform: positions.active
-        }
-      }
-    }"
-    @mouseenter="cancelHidePopover"
-    @mouseleave="hidePopover"
-  >
-    <div class="workflow-preview-content">
-      <div
-        v-if="thumbnailUrl && !isActiveTab"
-        class="workflow-preview-thumbnail relative"
-      >
-        <img
-          :src="thumbnailUrl"
-          class="block h-[200px] object-cover rounded-lg p-2"
-          :style="{ width: `${POPOVER_WIDTH}px` }"
-        />
-      </div>
-      <div class="workflow-preview-footer">
-        <span class="workflow-preview-name">{{ workflowFilename }}</span>
-      </div>
-    </div>
-  </Popover>
-</template>
-
 <script setup lang="ts">
 import Popover from 'primevue/popover'
 import { computed, nextTick, ref, toRefs, useId } from 'vue'
@@ -168,6 +129,45 @@ defineExpose({
 })
 </script>
 
+<template>
+  <div
+    ref="positionRef"
+    class="absolute left-1/2 -translate-x-1/2"
+    :class="positions.positioner"
+  ></div>
+  <Popover
+    ref="popoverRef"
+    append-to="body"
+    :pt="{
+      root: {
+        class: 'workflow-popover-fade fit-content ' + positions.root,
+        'data-popover-id': id,
+        style: {
+          transform: positions.active
+        }
+      }
+    }"
+    @mouseenter="cancelHidePopover"
+    @mouseleave="hidePopover"
+  >
+    <div class="workflow-preview-content">
+      <div
+        v-if="thumbnailUrl && !isActiveTab"
+        class="workflow-preview-thumbnail relative"
+      >
+        <img
+          :src="thumbnailUrl"
+          class="block h-[200px] object-cover rounded-lg p-2"
+          :style="{ width: `${POPOVER_WIDTH}px` }"
+        />
+      </div>
+      <div class="workflow-preview-footer">
+        <span class="workflow-preview-name">{{ workflowFilename }}</span>
+      </div>
+    </div>
+  </Popover>
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 3f1c232a5a..a78dc20713 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -1,75 +1,3 @@
-<template>
-  <div
-    class="workflow-tabs-container flex flex-row max-w-full h-full flex-auto overflow-hidden"
-    :class="{ 'workflow-tabs-container-desktop': isDesktop }"
-  >
-    <Button
-      v-if="showOverflowArrows"
-      icon="pi pi-chevron-left"
-      text
-      severity="secondary"
-      class="overflow-arrow overflow-arrow-left"
-      :disabled="!leftArrowEnabled"
-      @mousedown="whileMouseDown($event, () => scroll(-1))"
-    />
-    <ScrollPanel
-      ref="scrollPanelRef"
-      class="overflow-hidden no-drag"
-      :pt:content="{
-        class: 'p-0 w-full flex',
-        onwheel: handleWheel
-      }"
-      pt:bar-x="h-1"
-    >
-      <SelectButton
-        class="workflow-tabs bg-transparent"
-        :class="props.class"
-        :model-value="selectedWorkflow"
-        :options="options"
-        option-label="label"
-        data-key="value"
-        @update:model-value="onWorkflowChange"
-      >
-        <template #option="{ option }">
-          <WorkflowTab
-            :workflow-option="option"
-            @contextmenu="showContextMenu($event, option)"
-            @click.middle="onCloseWorkflow(option)"
-          />
-        </template>
-      </SelectButton>
-    </ScrollPanel>
-    <Button
-      v-if="showOverflowArrows"
-      icon="pi pi-chevron-right"
-      text
-      severity="secondary"
-      class="overflow-arrow overflow-arrow-right"
-      :disabled="!rightArrowEnabled"
-      @mousedown="whileMouseDown($event, () => scroll(1))"
-    />
-    <WorkflowOverflowMenu
-      v-if="showOverflowArrows"
-      :workflows="workflowStore.openWorkflows"
-      :active-workflow="workflowStore.activeWorkflow"
-    />
-    <Button
-      v-tooltip="{ value: $t('sideToolbar.newBlankWorkflow'), showDelay: 300 }"
-      class="new-blank-workflow-button shrink-0 no-drag rounded-none"
-      icon="pi pi-plus"
-      text
-      severity="secondary"
-      :aria-label="$t('sideToolbar.newBlankWorkflow')"
-      @click="() => commandStore.execute('Comfy.NewBlankWorkflow')"
-    />
-    <ContextMenu ref="menu" :model="contextMenuItems" />
-    <div
-      v-if="menuSetting !== 'Bottom' && isDesktop"
-      class="window-actions-spacer shrink-0 app-drag"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useScroll } from '@vueuse/core'
 import Button from 'primevue/button'
@@ -302,6 +230,78 @@ onUpdated(() => {
 })
 </script>
 
+<template>
+  <div
+    class="workflow-tabs-container flex flex-row max-w-full h-full flex-auto overflow-hidden"
+    :class="{ 'workflow-tabs-container-desktop': isDesktop }"
+  >
+    <Button
+      v-if="showOverflowArrows"
+      icon="pi pi-chevron-left"
+      text
+      severity="secondary"
+      class="overflow-arrow overflow-arrow-left"
+      :disabled="!leftArrowEnabled"
+      @mousedown="whileMouseDown($event, () => scroll(-1))"
+    />
+    <ScrollPanel
+      ref="scrollPanelRef"
+      class="overflow-hidden no-drag"
+      :pt:content="{
+        class: 'p-0 w-full flex',
+        onwheel: handleWheel
+      }"
+      pt:bar-x="h-1"
+    >
+      <SelectButton
+        class="workflow-tabs bg-transparent"
+        :class="props.class"
+        :model-value="selectedWorkflow"
+        :options="options"
+        option-label="label"
+        data-key="value"
+        @update:model-value="onWorkflowChange"
+      >
+        <template #option="{ option }">
+          <WorkflowTab
+            :workflow-option="option"
+            @contextmenu="showContextMenu($event, option)"
+            @click.middle="onCloseWorkflow(option)"
+          />
+        </template>
+      </SelectButton>
+    </ScrollPanel>
+    <Button
+      v-if="showOverflowArrows"
+      icon="pi pi-chevron-right"
+      text
+      severity="secondary"
+      class="overflow-arrow overflow-arrow-right"
+      :disabled="!rightArrowEnabled"
+      @mousedown="whileMouseDown($event, () => scroll(1))"
+    />
+    <WorkflowOverflowMenu
+      v-if="showOverflowArrows"
+      :workflows="workflowStore.openWorkflows"
+      :active-workflow="workflowStore.activeWorkflow"
+    />
+    <Button
+      v-tooltip="{ value: $t('sideToolbar.newBlankWorkflow'), showDelay: 300 }"
+      class="new-blank-workflow-button shrink-0 no-drag rounded-none"
+      icon="pi pi-plus"
+      text
+      severity="secondary"
+      :aria-label="$t('sideToolbar.newBlankWorkflow')"
+      @click="() => commandStore.execute('Comfy.NewBlankWorkflow')"
+    />
+    <ContextMenu ref="menu" :model="contextMenuItems" />
+    <div
+      v-if="menuSetting !== 'Bottom' && isDesktop"
+      class="window-actions-spacer shrink-0 app-drag"
+    />
+  </div>
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';
 
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index e33f87aceb..e849cbedb1 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -1,3 +1,89 @@
+<script setup lang="ts">
+import { computed, provide, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import MoreButton from '@/components/button/MoreButton.vue'
+import CardBottom from '@/components/card/CardBottom.vue'
+import CardContainer from '@/components/card/CardContainer.vue'
+import CardTop from '@/components/card/CardTop.vue'
+import SquareChip from '@/components/chip/SquareChip.vue'
+import MultiSelect from '@/components/input/MultiSelect.vue'
+import SearchBox from '@/components/input/SearchBox.vue'
+import SingleSelect from '@/components/input/SingleSelect.vue'
+import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
+import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
+import RightSidePanel from '@/components/widget/panel/RightSidePanel.vue'
+import type { NavGroupData, NavItemData } from '@/types/navTypes'
+import { OnCloseKey } from '@/types/widgetTypes'
+import { createGridStyle } from '@/utils/gridUtil'
+
+const frameworkOptions = ref([
+  { name: 'Vue', value: 'vue' },
+  { name: 'React', value: 'react' },
+  { name: 'Angular', value: 'angular' },
+  { name: 'Svelte', value: 'svelte' }
+])
+
+const projectOptions = ref([
+  { name: 'Project A', value: 'proj-a' },
+  { name: 'Project B', value: 'proj-b' },
+  { name: 'Project C', value: 'proj-c' }
+])
+
+const sortOptions = ref([
+  { name: 'Popular', value: 'popular' },
+  { name: 'Latest', value: 'latest' },
+  { name: 'A → Z', value: 'az' }
+])
+
+const tempNavigation = ref<(NavItemData | NavGroupData)[]>([
+  { id: 'installed', label: 'Installed', icon: 'icon-[lucide--download]' },
+  {
+    title: 'TAGS',
+    items: [
+      { id: 'tag-sd15', label: 'SD 1.5', icon: 'icon-[lucide--tag]' },
+      { id: 'tag-sdxl', label: 'SDXL', icon: 'icon-[lucide--tag]' },
+      { id: 'tag-utility', label: 'Utility', icon: 'icon-[lucide--tag]' }
+    ]
+  },
+  {
+    title: 'CATEGORIES',
+    items: [
+      { id: 'cat-models', label: 'Models', icon: 'icon-[lucide--layers]' },
+      { id: 'cat-nodes', label: 'Nodes', icon: 'icon-[lucide--grid-3x3]' }
+    ]
+  }
+])
+
+const { t } = useI18n()
+
+const { onClose } = defineProps<{
+  onClose: () => void
+}>()
+
+provide(OnCloseKey, onClose)
+
+const searchQuery = ref<string>('')
+const searchText = ref<string>('')
+const selectedFrameworks = ref([])
+const selectedProjects = ref([])
+const selectedSort = ref<string>('popular')
+
+const selectedNavItem = ref<string | null>('installed')
+
+const gridStyle = computed(() => createGridStyle())
+
+watch(searchText, (newQuery) => {
+  console.log('searchText:', searchText.value, newQuery)
+})
+
+watch(searchQuery, (newQuery) => {
+  console.log('searchQuery:', searchQuery.value, newQuery)
+})
+</script>
+
 <template>
   <BaseModalLayout :content-title="$t('Checkpoints')">
     <template #leftPanel>
@@ -125,89 +211,3 @@
     </template>
   </BaseModalLayout>
 </template>
-
-<script setup lang="ts">
-import { computed, provide, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import IconButton from '@/components/button/IconButton.vue'
-import IconTextButton from '@/components/button/IconTextButton.vue'
-import MoreButton from '@/components/button/MoreButton.vue'
-import CardBottom from '@/components/card/CardBottom.vue'
-import CardContainer from '@/components/card/CardContainer.vue'
-import CardTop from '@/components/card/CardTop.vue'
-import SquareChip from '@/components/chip/SquareChip.vue'
-import MultiSelect from '@/components/input/MultiSelect.vue'
-import SearchBox from '@/components/input/SearchBox.vue'
-import SingleSelect from '@/components/input/SingleSelect.vue'
-import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
-import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
-import RightSidePanel from '@/components/widget/panel/RightSidePanel.vue'
-import type { NavGroupData, NavItemData } from '@/types/navTypes'
-import { OnCloseKey } from '@/types/widgetTypes'
-import { createGridStyle } from '@/utils/gridUtil'
-
-const frameworkOptions = ref([
-  { name: 'Vue', value: 'vue' },
-  { name: 'React', value: 'react' },
-  { name: 'Angular', value: 'angular' },
-  { name: 'Svelte', value: 'svelte' }
-])
-
-const projectOptions = ref([
-  { name: 'Project A', value: 'proj-a' },
-  { name: 'Project B', value: 'proj-b' },
-  { name: 'Project C', value: 'proj-c' }
-])
-
-const sortOptions = ref([
-  { name: 'Popular', value: 'popular' },
-  { name: 'Latest', value: 'latest' },
-  { name: 'A → Z', value: 'az' }
-])
-
-const tempNavigation = ref<(NavItemData | NavGroupData)[]>([
-  { id: 'installed', label: 'Installed', icon: 'icon-[lucide--download]' },
-  {
-    title: 'TAGS',
-    items: [
-      { id: 'tag-sd15', label: 'SD 1.5', icon: 'icon-[lucide--tag]' },
-      { id: 'tag-sdxl', label: 'SDXL', icon: 'icon-[lucide--tag]' },
-      { id: 'tag-utility', label: 'Utility', icon: 'icon-[lucide--tag]' }
-    ]
-  },
-  {
-    title: 'CATEGORIES',
-    items: [
-      { id: 'cat-models', label: 'Models', icon: 'icon-[lucide--layers]' },
-      { id: 'cat-nodes', label: 'Nodes', icon: 'icon-[lucide--grid-3x3]' }
-    ]
-  }
-])
-
-const { t } = useI18n()
-
-const { onClose } = defineProps<{
-  onClose: () => void
-}>()
-
-provide(OnCloseKey, onClose)
-
-const searchQuery = ref<string>('')
-const searchText = ref<string>('')
-const selectedFrameworks = ref([])
-const selectedProjects = ref([])
-const selectedSort = ref<string>('popular')
-
-const selectedNavItem = ref<string | null>('installed')
-
-const gridStyle = computed(() => createGridStyle())
-
-watch(searchText, (newQuery) => {
-  console.log('searchText:', searchText.value, newQuery)
-})
-
-watch(searchQuery, (newQuery) => {
-  console.log('searchQuery:', searchQuery.value, newQuery)
-})
-</script>
diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index c455f62eec..fe5905dd92 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -1,72 +1,3 @@
-<template>
-  <div :class="layoutClasses">
-    <IconButton
-      v-show="!isRightPanelOpen && hasRightPanel"
-      :class="rightPanelButtonClasses"
-      @click="toggleRightPanel"
-    >
-      <i-lucide:panel-right class="text-sm" />
-    </IconButton>
-    <IconButton :class="closeButtonClasses" @click="closeDialog">
-      <i class="pi pi-times text-sm"></i>
-    </IconButton>
-    <div class="flex w-full h-full">
-      <Transition name="slide-panel">
-        <nav
-          v-if="$slots.leftPanel && showLeftPanel"
-          :class="[
-            PANEL_SIZES.width,
-            PANEL_SIZES.minWidth,
-            PANEL_SIZES.maxWidth
-          ]"
-        >
-          <slot name="leftPanel"></slot>
-        </nav>
-      </Transition>
-
-      <div :class="mainContainerClasses">
-        <div class="w-full h-full flex flex-col">
-          <header v-if="$slots.header" :class="headerClasses">
-            <div class="flex-1 flex gap-2 shrink-0">
-              <IconButton v-if="!notMobile" @click="toggleLeftPanel">
-                <i-lucide:panel-left v-if="!showLeftPanel" class="text-sm" />
-                <i-lucide:panel-left-close v-else class="text-sm" />
-              </IconButton>
-              <slot name="header"></slot>
-            </div>
-            <slot name="header-right-area"></slot>
-            <div :class="rightAreaClasses">
-              <IconButton
-                v-if="isRightPanelOpen && hasRightPanel"
-                @click="toggleRightPanel"
-              >
-                <i-lucide:panel-right-close class="text-sm" />
-              </IconButton>
-            </div>
-          </header>
-
-          <main class="flex flex-col flex-1 min-h-0">
-            <!-- Fallback title bar when no leftPanel is provided -->
-            <slot name="contentFilter"></slot>
-            <h2 v-if="!$slots.leftPanel" class="text-xxl px-6 pt-2 pb-6 m-0">
-              {{ contentTitle }}
-            </h2>
-            <div :class="contentContainerClasses">
-              <slot name="content"></slot>
-            </div>
-          </main>
-        </div>
-        <aside
-          v-if="hasRightPanel && isRightPanelOpen"
-          :class="rightPanelClasses"
-        >
-          <slot name="rightPanel"></slot>
-        </aside>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useBreakpoints } from '@vueuse/core'
 import { computed, inject, ref, useSlots, watch } from 'vue'
@@ -167,6 +98,75 @@ const rightPanelClasses = computed(() => {
   return cn('w-1/4 min-w-40 max-w-80')
 })
 </script>
+
+<template>
+  <div :class="layoutClasses">
+    <IconButton
+      v-show="!isRightPanelOpen && hasRightPanel"
+      :class="rightPanelButtonClasses"
+      @click="toggleRightPanel"
+    >
+      <i-lucide:panel-right class="text-sm" />
+    </IconButton>
+    <IconButton :class="closeButtonClasses" @click="closeDialog">
+      <i class="pi pi-times text-sm"></i>
+    </IconButton>
+    <div class="flex w-full h-full">
+      <Transition name="slide-panel">
+        <nav
+          v-if="$slots.leftPanel && showLeftPanel"
+          :class="[
+            PANEL_SIZES.width,
+            PANEL_SIZES.minWidth,
+            PANEL_SIZES.maxWidth
+          ]"
+        >
+          <slot name="leftPanel"></slot>
+        </nav>
+      </Transition>
+
+      <div :class="mainContainerClasses">
+        <div class="w-full h-full flex flex-col">
+          <header v-if="$slots.header" :class="headerClasses">
+            <div class="flex-1 flex gap-2 shrink-0">
+              <IconButton v-if="!notMobile" @click="toggleLeftPanel">
+                <i-lucide:panel-left v-if="!showLeftPanel" class="text-sm" />
+                <i-lucide:panel-left-close v-else class="text-sm" />
+              </IconButton>
+              <slot name="header"></slot>
+            </div>
+            <slot name="header-right-area"></slot>
+            <div :class="rightAreaClasses">
+              <IconButton
+                v-if="isRightPanelOpen && hasRightPanel"
+                @click="toggleRightPanel"
+              >
+                <i-lucide:panel-right-close class="text-sm" />
+              </IconButton>
+            </div>
+          </header>
+
+          <main class="flex flex-col flex-1 min-h-0">
+            <!-- Fallback title bar when no leftPanel is provided -->
+            <slot name="contentFilter"></slot>
+            <h2 v-if="!$slots.leftPanel" class="text-xxl px-6 pt-2 pb-6 m-0">
+              {{ contentTitle }}
+            </h2>
+            <div :class="contentContainerClasses">
+              <slot name="content"></slot>
+            </div>
+          </main>
+        </div>
+        <aside
+          v-if="hasRightPanel && isRightPanelOpen"
+          :class="rightPanelClasses"
+        >
+          <slot name="rightPanel"></slot>
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
 <style scoped>
 .base-widget-layout {
   height: 80vh;
diff --git a/src/components/widget/nav/NavIcon.vue b/src/components/widget/nav/NavIcon.vue
index 653a6a70ed..db95016f05 100644
--- a/src/components/widget/nav/NavIcon.vue
+++ b/src/components/widget/nav/NavIcon.vue
@@ -1,7 +1,3 @@
-<template>
-  <i :class="icon" class="text-xs text-neutral" />
-</template>
-
 <script setup lang="ts">
 import type { NavItemData } from '@/types/navTypes'
 
@@ -9,3 +5,7 @@ defineProps<{
   icon: NavItemData['icon']
 }>()
 </script>
+
+<template>
+  <i :class="icon" class="text-xs text-neutral" />
+</template>
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index 0b7532050a..d48b8df558 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import type { NavItemData } from '@/types/navTypes'
+
+import NavIcon from './NavIcon.vue'
+
+const { icon, active, onClick } = defineProps<{
+  icon: NavItemData['icon']
+  active?: boolean
+  onClick: () => void
+}>()
+</script>
+
 <template>
   <div
     class="flex items-center gap-2 px-4 py-3 text-sm rounded-md transition-colors cursor-pointer"
@@ -16,15 +28,3 @@
     </span>
   </div>
 </template>
-
-<script setup lang="ts">
-import type { NavItemData } from '@/types/navTypes'
-
-import NavIcon from './NavIcon.vue'
-
-const { icon, active, onClick } = defineProps<{
-  icon: NavItemData['icon']
-  active?: boolean
-  onClick: () => void
-}>()
-</script>
diff --git a/src/components/widget/nav/NavTitle.vue b/src/components/widget/nav/NavTitle.vue
index ac3b62048c..a2cb71e274 100644
--- a/src/components/widget/nav/NavTitle.vue
+++ b/src/components/widget/nav/NavTitle.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+const { title } = defineProps<{
+  title: string
+}>()
+</script>
+
 <template>
   <h3
     class="m-0 px-3 py-0 pt-5 text-xs font-bold uppercase text-neutral-400 dark-theme:text-neutral-400"
@@ -5,9 +11,3 @@
     {{ title }}
   </h3>
 </template>
-
-<script setup lang="ts">
-const { title } = defineProps<{
-  title: string
-}>()
-</script>
diff --git a/src/components/widget/panel/LeftSidePanel.vue b/src/components/widget/panel/LeftSidePanel.vue
index 964753365d..74d8725c90 100644
--- a/src/components/widget/panel/LeftSidePanel.vue
+++ b/src/components/widget/panel/LeftSidePanel.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-zinc-800">
-    <PanelHeader>
-      <template #icon>
-        <slot name="header-icon"></slot>
-      </template>
-      <slot name="header-title"></slot>
-    </PanelHeader>
-
-    <nav class="flex-1 px-3 py-4 flex flex-col gap-1">
-      <template v-for="(item, index) in navItems" :key="index">
-        <div v-if="'items' in item" class="flex flex-col gap-2">
-          <NavTitle :title="item.title" />
-          <NavItem
-            v-for="subItem in item.items"
-            :key="subItem.id"
-            :icon="subItem.icon"
-            :active="activeItem === subItem.id"
-            @click="activeItem = subItem.id"
-          >
-            {{ subItem.label }}
-          </NavItem>
-        </div>
-        <div v-else class="flex flex-col gap-2">
-          <NavItem
-            :icon="item.icon"
-            :active="activeItem === item.id"
-            @click="activeItem = item.id"
-          >
-            {{ item.label }}
-          </NavItem>
-        </div>
-      </template>
-    </nav>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -75,3 +38,40 @@ const activeItem = computed({
   set: (value: string | null) => emit('update:modelValue', value)
 })
 </script>
+
+<template>
+  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-zinc-800">
+    <PanelHeader>
+      <template #icon>
+        <slot name="header-icon"></slot>
+      </template>
+      <slot name="header-title"></slot>
+    </PanelHeader>
+
+    <nav class="flex-1 px-3 py-4 flex flex-col gap-1">
+      <template v-for="(item, index) in navItems" :key="index">
+        <div v-if="'items' in item" class="flex flex-col gap-2">
+          <NavTitle :title="item.title" />
+          <NavItem
+            v-for="subItem in item.items"
+            :key="subItem.id"
+            :icon="subItem.icon"
+            :active="activeItem === subItem.id"
+            @click="activeItem = subItem.id"
+          >
+            {{ subItem.label }}
+          </NavItem>
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <NavItem
+            :icon="item.icon"
+            :active="activeItem === item.id"
+            @click="activeItem = item.id"
+          >
+            {{ item.label }}
+          </NavItem>
+        </div>
+      </template>
+    </nav>
+  </div>
+</template>
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index bb27153c21..3f8c3e24dd 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="absolute bottom-2 right-2 flex flex-wrap justify-end gap-1">
-    <span
-      v-for="badge in badges"
-      :key="badge.label"
-      :class="
-        cn(
-          'px-2 py-1 rounded text-xs font-medium uppercase tracking-wider text-white',
-          getBadgeColor(badge.type)
-        )
-      "
-    >
-      {{ badge.label }}
-    </span>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { cn } from '@/utils/tailwindUtil'
 
@@ -40,3 +23,20 @@ function getBadgeColor(type: AssetBadge['type']): string {
   }
 }
 </script>
+
+<template>
+  <div class="absolute bottom-2 right-2 flex flex-wrap justify-end gap-1">
+    <span
+      v-for="badge in badges"
+      :key="badge.label"
+      :class="
+        cn(
+          'px-2 py-1 rounded text-xs font-medium uppercase tracking-wider text-white',
+          getBadgeColor(badge.type)
+        )
+      "
+    >
+      {{ badge.label }}
+    </span>
+  </div>
+</template>
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index cb45f38ba9..1506cf9d97 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -1,41 +1,3 @@
-<template>
-  <BaseModalLayout
-    data-component-id="AssetBrowserModal"
-    class="size-full max-h-full max-w-full min-w-0"
-    :content-title="contentTitle"
-    @close="handleClose"
-  >
-    <template v-if="shouldShowLeftPanel" #leftPanel>
-      <LeftSidePanel
-        v-model="selectedCategory"
-        data-component-id="AssetBrowserModal-LeftSidePanel"
-        :nav-items="availableCategories"
-      >
-        <template #header-icon>
-          <div class="icon-[lucide--folder] size-4" />
-        </template>
-        <template #header-title>{{ $t('assetBrowser.browseAssets') }}</template>
-      </LeftSidePanel>
-    </template>
-
-    <template #header>
-      <SearchBox
-        v-model="searchQuery"
-        size="lg"
-        :placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
-        class="max-w-96"
-      />
-    </template>
-
-    <template #content>
-      <AssetGrid
-        :assets="filteredAssets"
-        @asset-select="handleAssetSelectAndEmit"
-      />
-    </template>
-  </BaseModalLayout>
-</template>
-
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 
@@ -87,3 +49,41 @@ const handleAssetSelectAndEmit = async (asset: AssetDisplayItem) => {
   await selectAssetWithCallback(asset.id, props.onSelect)
 }
 </script>
+
+<template>
+  <BaseModalLayout
+    data-component-id="AssetBrowserModal"
+    class="size-full max-h-full max-w-full min-w-0"
+    :content-title="contentTitle"
+    @close="handleClose"
+  >
+    <template v-if="shouldShowLeftPanel" #leftPanel>
+      <LeftSidePanel
+        v-model="selectedCategory"
+        data-component-id="AssetBrowserModal-LeftSidePanel"
+        :nav-items="availableCategories"
+      >
+        <template #header-icon>
+          <div class="icon-[lucide--folder] size-4" />
+        </template>
+        <template #header-title>{{ $t('assetBrowser.browseAssets') }}</template>
+      </LeftSidePanel>
+    </template>
+
+    <template #header>
+      <SearchBox
+        v-model="searchQuery"
+        size="lg"
+        :placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
+        class="max-w-96"
+      />
+    </template>
+
+    <template #content>
+      <AssetGrid
+        :assets="filteredAssets"
+        @asset-select="handleAssetSelectAndEmit"
+      />
+    </template>
+  </BaseModalLayout>
+</template>
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index be7c45ca54..548a1c5851 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
+import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { cn } from '@/utils/tailwindUtil'
+
+const props = defineProps<{
+  asset: AssetDisplayItem
+  interactive?: boolean
+}>()
+
+const elementProps = computed(() =>
+  props.interactive
+    ? {
+        type: 'button',
+        'aria-label': `Select asset ${props.asset.name}`
+      }
+    : {}
+)
+
+defineEmits<{
+  select: [asset: AssetDisplayItem]
+}>()
+</script>
+
 <template>
   <component
     :is="interactive ? 'button' : 'div'"
@@ -83,29 +109,3 @@
     </div>
   </component>
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
-import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
-import { cn } from '@/utils/tailwindUtil'
-
-const props = defineProps<{
-  asset: AssetDisplayItem
-  interactive?: boolean
-}>()
-
-const elementProps = computed(() =>
-  props.interactive
-    ? {
-        type: 'button',
-        'aria-label': `Select asset ${props.asset.name}`
-      }
-    : {}
-)
-
-defineEmits<{
-  select: [asset: AssetDisplayItem]
-}>()
-</script>
diff --git a/src/platform/assets/components/AssetFilterBar.vue b/src/platform/assets/components/AssetFilterBar.vue
index 904ce3e82e..581174fed3 100644
--- a/src/platform/assets/components/AssetFilterBar.vue
+++ b/src/platform/assets/components/AssetFilterBar.vue
@@ -1,42 +1,3 @@
-<template>
-  <div :class="containerClasses" data-component-id="asset-filter-bar">
-    <div :class="leftSideClasses" data-component-id="asset-filter-bar-left">
-      <MultiSelect
-        v-model="fileFormats"
-        :label="$t('assetBrowser.fileFormats')"
-        :options="fileFormatOptions"
-        :class="selectClasses"
-        data-component-id="asset-filter-file-formats"
-        @update:model-value="handleFilterChange"
-      />
-
-      <MultiSelect
-        v-model="baseModels"
-        :label="$t('assetBrowser.baseModels')"
-        :options="baseModelOptions"
-        :class="selectClasses"
-        data-component-id="asset-filter-base-models"
-        @update:model-value="handleFilterChange"
-      />
-    </div>
-
-    <div :class="rightSideClasses" data-component-id="asset-filter-bar-right">
-      <SingleSelect
-        v-model="sortBy"
-        :label="$t('assetBrowser.sortBy')"
-        :options="sortOptions"
-        :class="selectClasses"
-        data-component-id="asset-filter-sort"
-        @update:model-value="handleFilterChange"
-      >
-        <template #icon>
-          <i-lucide:arrow-up-down class="size-3" />
-        </template>
-      </SingleSelect>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue'
 
@@ -101,3 +62,42 @@ function handleFilterChange() {
   })
 }
 </script>
+
+<template>
+  <div :class="containerClasses" data-component-id="asset-filter-bar">
+    <div :class="leftSideClasses" data-component-id="asset-filter-bar-left">
+      <MultiSelect
+        v-model="fileFormats"
+        :label="$t('assetBrowser.fileFormats')"
+        :options="fileFormatOptions"
+        :class="selectClasses"
+        data-component-id="asset-filter-file-formats"
+        @update:model-value="handleFilterChange"
+      />
+
+      <MultiSelect
+        v-model="baseModels"
+        :label="$t('assetBrowser.baseModels')"
+        :options="baseModelOptions"
+        :class="selectClasses"
+        data-component-id="asset-filter-base-models"
+        @update:model-value="handleFilterChange"
+      />
+    </div>
+
+    <div :class="rightSideClasses" data-component-id="asset-filter-bar-right">
+      <SingleSelect
+        v-model="sortBy"
+        :label="$t('assetBrowser.sortBy')"
+        :options="sortOptions"
+        :class="selectClasses"
+        data-component-id="asset-filter-sort"
+        @update:model-value="handleFilterChange"
+      >
+        <template #icon>
+          <i-lucide:arrow-up-down class="size-3" />
+        </template>
+      </SingleSelect>
+    </div>
+  </div>
+</template>
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 35122fd52c..bd5e110d0a 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import AssetCard from '@/platform/assets/components/AssetCard.vue'
+import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { createGridStyle } from '@/utils/gridUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+defineProps<{
+  assets: AssetDisplayItem[]
+  loading?: boolean
+}>()
+
+defineEmits<{
+  assetSelect: [asset: AssetDisplayItem]
+}>()
+
+// Use same grid style as BaseModalLayout
+const gridStyle = computed(() => createGridStyle())
+</script>
+
 <template>
   <div
     data-component-id="AssetGrid"
@@ -47,24 +68,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import AssetCard from '@/platform/assets/components/AssetCard.vue'
-import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
-import { createGridStyle } from '@/utils/gridUtil'
-import { cn } from '@/utils/tailwindUtil'
-
-defineProps<{
-  assets: AssetDisplayItem[]
-  loading?: boolean
-}>()
-
-defineEmits<{
-  assetSelect: [asset: AssetDisplayItem]
-}>()
-
-// Use same grid style as BaseModalLayout
-const gridStyle = computed(() => createGridStyle())
-</script>
diff --git a/src/platform/settings/components/ColorPaletteMessage.vue b/src/platform/settings/components/ColorPaletteMessage.vue
index fbdb79ce09..199a839547 100644
--- a/src/platform/settings/components/ColorPaletteMessage.vue
+++ b/src/platform/settings/components/ColorPaletteMessage.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+import Select from 'primevue/select'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
+const settingStore = useSettingStore()
+const colorPaletteStore = useColorPaletteStore()
+const colorPaletteService = useColorPaletteService()
+const { palettes, activePaletteId } = storeToRefs(colorPaletteStore)
+
+const importCustomPalette = async () => {
+  const palette = await colorPaletteService.importColorPalette()
+  if (palette) {
+    await settingStore.set('Comfy.ColorPalette', palette.id)
+  }
+}
+</script>
+
 <template>
   <Message severity="info" icon="pi pi-palette" pt:text="w-full">
     <div class="flex items-center justify-between">
@@ -36,26 +59,3 @@
     </div>
   </Message>
 </template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
-import Message from 'primevue/message'
-import Select from 'primevue/select'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useColorPaletteService } from '@/services/colorPaletteService'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-
-const settingStore = useSettingStore()
-const colorPaletteStore = useColorPaletteStore()
-const colorPaletteService = useColorPaletteService()
-const { palettes, activePaletteId } = storeToRefs(colorPaletteStore)
-
-const importCustomPalette = async () => {
-  const palette = await colorPaletteService.importColorPalette()
-  if (palette) {
-    await settingStore.set('Comfy.ColorPalette', palette.id)
-  }
-}
-</script>
diff --git a/src/platform/settings/components/ExtensionPanel.vue b/src/platform/settings/components/ExtensionPanel.vue
index 92be564f54..d470478e18 100644
--- a/src/platform/settings/components/ExtensionPanel.vue
+++ b/src/platform/settings/components/ExtensionPanel.vue
@@ -1,84 +1,3 @@
-<template>
-  <PanelTemplate value="Extension" class="extension-panel">
-    <template #header>
-      <SearchBox
-        v-model="filters['global'].value"
-        :placeholder="$t('g.searchExtensions') + '...'"
-      />
-      <Message
-        v-if="hasChanges"
-        severity="info"
-        pt:text="w-full"
-        class="max-h-96 overflow-y-auto"
-      >
-        <ul>
-          <li v-for="ext in changedExtensions" :key="ext.name">
-            <span>
-              {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}
-            </span>
-            {{ ext.name }}
-          </li>
-        </ul>
-        <div class="flex justify-end">
-          <Button
-            :label="$t('g.reloadToApplyChanges')"
-            outlined
-            severity="danger"
-            @click="applyChanges"
-          />
-        </div>
-      </Message>
-    </template>
-    <div class="mb-3 flex gap-2">
-      <SelectButton v-model="filterType" :options="filterTypes" />
-    </div>
-    <DataTable
-      v-model:selection="selectedExtensions"
-      :value="filteredExtensions"
-      striped-rows
-      size="small"
-      :filters="filters"
-      selection-mode="multiple"
-      data-key="name"
-    >
-      <Column selection-mode="multiple" :frozen="true" style="width: 3rem" />
-      <Column :header="$t('g.extensionName')" sortable field="name">
-        <template #body="slotProps">
-          {{ slotProps.data.name }}
-          <Tag
-            v-if="extensionStore.isCoreExtension(slotProps.data.name)"
-            value="Core"
-          />
-          <Tag v-else value="Custom" severity="info" />
-        </template>
-      </Column>
-      <Column
-        :pt="{
-          headerCell: 'flex items-center justify-end',
-          bodyCell: 'flex items-center justify-end'
-        }"
-      >
-        <template #header>
-          <Button
-            icon="pi pi-ellipsis-h"
-            text
-            severity="secondary"
-            @click="menu?.show($event)"
-          />
-          <ContextMenu ref="menu" :model="contextMenuItems" />
-        </template>
-        <template #body="slotProps">
-          <ToggleSwitch
-            v-model="editingEnabledExtensions[slotProps.data.name]"
-            :disabled="extensionStore.isExtensionReadOnly(slotProps.data.name)"
-            @change="updateExtensionStatus"
-          />
-        </template>
-      </Column>
-    </DataTable>
-  </PanelTemplate>
-</template>
-
 <script setup lang="ts">
 import { FilterMatchMode } from '@primevue/core/api'
 import Button from 'primevue/button'
@@ -236,3 +155,84 @@ const contextMenuItems = [
   }
 ]
 </script>
+
+<template>
+  <PanelTemplate value="Extension" class="extension-panel">
+    <template #header>
+      <SearchBox
+        v-model="filters['global'].value"
+        :placeholder="$t('g.searchExtensions') + '...'"
+      />
+      <Message
+        v-if="hasChanges"
+        severity="info"
+        pt:text="w-full"
+        class="max-h-96 overflow-y-auto"
+      >
+        <ul>
+          <li v-for="ext in changedExtensions" :key="ext.name">
+            <span>
+              {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}
+            </span>
+            {{ ext.name }}
+          </li>
+        </ul>
+        <div class="flex justify-end">
+          <Button
+            :label="$t('g.reloadToApplyChanges')"
+            outlined
+            severity="danger"
+            @click="applyChanges"
+          />
+        </div>
+      </Message>
+    </template>
+    <div class="mb-3 flex gap-2">
+      <SelectButton v-model="filterType" :options="filterTypes" />
+    </div>
+    <DataTable
+      v-model:selection="selectedExtensions"
+      :value="filteredExtensions"
+      striped-rows
+      size="small"
+      :filters="filters"
+      selection-mode="multiple"
+      data-key="name"
+    >
+      <Column selection-mode="multiple" :frozen="true" style="width: 3rem" />
+      <Column :header="$t('g.extensionName')" sortable field="name">
+        <template #body="slotProps">
+          {{ slotProps.data.name }}
+          <Tag
+            v-if="extensionStore.isCoreExtension(slotProps.data.name)"
+            value="Core"
+          />
+          <Tag v-else value="Custom" severity="info" />
+        </template>
+      </Column>
+      <Column
+        :pt="{
+          headerCell: 'flex items-center justify-end',
+          bodyCell: 'flex items-center justify-end'
+        }"
+      >
+        <template #header>
+          <Button
+            icon="pi pi-ellipsis-h"
+            text
+            severity="secondary"
+            @click="menu?.show($event)"
+          />
+          <ContextMenu ref="menu" :model="contextMenuItems" />
+        </template>
+        <template #body="slotProps">
+          <ToggleSwitch
+            v-model="editingEnabledExtensions[slotProps.data.name]"
+            :disabled="extensionStore.isExtensionReadOnly(slotProps.data.name)"
+            @change="updateExtensionStatus"
+          />
+        </template>
+      </Column>
+    </DataTable>
+  </PanelTemplate>
+</template>
diff --git a/src/platform/settings/components/ServerConfigPanel.vue b/src/platform/settings/components/ServerConfigPanel.vue
index 8f2cd1cd75..9cf23f55c9 100644
--- a/src/platform/settings/components/ServerConfigPanel.vue
+++ b/src/platform/settings/components/ServerConfigPanel.vue
@@ -1,3 +1,63 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import Message from 'primevue/message'
+import { watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import FormItem from '@/components/common/FormItem.vue'
+import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import type { ServerConfig } from '@/constants/serverConfig'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { FormItem as FormItemType } from '@/platform/settings/types'
+import { useServerConfigStore } from '@/stores/serverConfigStore'
+import { electronAPI } from '@/utils/envUtil'
+
+const settingStore = useSettingStore()
+const serverConfigStore = useServerConfigStore()
+const {
+  serverConfigsByCategory,
+  serverConfigValues,
+  launchArgs,
+  commandLineArgs,
+  modifiedConfigs
+} = storeToRefs(serverConfigStore)
+
+const revertChanges = () => {
+  serverConfigStore.revertChanges()
+}
+
+const restartApp = async () => {
+  await electronAPI().restartApp()
+}
+
+watch(launchArgs, async (newVal) => {
+  await settingStore.set('Comfy.Server.LaunchArgs', newVal)
+})
+
+watch(serverConfigValues, async (newVal) => {
+  await settingStore.set('Comfy.Server.ServerConfigValues', newVal)
+})
+
+const { copyToClipboard } = useCopyToClipboard()
+const copyCommandLineArgs = async () => {
+  await copyToClipboard(commandLineArgs.value)
+}
+
+const { t } = useI18n()
+const translateItem = (item: ServerConfig<any>): FormItemType => {
+  return {
+    ...item,
+    name: t(`serverConfigItems.${item.id}.name`, item.name),
+    tooltip: item.tooltip
+      ? t(`serverConfigItems.${item.id}.tooltip`, item.tooltip)
+      : undefined
+  }
+}
+</script>
+
 <template>
   <PanelTemplate value="Server-Config" class="server-config-panel">
     <template #header>
@@ -64,63 +124,3 @@
     </div>
   </PanelTemplate>
 </template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
-import Divider from 'primevue/divider'
-import Message from 'primevue/message'
-import { watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import FormItem from '@/components/common/FormItem.vue'
-import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import type { ServerConfig } from '@/constants/serverConfig'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import type { FormItem as FormItemType } from '@/platform/settings/types'
-import { useServerConfigStore } from '@/stores/serverConfigStore'
-import { electronAPI } from '@/utils/envUtil'
-
-const settingStore = useSettingStore()
-const serverConfigStore = useServerConfigStore()
-const {
-  serverConfigsByCategory,
-  serverConfigValues,
-  launchArgs,
-  commandLineArgs,
-  modifiedConfigs
-} = storeToRefs(serverConfigStore)
-
-const revertChanges = () => {
-  serverConfigStore.revertChanges()
-}
-
-const restartApp = async () => {
-  await electronAPI().restartApp()
-}
-
-watch(launchArgs, async (newVal) => {
-  await settingStore.set('Comfy.Server.LaunchArgs', newVal)
-})
-
-watch(serverConfigValues, async (newVal) => {
-  await settingStore.set('Comfy.Server.ServerConfigValues', newVal)
-})
-
-const { copyToClipboard } = useCopyToClipboard()
-const copyCommandLineArgs = async () => {
-  await copyToClipboard(commandLineArgs.value)
-}
-
-const { t } = useI18n()
-const translateItem = (item: ServerConfig<any>): FormItemType => {
-  return {
-    ...item,
-    name: t(`serverConfigItems.${item.id}.name`, item.name),
-    tooltip: item.tooltip
-      ? t(`serverConfigItems.${item.id}.tooltip`, item.tooltip)
-      : undefined
-  }
-}
-</script>
diff --git a/src/platform/settings/components/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue
index bbeb53ca59..26ace4b17f 100644
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -1,62 +1,3 @@
-<template>
-  <div class="settings-container">
-    <ScrollPanel class="settings-sidebar shrink-0 p-2 w-48 2xl:w-64">
-      <SearchBox
-        v-model:model-value="searchQuery"
-        class="settings-search-box w-full mb-2"
-        :placeholder="$t('g.searchSettings') + '...'"
-        :debounce-time="128"
-        @search="handleSearch"
-      />
-      <Listbox
-        v-model="activeCategory"
-        :options="groupedMenuTreeNodes"
-        option-label="translatedLabel"
-        option-group-label="label"
-        option-group-children="children"
-        scroll-height="100%"
-        :option-disabled="
-          (option: SettingTreeNode) =>
-            !queryIsEmpty && !searchResultsCategories.has(option.label ?? '')
-        "
-        class="border-none w-full"
-      >
-        <template #optiongroup>
-          <Divider class="my-0" />
-        </template>
-      </Listbox>
-    </ScrollPanel>
-    <Divider layout="vertical" class="mx-1 2xl:mx-4 hidden md:flex" />
-    <Divider layout="horizontal" class="flex md:hidden" />
-    <Tabs :value="tabValue" :lazy="true" class="settings-content h-full w-full">
-      <TabPanels class="settings-tab-panels h-full w-full pr-0">
-        <PanelTemplate value="Search Results">
-          <SettingsPanel :setting-groups="searchResults" />
-        </PanelTemplate>
-
-        <PanelTemplate
-          v-for="category in settingCategories"
-          :key="category.key"
-          :value="category.label ?? ''"
-        >
-          <template #header>
-            <CurrentUserMessage v-if="tabValue === 'Comfy'" />
-            <ColorPaletteMessage v-if="tabValue === 'Appearance'" />
-          </template>
-          <SettingsPanel :setting-groups="sortedGroups(category)" />
-        </PanelTemplate>
-
-        <Suspense v-for="panel in panels" :key="panel.node.key">
-          <component :is="panel.component" />
-          <template #fallback>
-            <div>{{ $t('g.loadingPanel', { panel: panel.node.label }) }}</div>
-          </template>
-        </Suspense>
-      </TabPanels>
-    </Tabs>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 import Listbox from 'primevue/listbox'
@@ -147,6 +88,65 @@ watch(activeCategory, (_, oldValue) => {
 })
 </script>
 
+<template>
+  <div class="settings-container">
+    <ScrollPanel class="settings-sidebar shrink-0 p-2 w-48 2xl:w-64">
+      <SearchBox
+        v-model:model-value="searchQuery"
+        class="settings-search-box w-full mb-2"
+        :placeholder="$t('g.searchSettings') + '...'"
+        :debounce-time="128"
+        @search="handleSearch"
+      />
+      <Listbox
+        v-model="activeCategory"
+        :options="groupedMenuTreeNodes"
+        option-label="translatedLabel"
+        option-group-label="label"
+        option-group-children="children"
+        scroll-height="100%"
+        :option-disabled="
+          (option: SettingTreeNode) =>
+            !queryIsEmpty && !searchResultsCategories.has(option.label ?? '')
+        "
+        class="border-none w-full"
+      >
+        <template #optiongroup>
+          <Divider class="my-0" />
+        </template>
+      </Listbox>
+    </ScrollPanel>
+    <Divider layout="vertical" class="mx-1 2xl:mx-4 hidden md:flex" />
+    <Divider layout="horizontal" class="flex md:hidden" />
+    <Tabs :value="tabValue" :lazy="true" class="settings-content h-full w-full">
+      <TabPanels class="settings-tab-panels h-full w-full pr-0">
+        <PanelTemplate value="Search Results">
+          <SettingsPanel :setting-groups="searchResults" />
+        </PanelTemplate>
+
+        <PanelTemplate
+          v-for="category in settingCategories"
+          :key="category.key"
+          :value="category.label ?? ''"
+        >
+          <template #header>
+            <CurrentUserMessage v-if="tabValue === 'Comfy'" />
+            <ColorPaletteMessage v-if="tabValue === 'Appearance'" />
+          </template>
+          <SettingsPanel :setting-groups="sortedGroups(category)" />
+        </PanelTemplate>
+
+        <Suspense v-for="panel in panels" :key="panel.node.key">
+          <component :is="panel.component" />
+          <template #fallback>
+            <div>{{ $t('g.loadingPanel', { panel: panel.node.label }) }}</div>
+          </template>
+        </Suspense>
+      </TabPanels>
+    </Tabs>
+  </div>
+</template>
+
 <style>
 .settings-tab-panels {
   padding-top: 0 !important;
diff --git a/src/platform/settings/components/SettingGroup.vue b/src/platform/settings/components/SettingGroup.vue
index ea18aa5692..c1e1923d8b 100644
--- a/src/platform/settings/components/SettingGroup.vue
+++ b/src/platform/settings/components/SettingGroup.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import Divider from 'primevue/divider'
+
+import SettingItem from '@/platform/settings/components/SettingItem.vue'
+import type { SettingParams } from '@/platform/settings/types'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
+defineProps<{
+  group: {
+    label: string
+    settings: SettingParams[]
+  }
+  divider?: boolean
+}>()
+</script>
+
 <template>
   <div class="setting-group">
     <Divider v-if="divider" />
@@ -15,19 +31,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Divider from 'primevue/divider'
-
-import SettingItem from '@/platform/settings/components/SettingItem.vue'
-import type { SettingParams } from '@/platform/settings/types'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-
-defineProps<{
-  group: {
-    label: string
-    settings: SettingParams[]
-  }
-  divider?: boolean
-}>()
-</script>
diff --git a/src/platform/settings/components/SettingItem.vue b/src/platform/settings/components/SettingItem.vue
index c83a4e77aa..666f404760 100644
--- a/src/platform/settings/components/SettingItem.vue
+++ b/src/platform/settings/components/SettingItem.vue
@@ -1,27 +1,3 @@
-<template>
-  <FormItem
-    :id="setting.id"
-    :item="formItem"
-    :form-value="settingValue"
-    @update:form-value="updateSettingValue"
-  >
-    <template #name-prefix>
-      <Tag v-if="setting.id === 'Comfy.Locale'" class="pi pi-language" />
-      <Tag
-        v-if="setting.experimental"
-        v-tooltip="{
-          value: $t('g.experimental'),
-          showDelay: 600
-        }"
-      >
-        <template #icon>
-          <i-material-symbols:experiment-outline />
-        </template>
-      </Tag>
-    </template>
-  </FormItem>
-</template>
-
 <script setup lang="ts">
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
@@ -79,3 +55,27 @@ const updateSettingValue = async (value: any) => {
   await settingStore.set(props.setting.id, value)
 }
 </script>
+
+<template>
+  <FormItem
+    :id="setting.id"
+    :item="formItem"
+    :form-value="settingValue"
+    @update:form-value="updateSettingValue"
+  >
+    <template #name-prefix>
+      <Tag v-if="setting.id === 'Comfy.Locale'" class="pi pi-language" />
+      <Tag
+        v-if="setting.experimental"
+        v-tooltip="{
+          value: $t('g.experimental'),
+          showDelay: 600
+        }"
+      >
+        <template #icon>
+          <i-material-symbols:experiment-outline />
+        </template>
+      </Tag>
+    </template>
+  </FormItem>
+</template>
diff --git a/src/platform/settings/components/SettingsPanel.vue b/src/platform/settings/components/SettingsPanel.vue
index 58b686a964..d6cac32115 100644
--- a/src/platform/settings/components/SettingsPanel.vue
+++ b/src/platform/settings/components/SettingsPanel.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import SettingGroup from '@/platform/settings/components/SettingGroup.vue'
+import type { ISettingGroup } from '@/platform/settings/types'
+
+const props = defineProps<{
+  settingGroups: ISettingGroup[]
+}>()
+</script>
+
 <template>
   <div v-if="props.settingGroups.length > 0">
     <SettingGroup
@@ -14,13 +24,3 @@
     :message="$t('g.searchFailedMessage')"
   />
 </template>
-
-<script setup lang="ts">
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import SettingGroup from '@/platform/settings/components/SettingGroup.vue'
-import type { ISettingGroup } from '@/platform/settings/types'
-
-const props = defineProps<{
-  settingGroups: ISettingGroup[]
-}>()
-</script>
diff --git a/src/platform/updates/components/ReleaseNotificationToast.vue b/src/platform/updates/components/ReleaseNotificationToast.vue
index 1abcf472e8..e99cbc4627 100644
--- a/src/platform/updates/components/ReleaseNotificationToast.vue
+++ b/src/platform/updates/components/ReleaseNotificationToast.vue
@@ -1,49 +1,3 @@
-<template>
-  <div v-if="shouldShow" class="release-toast-popup">
-    <div class="release-notification-toast">
-      <!-- Header section with icon and text -->
-      <div class="toast-header">
-        <div class="toast-icon">
-          <i class="pi pi-download" />
-        </div>
-        <div class="toast-text">
-          <div class="toast-title">
-            {{ $t('releaseToast.newVersionAvailable') }}
-          </div>
-          <div class="toast-version-badge">
-            {{ latestRelease?.version }}
-          </div>
-        </div>
-      </div>
-
-      <!-- Actions section -->
-      <div class="toast-actions-section">
-        <div class="actions-row">
-          <div class="left-actions">
-            <a
-              class="learn-more-link"
-              :href="changelogUrl"
-              target="_blank"
-              rel="noopener,noreferrer"
-              @click="handleLearnMore"
-            >
-              {{ $t('releaseToast.whatsNew') }}
-            </a>
-          </div>
-          <div class="right-actions">
-            <button class="skip-button" @click="handleSkip">
-              {{ $t('releaseToast.skip') }}
-            </button>
-            <button class="cta-button" @click="handleUpdate">
-              {{ $t('releaseToast.update') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -145,6 +99,52 @@ onMounted(async () => {
 })
 </script>
 
+<template>
+  <div v-if="shouldShow" class="release-toast-popup">
+    <div class="release-notification-toast">
+      <!-- Header section with icon and text -->
+      <div class="toast-header">
+        <div class="toast-icon">
+          <i class="pi pi-download" />
+        </div>
+        <div class="toast-text">
+          <div class="toast-title">
+            {{ $t('releaseToast.newVersionAvailable') }}
+          </div>
+          <div class="toast-version-badge">
+            {{ latestRelease?.version }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Actions section -->
+      <div class="toast-actions-section">
+        <div class="actions-row">
+          <div class="left-actions">
+            <a
+              class="learn-more-link"
+              :href="changelogUrl"
+              target="_blank"
+              rel="noopener,noreferrer"
+              @click="handleLearnMore"
+            >
+              {{ $t('releaseToast.whatsNew') }}
+            </a>
+          </div>
+          <div class="right-actions">
+            <button class="skip-button" @click="handleSkip">
+              {{ $t('releaseToast.skip') }}
+            </button>
+            <button class="cta-button" @click="handleUpdate">
+              {{ $t('releaseToast.update') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 /* Toast popup - positioning handled by parent */
 .release-toast-popup {
diff --git a/src/platform/updates/components/WhatsNewPopup.vue b/src/platform/updates/components/WhatsNewPopup.vue
index d0049d873d..f7063516de 100644
--- a/src/platform/updates/components/WhatsNewPopup.vue
+++ b/src/platform/updates/components/WhatsNewPopup.vue
@@ -1,68 +1,3 @@
-<template>
-  <div v-if="shouldShow" class="whats-new-popup-container">
-    <!-- Arrow pointing to help center -->
-    <div class="help-center-arrow">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="19"
-        viewBox="0 0 16 19"
-        fill="none"
-      >
-        <!-- Arrow fill -->
-        <path
-          d="M15.25 1.27246L15.25 17.7275L0.999023 9.5L15.25 1.27246Z"
-          fill="#353535"
-        />
-        <!-- Top and bottom outlines only -->
-        <path
-          d="M15.25 1.27246L0.999023 9.5"
-          stroke="#4e4e4e"
-          stroke-width="1"
-          fill="none"
-        />
-        <path
-          d="M0.999023 9.5L15.25 17.7275"
-          stroke="#4e4e4e"
-          stroke-width="1"
-          fill="none"
-        />
-      </svg>
-    </div>
-
-    <div class="whats-new-popup" @click.stop>
-      <!-- Close Button -->
-      <button
-        class="close-button"
-        :aria-label="$t('g.close')"
-        @click="closePopup"
-      >
-        <div class="close-icon"></div>
-      </button>
-
-      <!-- Release Content -->
-      <div class="popup-content">
-        <div class="content-text" v-html="formattedContent"></div>
-
-        <!-- Actions Section -->
-        <div class="popup-actions">
-          <a
-            class="learn-more-link"
-            :href="changelogUrl"
-            target="_blank"
-            rel="noopener,noreferrer"
-            @click="closePopup"
-          >
-            {{ $t('whatsNewPopup.learnMore') }}
-          </a>
-          <!-- TODO: CTA button -->
-          <!-- <button class="cta-button" @click="handleCTA">CTA</button> -->
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { marked } from 'marked'
 import { computed, onMounted, ref } from 'vue'
@@ -163,6 +98,71 @@ defineExpose({
 })
 </script>
 
+<template>
+  <div v-if="shouldShow" class="whats-new-popup-container">
+    <!-- Arrow pointing to help center -->
+    <div class="help-center-arrow">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="19"
+        viewBox="0 0 16 19"
+        fill="none"
+      >
+        <!-- Arrow fill -->
+        <path
+          d="M15.25 1.27246L15.25 17.7275L0.999023 9.5L15.25 1.27246Z"
+          fill="#353535"
+        />
+        <!-- Top and bottom outlines only -->
+        <path
+          d="M15.25 1.27246L0.999023 9.5"
+          stroke="#4e4e4e"
+          stroke-width="1"
+          fill="none"
+        />
+        <path
+          d="M0.999023 9.5L15.25 17.7275"
+          stroke="#4e4e4e"
+          stroke-width="1"
+          fill="none"
+        />
+      </svg>
+    </div>
+
+    <div class="whats-new-popup" @click.stop>
+      <!-- Close Button -->
+      <button
+        class="close-button"
+        :aria-label="$t('g.close')"
+        @click="closePopup"
+      >
+        <div class="close-icon"></div>
+      </button>
+
+      <!-- Release Content -->
+      <div class="popup-content">
+        <div class="content-text" v-html="formattedContent"></div>
+
+        <!-- Actions Section -->
+        <div class="popup-actions">
+          <a
+            class="learn-more-link"
+            :href="changelogUrl"
+            target="_blank"
+            rel="noopener,noreferrer"
+            @click="closePopup"
+          >
+            {{ $t('whatsNewPopup.learnMore') }}
+          </a>
+          <!-- TODO: CTA button -->
+          <!-- <button class="cta-button" @click="handleCTA">CTA</button> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 /* Popup container - positioning handled by parent */
 .whats-new-popup-container {
diff --git a/src/renderer/core/layout/transform/TransformPane.vue b/src/renderer/core/layout/transform/TransformPane.vue
index 29abc1262f..2dc6dd9f08 100644
--- a/src/renderer/core/layout/transform/TransformPane.vue
+++ b/src/renderer/core/layout/transform/TransformPane.vue
@@ -1,15 +1,3 @@
-<template>
-  <div
-    class="transform-pane"
-    :class="{ 'transform-pane--interacting': isInteracting }"
-    :style="transformStyle"
-    @pointerdown="handlePointerDown"
-  >
-    <!-- Vue nodes will be rendered here -->
-    <slot />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 
@@ -69,6 +57,18 @@ useCanvasTransformSync(props.canvas, syncWithCanvas, {
 })
 </script>
 
+<template>
+  <div
+    class="transform-pane"
+    :class="{ 'transform-pane--interacting': isInteracting }"
+    :style="transformStyle"
+    @pointerdown="handlePointerDown"
+  >
+    <!-- Vue nodes will be rendered here -->
+    <slot />
+  </div>
+</template>
+
 <style scoped>
 .transform-pane {
   position: absolute;
diff --git a/src/renderer/extensions/minimap/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue
index 63b0c85d2b..9eb8895975 100644
--- a/src/renderer/extensions/minimap/MiniMap.vue
+++ b/src/renderer/extensions/minimap/MiniMap.vue
@@ -1,3 +1,57 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
+import { useCommandStore } from '@/stores/commandStore'
+
+import MiniMapPanel from './MiniMapPanel.vue'
+
+const commandStore = useCommandStore()
+
+const minimapRef = ref<HTMLDivElement>()
+
+const {
+  initialized,
+  visible,
+  containerRef,
+  canvasRef,
+  containerStyles,
+  viewportStyles,
+  width,
+  height,
+  panelStyles,
+  nodeColors,
+  showLinks,
+  showGroups,
+  renderBypass,
+  renderError,
+  updateOption,
+  destroy,
+  handlePointerDown,
+  handlePointerMove,
+  handlePointerUp,
+  handleWheel,
+  setMinimapRef
+} = useMinimap()
+
+const showOptionsPanel = ref(false)
+
+const toggleOptionsPanel = () => {
+  showOptionsPanel.value = !showOptionsPanel.value
+}
+
+onMounted(() => {
+  if (minimapRef.value) {
+    setMinimapRef(minimapRef.value)
+  }
+})
+
+onUnmounted(() => {
+  destroy()
+})
+</script>
+
 <template>
   <div
     v-if="visible && initialized"
@@ -72,60 +126,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { onMounted, onUnmounted, ref } from 'vue'
-
-import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
-import { useCommandStore } from '@/stores/commandStore'
-
-import MiniMapPanel from './MiniMapPanel.vue'
-
-const commandStore = useCommandStore()
-
-const minimapRef = ref<HTMLDivElement>()
-
-const {
-  initialized,
-  visible,
-  containerRef,
-  canvasRef,
-  containerStyles,
-  viewportStyles,
-  width,
-  height,
-  panelStyles,
-  nodeColors,
-  showLinks,
-  showGroups,
-  renderBypass,
-  renderError,
-  updateOption,
-  destroy,
-  handlePointerDown,
-  handlePointerMove,
-  handlePointerUp,
-  handleWheel,
-  setMinimapRef
-} = useMinimap()
-
-const showOptionsPanel = ref(false)
-
-const toggleOptionsPanel = () => {
-  showOptionsPanel.value = !showOptionsPanel.value
-}
-
-onMounted(() => {
-  if (minimapRef.value) {
-    setMinimapRef(minimapRef.value)
-  }
-})
-
-onUnmounted(() => {
-  destroy()
-})
-</script>
-
 <style scoped>
 .litegraph-minimap {
   overflow: hidden;
diff --git a/src/renderer/extensions/minimap/MiniMapPanel.vue b/src/renderer/extensions/minimap/MiniMapPanel.vue
index 378e1f69dd..6631aa161a 100644
--- a/src/renderer/extensions/minimap/MiniMapPanel.vue
+++ b/src/renderer/extensions/minimap/MiniMapPanel.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import Checkbox from 'primevue/checkbox'
+
+import type { MinimapSettingsKey } from '@/renderer/extensions/minimap/types'
+
+defineProps<{
+  panelStyles: any
+  nodeColors: boolean
+  showLinks: boolean
+  showGroups: boolean
+  renderBypass: boolean
+  renderError: boolean
+}>()
+
+defineEmits<{
+  updateOption: [key: MinimapSettingsKey, value: boolean]
+}>()
+</script>
+
 <template>
   <div
     class="minimap-panel p-3 mr-2 flex flex-col gap-3 text-sm"
@@ -76,22 +95,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Checkbox from 'primevue/checkbox'
-
-import type { MinimapSettingsKey } from '@/renderer/extensions/minimap/types'
-
-defineProps<{
-  panelStyles: any
-  nodeColors: boolean
-  showLinks: boolean
-  showGroups: boolean
-  renderBypass: boolean
-  renderError: boolean
-}>()
-
-defineEmits<{
-  updateOption: [key: MinimapSettingsKey, value: boolean]
-}>()
-</script>
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 120b246577..3602105d7c 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -1,114 +1,3 @@
-<template>
-  <div
-    v-if="imageUrls.length > 0"
-    class="image-preview relative group flex flex-col items-center"
-    tabindex="0"
-    role="region"
-    :aria-label="$t('g.imagePreview')"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-    @keydown="handleKeyDown"
-  >
-    <!-- Image Wrapper -->
-    <div
-      class="relative rounded-[5px] overflow-hidden w-full max-w-[352px] bg-[#262729]"
-    >
-      <!-- Error State -->
-      <div
-        v-if="imageError"
-        class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50"
-      >
-        <i-lucide:image-off class="w-12 h-12 mb-2 text-gray-400" />
-        <p class="text-sm text-gray-300">{{ $t('g.imageFailedToLoad') }}</p>
-        <p class="text-xs text-gray-400 mt-1">{{ currentImageUrl }}</p>
-      </div>
-
-      <!-- Loading State -->
-      <Skeleton
-        v-else-if="isLoading"
-        class="w-full h-[352px]"
-        border-radius="5px"
-      />
-
-      <!-- Main Image -->
-      <img
-        v-else
-        :src="currentImageUrl"
-        :alt="imageAltText"
-        class="w-full h-[352px] object-cover block"
-        @load="handleImageLoad"
-        @error="handleImageError"
-      />
-
-      <!-- Floating Action Buttons (appear on hover) -->
-      <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
-        <!-- Mask/Edit Button -->
-        <button
-          v-if="!hasMultipleImages"
-          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
-          :title="$t('g.editOrMaskImage')"
-          :aria-label="$t('g.editOrMaskImage')"
-          @click="handleEditMask"
-        >
-          <i-lucide:venetian-mask class="w-4 h-4" />
-        </button>
-
-        <!-- Download Button -->
-        <button
-          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
-          :title="$t('g.downloadImage')"
-          :aria-label="$t('g.downloadImage')"
-          @click="handleDownload"
-        >
-          <i-lucide:download class="w-4 h-4" />
-        </button>
-
-        <!-- Close Button -->
-        <button
-          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
-          :title="$t('g.removeImage')"
-          :aria-label="$t('g.removeImage')"
-          @click="handleRemove"
-        >
-          <i-lucide:x class="w-4 h-4" />
-        </button>
-      </div>
-
-      <!-- Multiple Images Navigation -->
-      <div
-        v-if="hasMultipleImages"
-        class="absolute bottom-2 left-2 right-2 flex justify-center gap-1"
-      >
-        <button
-          v-for="(_, index) in imageUrls"
-          :key="index"
-          :class="getNavigationDotClass(index)"
-          :aria-label="
-            $t('g.viewImageOfTotal', {
-              index: index + 1,
-              total: imageUrls.length
-            })
-          "
-          @click="setCurrentIndex(index)"
-        />
-      </div>
-    </div>
-
-    <!-- Image Dimensions -->
-    <div class="text-white text-xs text-center mt-2">
-      <span v-if="imageError" class="text-red-400">
-        {{ $t('g.errorLoadingImage') }}
-      </span>
-      <span v-else-if="isLoading" class="text-gray-400">
-        {{ $t('g.loading') }}...
-      </span>
-      <span v-else>
-        {{ actualDimensions || $t('g.calculatingDimensions') }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useToast } from 'primevue'
 import Skeleton from 'primevue/skeleton'
@@ -256,3 +145,114 @@ const handleKeyDown = (event: KeyboardEvent) => {
   }
 }
 </script>
+
+<template>
+  <div
+    v-if="imageUrls.length > 0"
+    class="image-preview relative group flex flex-col items-center"
+    tabindex="0"
+    role="region"
+    :aria-label="$t('g.imagePreview')"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @keydown="handleKeyDown"
+  >
+    <!-- Image Wrapper -->
+    <div
+      class="relative rounded-[5px] overflow-hidden w-full max-w-[352px] bg-[#262729]"
+    >
+      <!-- Error State -->
+      <div
+        v-if="imageError"
+        class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50"
+      >
+        <i-lucide:image-off class="w-12 h-12 mb-2 text-gray-400" />
+        <p class="text-sm text-gray-300">{{ $t('g.imageFailedToLoad') }}</p>
+        <p class="text-xs text-gray-400 mt-1">{{ currentImageUrl }}</p>
+      </div>
+
+      <!-- Loading State -->
+      <Skeleton
+        v-else-if="isLoading"
+        class="w-full h-[352px]"
+        border-radius="5px"
+      />
+
+      <!-- Main Image -->
+      <img
+        v-else
+        :src="currentImageUrl"
+        :alt="imageAltText"
+        class="w-full h-[352px] object-cover block"
+        @load="handleImageLoad"
+        @error="handleImageError"
+      />
+
+      <!-- Floating Action Buttons (appear on hover) -->
+      <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
+        <!-- Mask/Edit Button -->
+        <button
+          v-if="!hasMultipleImages"
+          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          :title="$t('g.editOrMaskImage')"
+          :aria-label="$t('g.editOrMaskImage')"
+          @click="handleEditMask"
+        >
+          <i-lucide:venetian-mask class="w-4 h-4" />
+        </button>
+
+        <!-- Download Button -->
+        <button
+          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          :title="$t('g.downloadImage')"
+          :aria-label="$t('g.downloadImage')"
+          @click="handleDownload"
+        >
+          <i-lucide:download class="w-4 h-4" />
+        </button>
+
+        <!-- Close Button -->
+        <button
+          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          :title="$t('g.removeImage')"
+          :aria-label="$t('g.removeImage')"
+          @click="handleRemove"
+        >
+          <i-lucide:x class="w-4 h-4" />
+        </button>
+      </div>
+
+      <!-- Multiple Images Navigation -->
+      <div
+        v-if="hasMultipleImages"
+        class="absolute bottom-2 left-2 right-2 flex justify-center gap-1"
+      >
+        <button
+          v-for="(_, index) in imageUrls"
+          :key="index"
+          :class="getNavigationDotClass(index)"
+          :aria-label="
+            $t('g.viewImageOfTotal', {
+              index: index + 1,
+              total: imageUrls.length
+            })
+          "
+          @click="setCurrentIndex(index)"
+        />
+      </div>
+    </div>
+
+    <!-- Image Dimensions -->
+    <div class="text-white text-xs text-center mt-2">
+      <span v-if="imageError" class="text-red-400">
+        {{ $t('g.errorLoadingImage') }}
+      </span>
+      <span v-else-if="isLoading" class="text-gray-400">
+        {{ $t('g.loading') }}...
+      </span>
+      <span v-else>
+        {{ actualDimensions || $t('g.calculatingDimensions') }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index ef38c0754d..645b70cead 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -1,24 +1,3 @@
-<template>
-  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
-  <div v-else v-tooltip.left="tooltipConfig" :class="slotWrapperClass">
-    <!-- Connection Dot -->
-    <SlotConnectionDot
-      ref="connectionDotRef"
-      :color="slotColor"
-      class="-translate-x-1/2"
-      v-on="readonly ? {} : { pointerdown: onPointerDown }"
-    />
-
-    <!-- Slot Name -->
-    <span
-      v-if="!dotOnly"
-      class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200"
-    >
-      {{ slotData.localized_name || slotData.name || `Input ${index}` }}
-    </span>
-  </div>
-</template>
-
 <script setup lang="ts">
 import {
   type ComponentPublicInstance,
@@ -120,3 +99,24 @@ const { onPointerDown } = useSlotLinkInteraction({
   readonly: props.readonly
 })
 </script>
+
+<template>
+  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
+  <div v-else v-tooltip.left="tooltipConfig" :class="slotWrapperClass">
+    <!-- Connection Dot -->
+    <SlotConnectionDot
+      ref="connectionDotRef"
+      :color="slotColor"
+      class="-translate-x-1/2"
+      v-on="readonly ? {} : { pointerdown: onPointerDown }"
+    />
+
+    <!-- Slot Name -->
+    <span
+      v-if="!dotOnly"
+      class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200"
+    >
+      {{ slotData.localized_name || slotData.name || `Input ${index}` }}
+    </span>
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 56a0984fb6..9f46ff15f8 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -1,142 +1,3 @@
-<template>
-  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
-    {{ $t('Node Render Error') }}
-  </div>
-  <div
-    v-else
-    ref="nodeContainerRef"
-    :data-node-id="nodeData.id"
-    :class="
-      cn(
-        'bg-white dark-theme:bg-charcoal-800',
-        'lg-node absolute rounded-2xl',
-        'border border-solid border-sand-100 dark-theme:border-charcoal-600',
-        // hover (only when node should handle events)
-        shouldHandleNodePointerEvents &&
-          'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
-        'outline-transparent -outline-offset-2 outline-2',
-        borderClass,
-        outlineClass,
-        {
-          'animate-pulse': executing,
-          'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
-            bypassed,
-          'will-change-transform': isDragging
-        },
-        lodCssClass,
-        shouldHandleNodePointerEvents
-          ? 'pointer-events-auto'
-          : 'pointer-events-none'
-      )
-    "
-    :style="[
-      {
-        transform: `translate(${layoutPosition.x ?? position?.x ?? 0}px, ${(layoutPosition.y ?? position?.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
-        zIndex: zIndex
-      },
-      dragStyle
-    ]"
-    @pointerdown="handlePointerDown"
-    @pointermove="handlePointerMove"
-    @pointerup="handlePointerUp"
-    @wheel="handleWheel"
-  >
-    <div class="flex items-center">
-      <template v-if="isCollapsed">
-        <SlotConnectionDot multi class="absolute left-0 -translate-x-1/2" />
-        <SlotConnectionDot multi class="absolute right-0 translate-x-1/2" />
-      </template>
-      <!-- Header only updates on title/color changes -->
-      <NodeHeader
-        v-memo="[nodeData.title, lodLevel, isCollapsed]"
-        :node-data="nodeData"
-        :readonly="readonly"
-        :lod-level="lodLevel"
-        :collapsed="isCollapsed"
-        @collapse="handleCollapse"
-        @update:title="handleHeaderTitleUpdate"
-        @enter-subgraph="handleEnterSubgraph"
-      />
-    </div>
-
-    <div
-      v-if="
-        (isMinimalLOD || isCollapsed) && executing && progress !== undefined
-      "
-      :class="
-        cn(
-          'absolute inset-x-4 -bottom-[1px] translate-y-1/2 rounded-full',
-          progressClasses
-        )
-      "
-      :style="{ width: `${Math.min(progress * 100, 100)}%` }"
-    />
-
-    <template v-if="!isMinimalLOD && !isCollapsed">
-      <div class="mb-4 relative">
-        <div :class="separatorClasses" />
-        <!-- Progress bar for executing state -->
-        <div
-          v-if="executing && progress !== undefined"
-          :class="
-            cn(
-              'absolute inset-x-0 top-1/2 -translate-y-1/2',
-              !!(progress < 1) && 'rounded-r-full',
-              progressClasses
-            )
-          "
-          :style="{ width: `${Math.min(progress * 100, 100)}%` }"
-        />
-      </div>
-
-      <!-- Node Body - rendered based on LOD level and collapsed state -->
-      <div
-        class="flex flex-col gap-4 pb-4"
-        :data-testid="`node-body-${nodeData.id}`"
-      >
-        <!-- Slots only rendered at full detail -->
-        <NodeSlots
-          v-if="shouldRenderSlots"
-          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length, lodLevel]"
-          :node-data="nodeData"
-          :readonly="readonly"
-          :lod-level="lodLevel"
-        />
-
-        <!-- Widgets rendered at reduced+ detail -->
-        <NodeWidgets
-          v-if="shouldShowWidgets"
-          v-memo="[nodeData.widgets?.length, lodLevel]"
-          :node-data="nodeData"
-          :readonly="readonly"
-          :lod-level="lodLevel"
-        />
-
-        <!-- Custom content at reduced+ detail -->
-        <NodeContent
-          v-if="shouldShowContent"
-          :node-data="nodeData"
-          :readonly="readonly"
-          :lod-level="lodLevel"
-          :image-urls="nodeImageUrls"
-        />
-        <!-- Live preview image -->
-        <div
-          v-if="shouldShowPreviewImg"
-          v-memo="[latestPreviewUrl]"
-          class="px-4"
-        >
-          <img
-            :src="latestPreviewUrl"
-            alt="preview"
-            class="w-full max-h-64 object-contain"
-          />
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { computed, inject, onErrorCaptured, onMounted, provide, ref } from 'vue'
@@ -388,3 +249,142 @@ const nodeImageUrls = computed(() => {
 const nodeContainerRef = ref()
 provide('tooltipContainer', nodeContainerRef)
 </script>
+
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    {{ $t('Node Render Error') }}
+  </div>
+  <div
+    v-else
+    ref="nodeContainerRef"
+    :data-node-id="nodeData.id"
+    :class="
+      cn(
+        'bg-white dark-theme:bg-charcoal-800',
+        'lg-node absolute rounded-2xl',
+        'border border-solid border-sand-100 dark-theme:border-charcoal-600',
+        // hover (only when node should handle events)
+        shouldHandleNodePointerEvents &&
+          'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
+        'outline-transparent -outline-offset-2 outline-2',
+        borderClass,
+        outlineClass,
+        {
+          'animate-pulse': executing,
+          'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
+            bypassed,
+          'will-change-transform': isDragging
+        },
+        lodCssClass,
+        shouldHandleNodePointerEvents
+          ? 'pointer-events-auto'
+          : 'pointer-events-none'
+      )
+    "
+    :style="[
+      {
+        transform: `translate(${layoutPosition.x ?? position?.x ?? 0}px, ${(layoutPosition.y ?? position?.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
+        zIndex: zIndex
+      },
+      dragStyle
+    ]"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="handlePointerUp"
+    @wheel="handleWheel"
+  >
+    <div class="flex items-center">
+      <template v-if="isCollapsed">
+        <SlotConnectionDot multi class="absolute left-0 -translate-x-1/2" />
+        <SlotConnectionDot multi class="absolute right-0 translate-x-1/2" />
+      </template>
+      <!-- Header only updates on title/color changes -->
+      <NodeHeader
+        v-memo="[nodeData.title, lodLevel, isCollapsed]"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+        :collapsed="isCollapsed"
+        @collapse="handleCollapse"
+        @update:title="handleHeaderTitleUpdate"
+        @enter-subgraph="handleEnterSubgraph"
+      />
+    </div>
+
+    <div
+      v-if="
+        (isMinimalLOD || isCollapsed) && executing && progress !== undefined
+      "
+      :class="
+        cn(
+          'absolute inset-x-4 -bottom-[1px] translate-y-1/2 rounded-full',
+          progressClasses
+        )
+      "
+      :style="{ width: `${Math.min(progress * 100, 100)}%` }"
+    />
+
+    <template v-if="!isMinimalLOD && !isCollapsed">
+      <div class="mb-4 relative">
+        <div :class="separatorClasses" />
+        <!-- Progress bar for executing state -->
+        <div
+          v-if="executing && progress !== undefined"
+          :class="
+            cn(
+              'absolute inset-x-0 top-1/2 -translate-y-1/2',
+              !!(progress < 1) && 'rounded-r-full',
+              progressClasses
+            )
+          "
+          :style="{ width: `${Math.min(progress * 100, 100)}%` }"
+        />
+      </div>
+
+      <!-- Node Body - rendered based on LOD level and collapsed state -->
+      <div
+        class="flex flex-col gap-4 pb-4"
+        :data-testid="`node-body-${nodeData.id}`"
+      >
+        <!-- Slots only rendered at full detail -->
+        <NodeSlots
+          v-if="shouldRenderSlots"
+          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length, lodLevel]"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :lod-level="lodLevel"
+        />
+
+        <!-- Widgets rendered at reduced+ detail -->
+        <NodeWidgets
+          v-if="shouldShowWidgets"
+          v-memo="[nodeData.widgets?.length, lodLevel]"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :lod-level="lodLevel"
+        />
+
+        <!-- Custom content at reduced+ detail -->
+        <NodeContent
+          v-if="shouldShowContent"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :lod-level="lodLevel"
+          :image-urls="nodeImageUrls"
+        />
+        <!-- Live preview image -->
+        <div
+          v-if="shouldShowPreviewImg"
+          v-memo="[latestPreviewUrl]"
+          class="px-4"
+        >
+          <img
+            :src="latestPreviewUrl"
+            alt="preview"
+            class="w-full max-h-64 object-contain"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/components/NodeContent.vue b/src/renderer/extensions/vueNodes/components/NodeContent.vue
index 3df38bdf66..fc7aa11ba5 100644
--- a/src/renderer/extensions/vueNodes/components/NodeContent.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -1,20 +1,3 @@
-<template>
-  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
-    {{ $t('Node Content Error') }}
-  </div>
-  <div v-else class="lg-node-content">
-    <!-- Default slot for custom content -->
-    <slot>
-      <ImagePreview
-        v-if="hasImages"
-        :image-urls="props.imageUrls || []"
-        :node-id="nodeId"
-        class="mt-2"
-      />
-    </slot>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, onErrorCaptured, ref } from 'vue'
 
@@ -52,3 +35,20 @@ onErrorCaptured((error) => {
   return false
 })
 </script>
+
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    {{ $t('Node Content Error') }}
+  </div>
+  <div v-else class="lg-node-content">
+    <!-- Default slot for custom content -->
+    <slot>
+      <ImagePreview
+        v-if="hasImages"
+        :image-urls="props.imageUrls || []"
+        :node-id="nodeId"
+        class="mt-2"
+      />
+    </slot>
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 40b8a7fe0b..a6e95acb46 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -1,60 +1,3 @@
-<template>
-  <div v-if="renderError" class="node-error p-4 text-red-500 text-sm">
-    {{ $t('Node Header Error') }}
-  </div>
-  <div
-    v-else
-    class="lg-node-header flex items-center justify-between p-4 rounded-t-2xl cursor-move w-full"
-    :data-testid="`node-header-${nodeData?.id || ''}`"
-    @dblclick="handleDoubleClick"
-  >
-    <!-- Collapse/Expand Button -->
-    <button
-      v-show="!readonly"
-      class="bg-transparent border-transparent flex items-center"
-      data-testid="node-collapse-button"
-      @click.stop="handleCollapse"
-      @dblclick.stop
-    >
-      <i
-        :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
-        class="text-xs leading-none relative top-px text-stone-200 dark-theme:text-slate-300"
-      ></i>
-    </button>
-
-    <!-- Node Title -->
-    <div
-      v-tooltip.top="tooltipConfig"
-      class="text-sm font-bold truncate flex-1"
-      data-testid="node-title"
-    >
-      <EditableText
-        :model-value="displayTitle"
-        :is-editing="isEditing"
-        :input-attrs="{ 'data-testid': 'node-title-input' }"
-        @edit="handleTitleEdit"
-        @cancel="handleTitleCancel"
-      />
-    </div>
-
-    <!-- Title Buttons -->
-    <div v-if="!readonly" class="flex items-center">
-      <IconButton
-        v-if="isSubgraphNode"
-        size="sm"
-        type="transparent"
-        class="text-stone-200 dark-theme:text-slate-300"
-        data-testid="subgraph-enter-button"
-        title="Enter Subgraph"
-        @click.stop="handleEnterSubgraph"
-        @dblclick.stop
-      >
-        <i class="pi pi-external-link"></i>
-      </IconButton>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
 
@@ -176,3 +119,60 @@ const handleEnterSubgraph = () => {
   emit('enter-subgraph')
 }
 </script>
+
+<template>
+  <div v-if="renderError" class="node-error p-4 text-red-500 text-sm">
+    {{ $t('Node Header Error') }}
+  </div>
+  <div
+    v-else
+    class="lg-node-header flex items-center justify-between p-4 rounded-t-2xl cursor-move w-full"
+    :data-testid="`node-header-${nodeData?.id || ''}`"
+    @dblclick="handleDoubleClick"
+  >
+    <!-- Collapse/Expand Button -->
+    <button
+      v-show="!readonly"
+      class="bg-transparent border-transparent flex items-center"
+      data-testid="node-collapse-button"
+      @click.stop="handleCollapse"
+      @dblclick.stop
+    >
+      <i
+        :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
+        class="text-xs leading-none relative top-px text-stone-200 dark-theme:text-slate-300"
+      ></i>
+    </button>
+
+    <!-- Node Title -->
+    <div
+      v-tooltip.top="tooltipConfig"
+      class="text-sm font-bold truncate flex-1"
+      data-testid="node-title"
+    >
+      <EditableText
+        :model-value="displayTitle"
+        :is-editing="isEditing"
+        :input-attrs="{ 'data-testid': 'node-title-input' }"
+        @edit="handleTitleEdit"
+        @cancel="handleTitleCancel"
+      />
+    </div>
+
+    <!-- Title Buttons -->
+    <div v-if="!readonly" class="flex items-center">
+      <IconButton
+        v-if="isSubgraphNode"
+        size="sm"
+        type="transparent"
+        class="text-stone-200 dark-theme:text-slate-300"
+        data-testid="subgraph-enter-button"
+        title="Enter Subgraph"
+        @click.stop="handleEnterSubgraph"
+        @dblclick.stop
+      >
+        <i class="pi pi-external-link"></i>
+      </IconButton>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
index 26187899d1..bfa4613803 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -1,34 +1,3 @@
-<template>
-  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
-    {{ $t('Node Slots Error') }}
-  </div>
-  <div v-else class="lg-node-slots flex justify-between">
-    <div v-if="filteredInputs.length" class="flex flex-col gap-1">
-      <InputSlot
-        v-for="(input, index) in filteredInputs"
-        :key="`input-${index}`"
-        :slot-data="input"
-        :node-type="nodeData?.type || ''"
-        :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
-        :index="getActualInputIndex(input, index)"
-        :readonly="readonly"
-      />
-    </div>
-
-    <div v-if="filteredOutputs.length" class="flex flex-col gap-1 ml-auto">
-      <OutputSlot
-        v-for="(output, index) in filteredOutputs"
-        :key="`output-${index}`"
-        :slot-data="output"
-        :node-type="nodeData?.type || ''"
-        :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
-        :index="index"
-        :readonly="readonly"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, onErrorCaptured, ref } from 'vue'
 
@@ -108,3 +77,34 @@ onErrorCaptured((error) => {
   return false
 })
 </script>
+
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    {{ $t('Node Slots Error') }}
+  </div>
+  <div v-else class="lg-node-slots flex justify-between">
+    <div v-if="filteredInputs.length" class="flex flex-col gap-1">
+      <InputSlot
+        v-for="(input, index) in filteredInputs"
+        :key="`input-${index}`"
+        :slot-data="input"
+        :node-type="nodeData?.type || ''"
+        :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
+        :index="getActualInputIndex(input, index)"
+        :readonly="readonly"
+      />
+    </div>
+
+    <div v-if="filteredOutputs.length" class="flex flex-col gap-1 ml-auto">
+      <OutputSlot
+        v-for="(output, index) in filteredOutputs"
+        :key="`output-${index}`"
+        :slot-data="output"
+        :node-type="nodeData?.type || ''"
+        :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
+        :index="index"
+        :readonly="readonly"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 57461ce098..e00bad4af5 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -1,56 +1,3 @@
-<template>
-  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
-    {{ $t('Node Widgets Error') }}
-  </div>
-  <div
-    v-else
-    :class="
-      cn(
-        'lg-node-widgets flex flex-col gap-2 pr-4',
-        shouldHandleNodePointerEvents
-          ? 'pointer-events-auto'
-          : 'pointer-events-none'
-      )
-    "
-    @pointerdown="handleWidgetPointerEvent"
-    @pointermove="handleWidgetPointerEvent"
-    @pointerup="handleWidgetPointerEvent"
-  >
-    <div
-      v-for="(widget, index) in processedWidgets"
-      :key="`widget-${index}-${widget.name}`"
-      class="lg-widget-container relative flex items-center group"
-    >
-      <!-- Widget Input Slot Dot -->
-      <div
-        class="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
-      >
-        <InputSlot
-          :slot-data="{
-            name: widget.name,
-            type: widget.type,
-            boundingRect: [0, 0, 0, 0]
-          }"
-          :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
-          :index="getWidgetInputIndex(widget)"
-          :readonly="readonly"
-          :dot-only="true"
-        />
-      </div>
-      <!-- Widget Component -->
-      <component
-        :is="widget.vueComponent"
-        v-tooltip.left="widget.tooltipConfig"
-        :widget="widget.simplified"
-        :model-value="widget.value"
-        :readonly="readonly"
-        class="flex-1"
-        @update:model-value="widget.updateHandler"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { type Ref, computed, inject, onErrorCaptured, ref } from 'vue'
 
@@ -185,3 +132,56 @@ const getWidgetInputIndex = (widget: ProcessedWidget): number => {
   return idx >= 0 ? idx : 0
 }
 </script>
+
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    {{ $t('Node Widgets Error') }}
+  </div>
+  <div
+    v-else
+    :class="
+      cn(
+        'lg-node-widgets flex flex-col gap-2 pr-4',
+        shouldHandleNodePointerEvents
+          ? 'pointer-events-auto'
+          : 'pointer-events-none'
+      )
+    "
+    @pointerdown="handleWidgetPointerEvent"
+    @pointermove="handleWidgetPointerEvent"
+    @pointerup="handleWidgetPointerEvent"
+  >
+    <div
+      v-for="(widget, index) in processedWidgets"
+      :key="`widget-${index}-${widget.name}`"
+      class="lg-widget-container relative flex items-center group"
+    >
+      <!-- Widget Input Slot Dot -->
+      <div
+        class="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+      >
+        <InputSlot
+          :slot-data="{
+            name: widget.name,
+            type: widget.type,
+            boundingRect: [0, 0, 0, 0]
+          }"
+          :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
+          :index="getWidgetInputIndex(widget)"
+          :readonly="readonly"
+          :dot-only="true"
+        />
+      </div>
+      <!-- Widget Component -->
+      <component
+        :is="widget.vueComponent"
+        v-tooltip.left="widget.tooltipConfig"
+        :widget="widget.simplified"
+        :model-value="widget.value"
+        :readonly="readonly"
+        class="flex-1"
+        @update:model-value="widget.updateHandler"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 3618732a3e..1024a1d297 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -1,24 +1,3 @@
-<template>
-  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
-  <div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
-    <!-- Slot Name -->
-    <span
-      v-if="!dotOnly"
-      class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200"
-    >
-      {{ slotData.name || `Output ${index}` }}
-    </span>
-
-    <!-- Connection Dot -->
-    <SlotConnectionDot
-      ref="connectionDotRef"
-      :color="slotColor"
-      class="translate-x-1/2"
-      v-on="readonly ? {} : { pointerdown: onPointerDown }"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import {
   type ComponentPublicInstance,
@@ -121,3 +100,24 @@ const { onPointerDown } = useSlotLinkInteraction({
   readonly: props.readonly
 })
 </script>
+
+<template>
+  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
+  <div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
+    <!-- Slot Name -->
+    <span
+      v-if="!dotOnly"
+      class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200"
+    >
+      {{ slotData.name || `Output ${index}` }}
+    </span>
+
+    <!-- Connection Dot -->
+    <SlotConnectionDot
+      ref="connectionDotRef"
+      :color="slotColor"
+      class="translate-x-1/2"
+      v-on="readonly ? {} : { pointerdown: onPointerDown }"
+    />
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index ae8fb75674..85f3669cef 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
-      widget.name
-    }}</label>
-    <Button
-      v-bind="filteredProps"
-      :disabled="readonly"
-      size="small"
-      @click="handleClick"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
@@ -41,3 +27,17 @@ const handleClick = () => {
   }
 }
 </script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Button
+      v-bind="filteredProps"
+      :disabled="readonly"
+      size="small"
+      @click="handleClick"
+    />
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
index 1c40d35a7f..29ab6c4832 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -1,13 +1,3 @@
-<template>
-  <div class="flex flex-col gap-1">
-    <div
-      class="p-4 border border-gray-300 dark-theme:border-gray-600 rounded max-h-[48rem]"
-    >
-      <Chart :type="chartType" :data="chartData" :options="chartOptions" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import type { ChartData } from 'chart.js'
 import Chart from 'primevue/chart'
@@ -76,3 +66,13 @@ const chartOptions = computed(() => ({
   }
 }))
 </script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      class="p-4 border border-gray-300 dark-theme:border-gray-600 rounded max-h-[48rem]"
+    >
+      <Chart :type="chartType" :data="chartData" :options="chartOptions" />
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index a3fcb1725c..6409e1f38e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -1,28 +1,4 @@
 <!-- Needs custom color picker for alpha support -->
-<template>
-  <WidgetLayoutField :widget="widget">
-    <label
-      :class="
-        cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full px-4 py-2')
-      "
-    >
-      <ColorPicker
-        v-model="localValue"
-        v-bind="filteredProps"
-        :disabled="readonly"
-        class="w-8 h-4 !rounded-full overflow-hidden border-none"
-        :pt="{
-          preview: '!w-full !h-full !border-none'
-        }"
-        @update:model-value="onPickerUpdate"
-      />
-      <span class="text-xs" data-testid="widget-color-text">{{
-        toHexFromFormat(localValue, format)
-      }}</span>
-    </label>
-  </WidgetLayoutField>
-</template>
-
 <script setup lang="ts">
 import ColorPicker from 'primevue/colorpicker'
 import { computed, ref, watch } from 'vue'
@@ -89,3 +65,27 @@ const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, COLOR_PICKER_EXCLUDED_PROPS)
 )
 </script>
+
+<template>
+  <WidgetLayoutField :widget="widget">
+    <label
+      :class="
+        cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full px-4 py-2')
+      "
+    >
+      <ColorPicker
+        v-model="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        class="w-8 h-4 !rounded-full overflow-hidden border-none"
+        :pt="{
+          preview: '!w-full !h-full !border-none'
+        }"
+        @update:model-value="onPickerUpdate"
+      />
+      <span class="text-xs" data-testid="widget-color-text">{{
+        toHexFromFormat(localValue, format)
+      }}</span>
+    </label>
+  </WidgetLayoutField>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index c096abdf66..395600efc7 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -1,3 +1,152 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+const {
+  widget,
+  modelValue,
+  readonly = false
+} = defineProps<{
+  widget: SimplifiedWidget<File[] | null>
+  modelValue: File[] | null
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: File[] | null]
+}>()
+
+const { localValue, onChange } = useWidgetValue({
+  widget,
+  modelValue,
+  defaultValue: null,
+  emit
+})
+
+// Transform compatibility props for overlay positioning
+const transformCompatProps = useTransformCompatOverlayProps()
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+// Since we only support single file, get the first file
+const selectedFile = computed(() => {
+  const files = localValue.value || []
+  return files.length > 0 ? files[0] : null
+})
+
+// Quick file type detection for testing
+const detectFileType = (file: File) => {
+  const type = file.type?.toLowerCase() || ''
+  const name = file.name?.toLowerCase() || ''
+
+  if (
+    type.startsWith('image/') ||
+    name.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
+  ) {
+    return 'image'
+  }
+  if (type.startsWith('video/') || name.match(/\.(mp4|webm|ogg|mov)$/)) {
+    return 'video'
+  }
+  if (type.startsWith('audio/') || name.match(/\.(mp3|wav|ogg|flac)$/)) {
+    return 'audio'
+  }
+  if (type === 'application/pdf' || name.endsWith('.pdf')) {
+    return 'pdf'
+  }
+  if (type.includes('zip') || name.match(/\.(zip|rar|7z|tar|gz)$/)) {
+    return 'archive'
+  }
+  return 'file'
+}
+
+// Check if we have an image file
+const hasImageFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'image'
+})
+
+// Check if we have an audio file
+const hasAudioFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'audio'
+})
+
+// Get image URL for preview
+const imageUrl = computed(() => {
+  if (hasImageFile.value && selectedFile.value) {
+    return URL.createObjectURL(selectedFile.value)
+  }
+  return ''
+})
+
+// // Get audio URL for playback
+// const audioUrl = computed(() => {
+//   if (hasAudioFile.value && selectedFile.value) {
+//     return URL.createObjectURL(selectedFile.value)
+//   }
+//   return ''
+// })
+
+// Clean up image URL when file changes
+watch(imageUrl, (newUrl, oldUrl) => {
+  if (oldUrl && oldUrl !== newUrl) {
+    URL.revokeObjectURL(oldUrl)
+  }
+})
+
+const triggerFileInput = () => {
+  fileInputRef.value?.click()
+}
+
+const handleFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (!readonly && target.files && target.files.length > 0) {
+    // Since we only support single file, take the first one
+    const file = target.files[0]
+
+    // Use the composable's onChange handler with an array
+    onChange([file])
+
+    // Reset input to allow selecting same file again
+    target.value = ''
+  }
+}
+
+const clearFile = () => {
+  // Clear the file
+  onChange(null)
+
+  // Reset file input
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+const handleEdit = () => {
+  // TODO: hook up with maskeditor
+}
+
+// Clear file input when value is cleared externally
+watch(localValue, (newValue) => {
+  if (!newValue || newValue.length === 0) {
+    if (fileInputRef.value) {
+      fileInputRef.value.value = ''
+    }
+  }
+})
+
+// Clean up image URL on unmount
+onUnmounted(() => {
+  if (imageUrl.value) {
+    URL.revokeObjectURL(imageUrl.value)
+  }
+})
+</script>
+
 <template>
   <!-- Replace entire widget with image preview when image is loaded -->
   <!-- Edge-to-edge: -mx-2 removes the parent's p-2 (8px) padding on each side -->
@@ -177,152 +326,3 @@
     @change="handleFileChange"
   />
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Select from 'primevue/select'
-import { computed, onUnmounted, ref, watch } from 'vue'
-
-import { useWidgetValue } from '@/composables/graph/useWidgetValue'
-import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
-const {
-  widget,
-  modelValue,
-  readonly = false
-} = defineProps<{
-  widget: SimplifiedWidget<File[] | null>
-  modelValue: File[] | null
-  readonly?: boolean
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: File[] | null]
-}>()
-
-const { localValue, onChange } = useWidgetValue({
-  widget,
-  modelValue,
-  defaultValue: null,
-  emit
-})
-
-// Transform compatibility props for overlay positioning
-const transformCompatProps = useTransformCompatOverlayProps()
-
-const fileInputRef = ref<HTMLInputElement | null>(null)
-
-// Since we only support single file, get the first file
-const selectedFile = computed(() => {
-  const files = localValue.value || []
-  return files.length > 0 ? files[0] : null
-})
-
-// Quick file type detection for testing
-const detectFileType = (file: File) => {
-  const type = file.type?.toLowerCase() || ''
-  const name = file.name?.toLowerCase() || ''
-
-  if (
-    type.startsWith('image/') ||
-    name.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
-  ) {
-    return 'image'
-  }
-  if (type.startsWith('video/') || name.match(/\.(mp4|webm|ogg|mov)$/)) {
-    return 'video'
-  }
-  if (type.startsWith('audio/') || name.match(/\.(mp3|wav|ogg|flac)$/)) {
-    return 'audio'
-  }
-  if (type === 'application/pdf' || name.endsWith('.pdf')) {
-    return 'pdf'
-  }
-  if (type.includes('zip') || name.match(/\.(zip|rar|7z|tar|gz)$/)) {
-    return 'archive'
-  }
-  return 'file'
-}
-
-// Check if we have an image file
-const hasImageFile = computed(() => {
-  return selectedFile.value && detectFileType(selectedFile.value) === 'image'
-})
-
-// Check if we have an audio file
-const hasAudioFile = computed(() => {
-  return selectedFile.value && detectFileType(selectedFile.value) === 'audio'
-})
-
-// Get image URL for preview
-const imageUrl = computed(() => {
-  if (hasImageFile.value && selectedFile.value) {
-    return URL.createObjectURL(selectedFile.value)
-  }
-  return ''
-})
-
-// // Get audio URL for playback
-// const audioUrl = computed(() => {
-//   if (hasAudioFile.value && selectedFile.value) {
-//     return URL.createObjectURL(selectedFile.value)
-//   }
-//   return ''
-// })
-
-// Clean up image URL when file changes
-watch(imageUrl, (newUrl, oldUrl) => {
-  if (oldUrl && oldUrl !== newUrl) {
-    URL.revokeObjectURL(oldUrl)
-  }
-})
-
-const triggerFileInput = () => {
-  fileInputRef.value?.click()
-}
-
-const handleFileChange = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  if (!readonly && target.files && target.files.length > 0) {
-    // Since we only support single file, take the first one
-    const file = target.files[0]
-
-    // Use the composable's onChange handler with an array
-    onChange([file])
-
-    // Reset input to allow selecting same file again
-    target.value = ''
-  }
-}
-
-const clearFile = () => {
-  // Clear the file
-  onChange(null)
-
-  // Reset file input
-  if (fileInputRef.value) {
-    fileInputRef.value.value = ''
-  }
-}
-
-const handleEdit = () => {
-  // TODO: hook up with maskeditor
-}
-
-// Clear file input when value is cleared externally
-watch(localValue, (newValue) => {
-  if (!newValue || newValue.length === 0) {
-    if (fileInputRef.value) {
-      fileInputRef.value.value = ''
-    }
-  }
-})
-
-// Clean up image URL on unmount
-onUnmounted(() => {
-  if (imageUrl.value) {
-    URL.revokeObjectURL(imageUrl.value)
-  }
-})
-</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
index 28be931175..3d2fca9ebe 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
@@ -1,53 +1,3 @@
-<template>
-  <div class="flex flex-col gap-1">
-    <Galleria
-      v-model:active-index="activeIndex"
-      :value="galleryImages"
-      v-bind="filteredProps"
-      :show-thumbnails="showThumbnails"
-      :show-item-navigators="showNavButtons"
-      class="max-w-full"
-      :pt="{
-        thumbnails: {
-          class: 'overflow-hidden'
-        },
-        thumbnailContent: {
-          class: 'py-4 px-2'
-        },
-        thumbnailPrevButton: {
-          class: 'm-0'
-        },
-        thumbnailNextButton: {
-          class: 'm-0'
-        }
-      }"
-    >
-      <template #item="{ item }">
-        <img
-          :src="item?.itemImageSrc || item?.src || ''"
-          :alt="
-            item?.alt ||
-            `${t('g.galleryImage')} ${activeIndex + 1} of ${galleryImages.length}`
-          "
-          class="w-full h-auto max-h-64 object-contain"
-        />
-      </template>
-      <template #thumbnail="{ item }">
-        <div class="p-1 w-full h-full">
-          <img
-            :src="item?.thumbnailImageSrc || item?.src || ''"
-            :alt="
-              item?.alt ||
-              `${t('g.galleryThumbnail')} ${galleryImages.findIndex((img) => img === item) + 1} of ${galleryImages.length}`
-            "
-            class="w-full h-full object-cover rounded-lg"
-          />
-        </div>
-      </template>
-    </Galleria>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Galleria from 'primevue/galleria'
 import { computed, ref } from 'vue'
@@ -115,6 +65,56 @@ const showNavButtons = computed(() => {
 })
 </script>
 
+<template>
+  <div class="flex flex-col gap-1">
+    <Galleria
+      v-model:active-index="activeIndex"
+      :value="galleryImages"
+      v-bind="filteredProps"
+      :show-thumbnails="showThumbnails"
+      :show-item-navigators="showNavButtons"
+      class="max-w-full"
+      :pt="{
+        thumbnails: {
+          class: 'overflow-hidden'
+        },
+        thumbnailContent: {
+          class: 'py-4 px-2'
+        },
+        thumbnailPrevButton: {
+          class: 'm-0'
+        },
+        thumbnailNextButton: {
+          class: 'm-0'
+        }
+      }"
+    >
+      <template #item="{ item }">
+        <img
+          :src="item?.itemImageSrc || item?.src || ''"
+          :alt="
+            item?.alt ||
+            `${t('g.galleryImage')} ${activeIndex + 1} of ${galleryImages.length}`
+          "
+          class="w-full h-auto max-h-64 object-contain"
+        />
+      </template>
+      <template #thumbnail="{ item }">
+        <div class="p-1 w-full h-full">
+          <img
+            :src="item?.thumbnailImageSrc || item?.src || ''"
+            :alt="
+              item?.alt ||
+              `${t('g.galleryThumbnail')} ${galleryImages.findIndex((img) => img === item) + 1} of ${galleryImages.length}`
+            "
+            class="w-full h-full object-cover rounded-lg"
+          />
+        </div>
+      </template>
+    </Galleria>
+  </div>
+</template>
+
 <style scoped>
 /* Ensure thumbnail container doesn't overflow */
 :deep(.p-galleria-thumbnails) {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
index 1cf455c780..29fcfd96d1 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
@@ -1,29 +1,3 @@
-<template>
-  <ImageCompare
-    :tabindex="widget.options?.tabindex ?? 0"
-    :aria-label="widget.options?.ariaLabel"
-    :aria-labelledby="widget.options?.ariaLabelledby"
-    :pt="widget.options?.pt"
-    :pt-options="widget.options?.ptOptions"
-    :unstyled="widget.options?.unstyled"
-  >
-    <template #left>
-      <img
-        :src="beforeImage"
-        :alt="beforeAlt"
-        class="w-full h-full object-cover"
-      />
-    </template>
-    <template #right>
-      <img
-        :src="afterImage"
-        :alt="afterAlt"
-        class="w-full h-full object-cover"
-      />
-    </template>
-  </ImageCompare>
-</template>
-
 <script setup lang="ts">
 import ImageCompare from 'primevue/imagecompare'
 import { computed } from 'vue'
@@ -68,3 +42,29 @@ const afterAlt = computed(() => {
     : 'After image'
 })
 </script>
+
+<template>
+  <ImageCompare
+    :tabindex="widget.options?.tabindex ?? 0"
+    :aria-label="widget.options?.ariaLabel"
+    :aria-labelledby="widget.options?.ariaLabelledby"
+    :pt="widget.options?.pt"
+    :pt-options="widget.options?.ptOptions"
+    :unstyled="widget.options?.unstyled"
+  >
+    <template #left>
+      <img
+        :src="beforeImage"
+        :alt="beforeAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+    <template #right>
+      <img
+        :src="afterImage"
+        :alt="afterAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+  </ImageCompare>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
index 97cfd36061..f031e4fda7 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
@@ -1,35 +1,3 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <div
-      :class="
-        cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full pl-4 pr-2')
-      "
-    >
-      <Slider
-        :model-value="[localValue]"
-        v-bind="filteredProps"
-        :disabled="readonly"
-        class="flex-grow text-xs"
-        :step="stepValue"
-        @update:model-value="updateLocalValue"
-      />
-      <InputNumber
-        :key="timesEmptied"
-        :model-value="localValue"
-        v-bind="filteredProps"
-        :disabled="readonly"
-        :step="stepValue"
-        :min-fraction-digits="precision"
-        :max-fraction-digits="precision"
-        size="small"
-        pt:pc-input-text:root="min-w-full bg-transparent border-none text-center"
-        class="w-16"
-        @update:model-value="handleNumberInputUpdate"
-      />
-    </div>
-  </WidgetLayoutField>
-</template>
-
 <script setup lang="ts">
 import InputNumber from 'primevue/inputnumber'
 import { computed, ref } from 'vue'
@@ -105,3 +73,35 @@ const stepValue = computed(() => {
   return 1 / Math.pow(10, precision.value)
 })
 </script>
+
+<template>
+  <WidgetLayoutField :widget="widget">
+    <div
+      :class="
+        cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full pl-4 pr-2')
+      "
+    >
+      <Slider
+        :model-value="[localValue]"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        class="flex-grow text-xs"
+        :step="stepValue"
+        @update:model-value="updateLocalValue"
+      />
+      <InputNumber
+        :key="timesEmptied"
+        :model-value="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        :step="stepValue"
+        :min-fraction-digits="precision"
+        :max-fraction-digits="precision"
+        size="small"
+        pt:pc-input-text:root="min-w-full bg-transparent border-none text-center"
+        class="w-16"
+        @update:model-value="handleNumberInputUpdate"
+      />
+    </div>
+  </WidgetLayoutField>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
index a515ec7cdc..9abe508332 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
@@ -1,16 +1,3 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <InputText
-      v-model="localValue"
-      v-bind="filteredProps"
-      :disabled="readonly"
-      :class="cn(WidgetInputBaseClass, 'w-full text-xs py-2 px-4')"
-      size="small"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
-</template>
-
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
@@ -47,3 +34,16 @@ const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
 )
 </script>
+
+<template>
+  <WidgetLayoutField :widget="widget">
+    <InputText
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      :class="cn(WidgetInputBaseClass, 'w-full text-xs py-2 px-4')"
+      size="small"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
index 35950aa5cb..f0c525e12e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -1,36 +1,3 @@
-<template>
-  <div
-    class="widget-markdown relative w-full cursor-text"
-    @click="startEditing"
-  >
-    <!-- Display mode: Rendered markdown -->
-    <div
-      v-if="!isEditing"
-      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto"
-      v-html="renderedHtml"
-    />
-
-    <!-- Edit mode: Textarea -->
-    <Textarea
-      v-else
-      ref="textareaRef"
-      v-model="localValue"
-      :disabled="readonly"
-      class="w-full text-xs"
-      size="small"
-      :rows="6"
-      :pt="{
-        root: {
-          onBlur: handleBlur
-        }
-      }"
-      @update:model-value="onChange"
-      @click.stop
-      @keydown.stop
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import Textarea from 'primevue/textarea'
 import { computed, nextTick, ref } from 'vue'
@@ -82,6 +49,39 @@ const handleBlur = () => {
 }
 </script>
 
+<template>
+  <div
+    class="widget-markdown relative w-full cursor-text"
+    @click="startEditing"
+  >
+    <!-- Display mode: Rendered markdown -->
+    <div
+      v-if="!isEditing"
+      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto"
+      v-html="renderedHtml"
+    />
+
+    <!-- Edit mode: Textarea -->
+    <Textarea
+      v-else
+      ref="textareaRef"
+      v-model="localValue"
+      :disabled="readonly"
+      class="w-full text-xs"
+      size="small"
+      :rows="6"
+      :pt="{
+        root: {
+          onBlur: handleBlur
+        }
+      }"
+      @update:model-value="onChange"
+      @click.stop
+      @keydown.stop
+    />
+  </div>
+</template>
+
 <style scoped>
 .widget-markdown {
   background-color: var(--p-muted-color);
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
index fc1bc87c8b..b53b8b158a 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
@@ -1,21 +1,3 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <MultiSelect
-      v-model="localValue"
-      :options="multiSelectOptions"
-      v-bind="combinedProps"
-      :disabled="readonly"
-      class="w-full text-xs"
-      size="small"
-      display="chip"
-      :pt="{
-        option: 'text-xs'
-      }"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
-</template>
-
 <script setup lang="ts" generic="T extends WidgetValue = WidgetValue">
 import MultiSelect from 'primevue/multiselect'
 import { computed } from 'vue'
@@ -73,3 +55,21 @@ const multiSelectOptions = computed((): T[] => {
   return []
 })
 </script>
+
+<template>
+  <WidgetLayoutField :widget="widget">
+    <MultiSelect
+      v-model="localValue"
+      :options="multiSelectOptions"
+      v-bind="combinedProps"
+      :disabled="readonly"
+      class="w-full text-xs"
+      size="small"
+      display="chip"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
index 01cb75c180..10c95161c6 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
@@ -1,20 +1,3 @@
-<template>
-  <WidgetLayoutField :widget>
-    <Select
-      v-model="localValue"
-      :options="selectOptions"
-      v-bind="combinedProps"
-      :disabled="readonly"
-      class="w-full text-xs bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] !rounded-lg"
-      size="small"
-      :pt="{
-        option: 'text-xs'
-      }"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
-</template>
-
 <script setup lang="ts">
 import Select from 'primevue/select'
 import { computed } from 'vue'
@@ -66,3 +49,20 @@ const selectOptions = computed(() => {
   return []
 })
 </script>
+
+<template>
+  <WidgetLayoutField :widget>
+    <Select
+      v-model="localValue"
+      :options="selectOptions"
+      v-bind="combinedProps"
+      :disabled="readonly"
+      class="w-full text-xs bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] !rounded-lg"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
index c63edcf60d..c5f03079c1 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
@@ -1,15 +1,3 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <FormSelectButton
-      v-model="localValue"
-      :options="widget.options?.values || []"
-      :disabled="readonly"
-      class="w-full"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
-</template>
-
 <script setup lang="ts">
 import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -34,3 +22,15 @@ const { localValue, onChange } = useStringWidgetValue(
   emit
 )
 </script>
+
+<template>
+  <WidgetLayoutField :widget="widget">
+    <FormSelectButton
+      v-model="localValue"
+      :options="widget.options?.values || []"
+      :disabled="readonly"
+      class="w-full"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
index 157da563ed..cb11e6f396 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -1,16 +1,3 @@
-<template>
-  <Textarea
-    v-model="localValue"
-    v-bind="filteredProps"
-    :disabled="readonly"
-    :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
-    :placeholder="placeholder || widget.name || ''"
-    size="small"
-    rows="3"
-    @update:model-value="onChange"
-  />
-</template>
-
 <script setup lang="ts">
 import Textarea from 'primevue/textarea'
 import { computed } from 'vue'
@@ -47,3 +34,16 @@ const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
 )
 </script>
+
+<template>
+  <Textarea
+    v-model="localValue"
+    v-bind="filteredProps"
+    :disabled="readonly"
+    :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
+    :placeholder="placeholder || widget.name || ''"
+    size="small"
+    rows="3"
+    @update:model-value="onChange"
+  />
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
index 61b29cba73..98da1d75a3 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -1,14 +1,3 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <ToggleSwitch
-      v-model="localValue"
-      v-bind="filteredProps"
-      :disabled="readonly"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
-</template>
-
 <script setup lang="ts">
 import ToggleSwitch from 'primevue/toggleswitch'
 import { computed } from 'vue'
@@ -44,6 +33,17 @@ const filteredProps = computed(() =>
 )
 </script>
 
+<template>
+  <WidgetLayoutField :widget="widget">
+    <ToggleSwitch
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
+
 <style scoped>
 :deep(.p-toggleswitch .p-toggleswitch-slider) {
   border: 1px solid transparent;
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
index 39c5b3d92f..50f8908353 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
@@ -1,16 +1,3 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <TreeSelect
-      v-model="localValue"
-      v-bind="combinedProps"
-      :disabled="readonly"
-      class="w-full text-xs"
-      size="small"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
-</template>
-
 <script setup lang="ts">
 import TreeSelect from 'primevue/treeselect'
 import { computed } from 'vue'
@@ -67,3 +54,16 @@ const combinedProps = computed(() => ({
   ...transformCompatProps.value
 }))
 </script>
+
+<template>
+  <WidgetLayoutField :widget="widget">
+    <TreeSelect
+      v-model="localValue"
+      v-bind="combinedProps"
+      :disabled="readonly"
+      class="w-full text-xs"
+      size="small"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
index 905cc16fd3..c0cd8c3b63 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -1,40 +1,3 @@
-<template>
-  <div
-    :class="
-      cn(
-        WidgetInputBaseClass,
-        'p-1 inline-flex justify-center items-center gap-1'
-      )
-    "
-  >
-    <button
-      v-for="(option, index) in options"
-      :key="getOptionValue(option, index)"
-      :class="
-        cn(
-          'flex-1 h-6 px-5 py-[5px] rounded flex justify-center items-center gap-1 transition-all duration-150 ease-in-out',
-          'bg-transparent border-none',
-          'text-center text-xs font-normal',
-          {
-            'bg-white': isSelected(option) && !disabled,
-            'hover:bg-zinc-200/50': !isSelected(option) && !disabled,
-            'opacity-50 cursor-not-allowed': disabled,
-            'cursor-pointer': !disabled
-          },
-          {
-            'text-neutral-900': isSelected(option) && !disabled,
-            'text-zinc-500': !isSelected(option) || disabled
-          }
-        )
-      "
-      :disabled="disabled"
-      @click="handleSelect(option)"
-    >
-      {{ getOptionLabel(option) }}
-    </button>
-  </div>
-</template>
-
 <script
   setup
   lang="ts"
@@ -106,3 +69,40 @@ const handleSelect = (option: T) => {
   emit('update:modelValue', optionValue)
 }
 </script>
+
+<template>
+  <div
+    :class="
+      cn(
+        WidgetInputBaseClass,
+        'p-1 inline-flex justify-center items-center gap-1'
+      )
+    "
+  >
+    <button
+      v-for="(option, index) in options"
+      :key="getOptionValue(option, index)"
+      :class="
+        cn(
+          'flex-1 h-6 px-5 py-[5px] rounded flex justify-center items-center gap-1 transition-all duration-150 ease-in-out',
+          'bg-transparent border-none',
+          'text-center text-xs font-normal',
+          {
+            'bg-white': isSelected(option) && !disabled,
+            'hover:bg-zinc-200/50': !isSelected(option) && !disabled,
+            'opacity-50 cursor-not-allowed': disabled,
+            'cursor-pointer': !disabled
+          },
+          {
+            'text-neutral-900': isSelected(option) && !disabled,
+            'text-zinc-500': !isSelected(option) || disabled
+          }
+        )
+      "
+      :disabled="disabled"
+      @click="handleSelect(option)"
+    >
+      {{ getOptionLabel(option) }}
+    </button>
+  </div>
+</template>
diff --git a/src/views/DesktopDialogView.vue b/src/views/DesktopDialogView.vue
index b250d1559f..67d43398ff 100644
--- a/src/views/DesktopDialogView.vue
+++ b/src/views/DesktopDialogView.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useRoute } from 'vue-router'
+
+import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
+import { t } from '@/i18n'
+import { electronAPI } from '@/utils/envUtil'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
+const route = useRoute()
+const { id, title, message, buttons } = getDialog(route.params.dialogId)
+
+const handleButtonClick = async (button: DialogAction) => {
+  await electronAPI().Dialog.clickButton(button.returnValue)
+}
+</script>
+
 <template>
   <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
     <h1 class="font-inter font-semibold text-xl m-0 italic">
@@ -24,23 +41,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useRoute } from 'vue-router'
-
-import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
-import { t } from '@/i18n'
-import { electronAPI } from '@/utils/envUtil'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-
-const route = useRoute()
-const { id, title, message, buttons } = getDialog(route.params.dialogId)
-
-const handleButtonClick = async (button: DialogAction) => {
-  await electronAPI().Dialog.clickButton(button.returnValue)
-}
-</script>
-
 <style scoped>
 @reference '../assets/css/style.css';
 
diff --git a/src/views/DesktopStartView.vue b/src/views/DesktopStartView.vue
index 9c66cad56d..2ad5bb7f21 100644
--- a/src/views/DesktopStartView.vue
+++ b/src/views/DesktopStartView.vue
@@ -1,11 +1,11 @@
-<template>
-  <BaseViewTemplate dark>
-    <ProgressSpinner class="m-8 w-48 h-48" />
-  </BaseViewTemplate>
-</template>
-
 <script setup lang="ts">
 import ProgressSpinner from 'primevue/progressspinner'
 
 import BaseViewTemplate from './templates/BaseViewTemplate.vue'
 </script>
+
+<template>
+  <BaseViewTemplate dark>
+    <ProgressSpinner class="m-8 w-48 h-48" />
+  </BaseViewTemplate>
+</template>
diff --git a/src/views/DesktopUpdateView.vue b/src/views/DesktopUpdateView.vue
index efaa6d1f44..5c84fa2e43 100644
--- a/src/views/DesktopUpdateView.vue
+++ b/src/views/DesktopUpdateView.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
+import Toast from 'primevue/toast'
+import { onUnmounted, ref } from 'vue'
+
+import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
+import { t } from '@/i18n'
+import { electronAPI } from '@/utils/envUtil'
+
+import BaseViewTemplate from './templates/BaseViewTemplate.vue'
+
+const electron = electronAPI()
+
+const terminalVisible = ref(false)
+
+const toggleConsoleDrawer = () => {
+  terminalVisible.value = !terminalVisible.value
+}
+
+onUnmounted(() => electron.Validation.dispose())
+</script>
+
 <template>
   <BaseViewTemplate dark>
     <div
@@ -37,29 +60,6 @@
   </BaseViewTemplate>
 </template>
 
-<script setup lang="ts">
-import Button from 'primevue/button'
-import ProgressSpinner from 'primevue/progressspinner'
-import Toast from 'primevue/toast'
-import { onUnmounted, ref } from 'vue'
-
-import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
-import { t } from '@/i18n'
-import { electronAPI } from '@/utils/envUtil'
-
-import BaseViewTemplate from './templates/BaseViewTemplate.vue'
-
-const electron = electronAPI()
-
-const terminalVisible = ref(false)
-
-const toggleConsoleDrawer = () => {
-  terminalVisible.value = !terminalVisible.value
-}
-
-onUnmounted(() => electron.Validation.dispose())
-</script>
-
 <style scoped>
 @reference '../assets/css/style.css';
 
diff --git a/src/views/DownloadGitView.vue b/src/views/DownloadGitView.vue
index 12c116ad83..938e34da2e 100644
--- a/src/views/DownloadGitView.vue
+++ b/src/views/DownloadGitView.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useRouter } from 'vue-router'
+
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const openGitDownloads = () => {
+  window.open('https://git-scm.com/downloads/', '_blank')
+}
+
+const skipGit = async () => {
+  console.warn('pushing')
+  const router = useRouter()
+  await router.push('install')
+}
+</script>
+
 <template>
   <BaseViewTemplate>
     <div
@@ -40,20 +57,3 @@
     </div>
   </BaseViewTemplate>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useRouter } from 'vue-router'
-
-import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
-
-const openGitDownloads = () => {
-  window.open('https://git-scm.com/downloads/', '_blank')
-}
-
-const skipGit = async () => {
-  console.warn('pushing')
-  const router = useRouter()
-  await router.push('install')
-}
-</script>
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index bbfca6ea0f..7e6d60635d 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="comfyui-body grid h-full w-full overflow-hidden">
-    <div id="comfyui-body-top" class="comfyui-body-top">
-      <TopMenubar v-if="showTopMenu" />
-    </div>
-    <div id="comfyui-body-bottom" class="comfyui-body-bottom">
-      <TopMenubar v-if="showBottomMenu" />
-    </div>
-    <div id="comfyui-body-left" class="comfyui-body-left" />
-    <div id="comfyui-body-right" class="comfyui-body-right" />
-    <div id="graph-canvas-container" class="graph-canvas-container">
-      <GraphCanvas @ready="onGraphReady" />
-    </div>
-  </div>
-
-  <GlobalToast />
-  <RerouteMigrationToast />
-  <UnloadWindowConfirmDialog v-if="!isElectron()" />
-  <MenuHamburger />
-</template>
-
 <script setup lang="ts">
 import { useBreakpoints, useEventListener } from '@vueuse/core'
 import type { ToastMessageOptions } from 'primevue/toast'
@@ -281,6 +260,27 @@ const onGraphReady = () => {
 }
 </script>
 
+<template>
+  <div class="comfyui-body grid h-full w-full overflow-hidden">
+    <div id="comfyui-body-top" class="comfyui-body-top">
+      <TopMenubar v-if="showTopMenu" />
+    </div>
+    <div id="comfyui-body-bottom" class="comfyui-body-bottom">
+      <TopMenubar v-if="showBottomMenu" />
+    </div>
+    <div id="comfyui-body-left" class="comfyui-body-left" />
+    <div id="comfyui-body-right" class="comfyui-body-right" />
+    <div id="graph-canvas-container" class="graph-canvas-container">
+      <GraphCanvas @ready="onGraphReady" />
+    </div>
+  </div>
+
+  <GlobalToast />
+  <RerouteMigrationToast />
+  <UnloadWindowConfirmDialog v-if="!isElectron()" />
+  <MenuHamburger />
+</template>
+
 <style scoped>
 .comfyui-body {
   grid-template-columns: auto 1fr auto;
diff --git a/src/views/InstallView.vue b/src/views/InstallView.vue
index ed3da0a8ac..3bf55bbbec 100644
--- a/src/views/InstallView.vue
+++ b/src/views/InstallView.vue
@@ -1,3 +1,95 @@
+<script setup lang="ts">
+import type {
+  InstallOptions,
+  TorchDeviceType
+} from '@comfyorg/comfyui-electron-types'
+import Button from 'primevue/button'
+import Step from 'primevue/step'
+import StepList from 'primevue/steplist'
+import StepPanel from 'primevue/steppanel'
+import StepPanels from 'primevue/steppanels'
+import Stepper from 'primevue/stepper'
+import { computed, onMounted, ref, toRaw } from 'vue'
+import { useRouter } from 'vue-router'
+
+import DesktopSettingsConfiguration from '@/components/install/DesktopSettingsConfiguration.vue'
+import GpuPicker from '@/components/install/GpuPicker.vue'
+import InstallLocationPicker from '@/components/install/InstallLocationPicker.vue'
+import MigrationPicker from '@/components/install/MigrationPicker.vue'
+import MirrorsConfiguration from '@/components/install/MirrorsConfiguration.vue'
+import { electronAPI } from '@/utils/envUtil'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const device = ref<TorchDeviceType | null>(null)
+
+const installPath = ref('')
+const pathError = ref('')
+
+const migrationSourcePath = ref('')
+const migrationItemIds = ref<string[]>([])
+
+const autoUpdate = ref(true)
+const allowMetrics = ref(true)
+const pythonMirror = ref('')
+const pypiMirror = ref('')
+const torchMirror = ref('')
+
+/** Forces each install step to be visited at least once. */
+const highestStep = ref(0)
+
+const handleStepChange = (value: string | number) => {
+  setHighestStep(value)
+
+  electronAPI().Events.trackEvent('install_stepper_change', {
+    step: value
+  })
+}
+
+const setHighestStep = (value: string | number) => {
+  const int = typeof value === 'number' ? value : parseInt(value, 10)
+  if (!isNaN(int) && int > highestStep.value) highestStep.value = int
+}
+
+const hasError = computed(() => pathError.value !== '')
+const noGpu = computed(() => typeof device.value !== 'string')
+
+const electron = electronAPI()
+const router = useRouter()
+const install = async () => {
+  const options: InstallOptions = {
+    installPath: installPath.value,
+    autoUpdate: autoUpdate.value,
+    allowMetrics: allowMetrics.value,
+    migrationSourcePath: migrationSourcePath.value,
+    migrationItemIds: toRaw(migrationItemIds.value),
+    pythonMirror: pythonMirror.value,
+    pypiMirror: pypiMirror.value,
+    torchMirror: torchMirror.value,
+    // @ts-expect-error fixme ts strict error
+    device: device.value
+  }
+  electron.installComfyUI(options)
+
+  const nextPage =
+    options.device === 'unsupported' ? '/manual-configuration' : '/server-start'
+  await router.push(nextPage)
+}
+
+onMounted(async () => {
+  if (!electron) return
+
+  const detectedGpu = await electron.Config.getDetectedGpu()
+  if (detectedGpu === 'mps' || detectedGpu === 'nvidia') {
+    device.value = detectedGpu
+  }
+
+  electronAPI().Events.trackEvent('install_stepper_change', {
+    step: '0',
+    gpu: detectedGpu
+  })
+})
+</script>
+
 <template>
   <BaseViewTemplate dark>
     <!-- h-full to make sure the stepper does not layout shift between steps
@@ -109,98 +201,6 @@
   </BaseViewTemplate>
 </template>
 
-<script setup lang="ts">
-import type {
-  InstallOptions,
-  TorchDeviceType
-} from '@comfyorg/comfyui-electron-types'
-import Button from 'primevue/button'
-import Step from 'primevue/step'
-import StepList from 'primevue/steplist'
-import StepPanel from 'primevue/steppanel'
-import StepPanels from 'primevue/steppanels'
-import Stepper from 'primevue/stepper'
-import { computed, onMounted, ref, toRaw } from 'vue'
-import { useRouter } from 'vue-router'
-
-import DesktopSettingsConfiguration from '@/components/install/DesktopSettingsConfiguration.vue'
-import GpuPicker from '@/components/install/GpuPicker.vue'
-import InstallLocationPicker from '@/components/install/InstallLocationPicker.vue'
-import MigrationPicker from '@/components/install/MigrationPicker.vue'
-import MirrorsConfiguration from '@/components/install/MirrorsConfiguration.vue'
-import { electronAPI } from '@/utils/envUtil'
-import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
-
-const device = ref<TorchDeviceType | null>(null)
-
-const installPath = ref('')
-const pathError = ref('')
-
-const migrationSourcePath = ref('')
-const migrationItemIds = ref<string[]>([])
-
-const autoUpdate = ref(true)
-const allowMetrics = ref(true)
-const pythonMirror = ref('')
-const pypiMirror = ref('')
-const torchMirror = ref('')
-
-/** Forces each install step to be visited at least once. */
-const highestStep = ref(0)
-
-const handleStepChange = (value: string | number) => {
-  setHighestStep(value)
-
-  electronAPI().Events.trackEvent('install_stepper_change', {
-    step: value
-  })
-}
-
-const setHighestStep = (value: string | number) => {
-  const int = typeof value === 'number' ? value : parseInt(value, 10)
-  if (!isNaN(int) && int > highestStep.value) highestStep.value = int
-}
-
-const hasError = computed(() => pathError.value !== '')
-const noGpu = computed(() => typeof device.value !== 'string')
-
-const electron = electronAPI()
-const router = useRouter()
-const install = async () => {
-  const options: InstallOptions = {
-    installPath: installPath.value,
-    autoUpdate: autoUpdate.value,
-    allowMetrics: allowMetrics.value,
-    migrationSourcePath: migrationSourcePath.value,
-    migrationItemIds: toRaw(migrationItemIds.value),
-    pythonMirror: pythonMirror.value,
-    pypiMirror: pypiMirror.value,
-    torchMirror: torchMirror.value,
-    // @ts-expect-error fixme ts strict error
-    device: device.value
-  }
-  electron.installComfyUI(options)
-
-  const nextPage =
-    options.device === 'unsupported' ? '/manual-configuration' : '/server-start'
-  await router.push(nextPage)
-}
-
-onMounted(async () => {
-  if (!electron) return
-
-  const detectedGpu = await electron.Config.getDetectedGpu()
-  if (detectedGpu === 'mps' || detectedGpu === 'nvidia') {
-    device.value = detectedGpu
-  }
-
-  electronAPI().Events.trackEvent('install_stepper_change', {
-    step: '0',
-    gpu: detectedGpu
-  })
-})
-</script>
-
 <style scoped>
 @reference '../assets/css/style.css';
 
diff --git a/src/views/MaintenanceView.vue b/src/views/MaintenanceView.vue
index facc08dfb5..99f67ced75 100644
--- a/src/views/MaintenanceView.vue
+++ b/src/views/MaintenanceView.vue
@@ -1,90 +1,3 @@
-<template>
-  <BaseViewTemplate dark>
-    <div
-      class="min-w-full min-h-full font-sans w-screen h-screen grid justify-around text-neutral-300 bg-neutral-900 dark-theme overflow-y-auto"
-    >
-      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
-        <!-- Header -->
-        <h1 class="backspan pi-wrench text-4xl font-bold">
-          {{ t('maintenance.title') }}
-        </h1>
-
-        <!-- Toolbar -->
-        <div class="w-full flex flex-wrap gap-4 items-center">
-          <span class="grow">
-            {{ t('maintenance.status') }}:
-            <StatusTag :refreshing="isRefreshing" :error="anyErrors" />
-          </span>
-          <div class="flex gap-4 items-center">
-            <SelectButton
-              v-model="displayAsList"
-              :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
-              :allow-empty="false"
-            >
-              <template #option="opts">
-                <i :class="opts.option" />
-              </template>
-            </SelectButton>
-            <SelectButton
-              v-model="filter"
-              :options="filterOptions"
-              :allow-empty="false"
-              option-label="value"
-              data-key="value"
-              area-labelledby="custom"
-              @change="clearResolved"
-            >
-              <template #option="opts">
-                <i :class="opts.option.icon" />
-                <span class="max-sm:hidden">{{ opts.option.value }}</span>
-              </template>
-            </SelectButton>
-            <RefreshButton
-              v-model="isRefreshing"
-              severity="secondary"
-              @refresh="refreshDesktopTasks"
-            />
-          </div>
-        </div>
-
-        <!-- Tasks -->
-        <TaskListPanel
-          class="border-neutral-700 border-solid border-x-0 border-y"
-          :filter
-          :display-as-list
-          :is-refreshing
-        />
-
-        <!-- Actions -->
-        <div class="flex justify-between gap-4 flex-row">
-          <Button
-            :label="t('maintenance.consoleLogs')"
-            icon="pi pi-desktop"
-            icon-pos="left"
-            severity="secondary"
-            @click="toggleConsoleDrawer"
-          />
-          <Button
-            :label="t('g.continue')"
-            icon="pi pi-arrow-right"
-            icon-pos="left"
-            :severity="anyErrors ? 'secondary' : 'primary'"
-            :loading="isRefreshing"
-            @click="() => completeValidation()"
-          />
-        </div>
-      </div>
-
-      <TerminalOutputDrawer
-        v-model="terminalVisible"
-        :header="t('g.terminal')"
-        :default-message="t('maintenance.terminalDefaultMessage')"
-      />
-      <Toast />
-    </div>
-  </BaseViewTemplate>
-</template>
-
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
 import Button from 'primevue/button'
@@ -177,6 +90,93 @@ onMounted(async () => {
 onUnmounted(() => electron.Validation.dispose())
 </script>
 
+<template>
+  <BaseViewTemplate dark>
+    <div
+      class="min-w-full min-h-full font-sans w-screen h-screen grid justify-around text-neutral-300 bg-neutral-900 dark-theme overflow-y-auto"
+    >
+      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
+        <!-- Header -->
+        <h1 class="backspan pi-wrench text-4xl font-bold">
+          {{ t('maintenance.title') }}
+        </h1>
+
+        <!-- Toolbar -->
+        <div class="w-full flex flex-wrap gap-4 items-center">
+          <span class="grow">
+            {{ t('maintenance.status') }}:
+            <StatusTag :refreshing="isRefreshing" :error="anyErrors" />
+          </span>
+          <div class="flex gap-4 items-center">
+            <SelectButton
+              v-model="displayAsList"
+              :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
+              :allow-empty="false"
+            >
+              <template #option="opts">
+                <i :class="opts.option" />
+              </template>
+            </SelectButton>
+            <SelectButton
+              v-model="filter"
+              :options="filterOptions"
+              :allow-empty="false"
+              option-label="value"
+              data-key="value"
+              area-labelledby="custom"
+              @change="clearResolved"
+            >
+              <template #option="opts">
+                <i :class="opts.option.icon" />
+                <span class="max-sm:hidden">{{ opts.option.value }}</span>
+              </template>
+            </SelectButton>
+            <RefreshButton
+              v-model="isRefreshing"
+              severity="secondary"
+              @refresh="refreshDesktopTasks"
+            />
+          </div>
+        </div>
+
+        <!-- Tasks -->
+        <TaskListPanel
+          class="border-neutral-700 border-solid border-x-0 border-y"
+          :filter
+          :display-as-list
+          :is-refreshing
+        />
+
+        <!-- Actions -->
+        <div class="flex justify-between gap-4 flex-row">
+          <Button
+            :label="t('maintenance.consoleLogs')"
+            icon="pi pi-desktop"
+            icon-pos="left"
+            severity="secondary"
+            @click="toggleConsoleDrawer"
+          />
+          <Button
+            :label="t('g.continue')"
+            icon="pi pi-arrow-right"
+            icon-pos="left"
+            :severity="anyErrors ? 'secondary' : 'primary'"
+            :loading="isRefreshing"
+            @click="() => completeValidation()"
+          />
+        </div>
+      </div>
+
+      <TerminalOutputDrawer
+        v-model="terminalVisible"
+        :header="t('g.terminal')"
+        :default-message="t('maintenance.terminalDefaultMessage')"
+      />
+      <Toast />
+    </div>
+  </BaseViewTemplate>
+</template>
+
 <style scoped>
 @reference '../assets/css/style.css';
 
diff --git a/src/views/ManualConfigurationView.vue b/src/views/ManualConfigurationView.vue
index 5a79514b85..388565e2bf 100644
--- a/src/views/ManualConfigurationView.vue
+++ b/src/views/ManualConfigurationView.vue
@@ -1,3 +1,28 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Panel from 'primevue/panel'
+import Tag from 'primevue/tag'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { electronAPI } from '@/utils/envUtil'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const { t } = useI18n()
+
+const electron = electronAPI()
+
+const basePath = ref<string | null>(null)
+const sep = ref<'\\' | '/'>('/')
+
+const restartApp = (message?: string) => electron.restartApp(message)
+
+onMounted(async () => {
+  basePath.value = await electron.getBasePath()
+  if (basePath.value.indexOf('/') === -1) sep.value = '\\'
+})
+</script>
+
 <template>
   <BaseViewTemplate dark>
     <!-- Installation Path Section -->
@@ -50,31 +75,6 @@
   </BaseViewTemplate>
 </template>
 
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Panel from 'primevue/panel'
-import Tag from 'primevue/tag'
-import { onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { electronAPI } from '@/utils/envUtil'
-import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
-
-const { t } = useI18n()
-
-const electron = electronAPI()
-
-const basePath = ref<string | null>(null)
-const sep = ref<'\\' | '/'>('/')
-
-const restartApp = (message?: string) => electron.restartApp(message)
-
-onMounted(async () => {
-  basePath.value = await electron.getBasePath()
-  if (basePath.value.indexOf('/') === -1) sep.value = '\\'
-})
-</script>
-
 <style scoped>
 .p-tag {
   --p-tag-gap: 0.5rem;
diff --git a/src/views/MetricsConsentView.vue b/src/views/MetricsConsentView.vue
index d6d1ea5090..d9395dafa8 100644
--- a/src/views/MetricsConsentView.vue
+++ b/src/views/MetricsConsentView.vue
@@ -1,3 +1,38 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import { electronAPI } from '@/utils/envUtil'
+
+const toast = useToast()
+const { t } = useI18n()
+
+const allowMetrics = ref(true)
+const router = useRouter()
+const isUpdating = ref(false)
+
+const updateConsent = async () => {
+  isUpdating.value = true
+  try {
+    await electronAPI().setMetricsConsent(allowMetrics.value)
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('install.errorUpdatingConsent'),
+      detail: t('install.errorUpdatingConsentDetail'),
+      life: 3000
+    })
+  } finally {
+    isUpdating.value = false
+  }
+  await router.push('/')
+}
+</script>
+
 <template>
   <BaseViewTemplate dark>
     <div class="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
@@ -46,38 +81,3 @@
     </div>
   </BaseViewTemplate>
 </template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import ToggleSwitch from 'primevue/toggleswitch'
-import { useToast } from 'primevue/usetoast'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
-
-import { electronAPI } from '@/utils/envUtil'
-
-const toast = useToast()
-const { t } = useI18n()
-
-const allowMetrics = ref(true)
-const router = useRouter()
-const isUpdating = ref(false)
-
-const updateConsent = async () => {
-  isUpdating.value = true
-  try {
-    await electronAPI().setMetricsConsent(allowMetrics.value)
-  } catch (error) {
-    toast.add({
-      severity: 'error',
-      summary: t('install.errorUpdatingConsent'),
-      detail: t('install.errorUpdatingConsentDetail'),
-      life: 3000
-    })
-  } finally {
-    isUpdating.value = false
-  }
-  await router.push('/')
-}
-</script>
diff --git a/src/views/NotSupportedView.vue b/src/views/NotSupportedView.vue
index 89537d42d2..5e367c5f97 100644
--- a/src/views/NotSupportedView.vue
+++ b/src/views/NotSupportedView.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useRouter } from 'vue-router'
+
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const openDocs = () => {
+  window.open(
+    'https://github.com/Comfy-Org/desktop#currently-supported-platforms',
+    '_blank'
+  )
+}
+
+const reportIssue = () => {
+  window.open('https://forum.comfy.org/c/v1-feedback/', '_blank')
+}
+
+const router = useRouter()
+const continueToInstall = async () => {
+  await router.push('/install')
+}
+</script>
+
 <template>
   <BaseViewTemplate>
     <div class="sad-container">
@@ -55,29 +78,6 @@
   </BaseViewTemplate>
 </template>
 
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useRouter } from 'vue-router'
-
-import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
-
-const openDocs = () => {
-  window.open(
-    'https://github.com/Comfy-Org/desktop#currently-supported-platforms',
-    '_blank'
-  )
-}
-
-const reportIssue = () => {
-  window.open('https://forum.comfy.org/c/v1-feedback/', '_blank')
-}
-
-const router = useRouter()
-const continueToInstall = async () => {
-  await router.push('/install')
-}
-</script>
-
 <style scoped>
 @reference '../assets/css/style.css';
 
diff --git a/src/views/ServerStartView.vue b/src/views/ServerStartView.vue
index c74e3a967a..5d4e1903c1 100644
--- a/src/views/ServerStartView.vue
+++ b/src/views/ServerStartView.vue
@@ -1,48 +1,3 @@
-<template>
-  <BaseViewTemplate dark class="flex-col">
-    <div class="flex flex-col w-full h-full items-center">
-      <h2 class="text-2xl font-bold">
-        {{ t(`serverStart.process.${status}`) }}
-        <span v-if="status === ProgressStatus.ERROR">
-          v{{ electronVersion }}
-        </span>
-      </h2>
-      <div
-        v-if="status === ProgressStatus.ERROR"
-        class="flex flex-col items-center gap-4"
-      >
-        <div class="flex items-center my-4 gap-2">
-          <Button
-            icon="pi pi-flag"
-            severity="secondary"
-            :label="t('serverStart.reportIssue')"
-            @click="reportIssue"
-          />
-          <Button
-            icon="pi pi-file"
-            severity="secondary"
-            :label="t('serverStart.openLogs')"
-            @click="openLogs"
-          />
-          <Button
-            icon="pi pi-wrench"
-            :label="t('serverStart.troubleshoot')"
-            @click="troubleshoot"
-          />
-        </div>
-        <Button
-          v-if="!terminalVisible"
-          icon="pi pi-search"
-          severity="secondary"
-          :label="t('serverStart.showTerminal')"
-          @click="terminalVisible = true"
-        />
-      </div>
-      <BaseTerminal v-show="terminalVisible" @created="terminalCreated" />
-    </div>
-  </BaseViewTemplate>
-</template>
-
 <script setup lang="ts">
 import { ProgressStatus } from '@comfyorg/comfyui-electron-types'
 import type { Terminal } from '@xterm/xterm'
@@ -101,3 +56,48 @@ onMounted(async () => {
   electronVersion.value = await electron.getElectronVersion()
 })
 </script>
+
+<template>
+  <BaseViewTemplate dark class="flex-col">
+    <div class="flex flex-col w-full h-full items-center">
+      <h2 class="text-2xl font-bold">
+        {{ t(`serverStart.process.${status}`) }}
+        <span v-if="status === ProgressStatus.ERROR">
+          v{{ electronVersion }}
+        </span>
+      </h2>
+      <div
+        v-if="status === ProgressStatus.ERROR"
+        class="flex flex-col items-center gap-4"
+      >
+        <div class="flex items-center my-4 gap-2">
+          <Button
+            icon="pi pi-flag"
+            severity="secondary"
+            :label="t('serverStart.reportIssue')"
+            @click="reportIssue"
+          />
+          <Button
+            icon="pi pi-file"
+            severity="secondary"
+            :label="t('serverStart.openLogs')"
+            @click="openLogs"
+          />
+          <Button
+            icon="pi pi-wrench"
+            :label="t('serverStart.troubleshoot')"
+            @click="troubleshoot"
+          />
+        </div>
+        <Button
+          v-if="!terminalVisible"
+          icon="pi pi-search"
+          severity="secondary"
+          :label="t('serverStart.showTerminal')"
+          @click="terminalVisible = true"
+        />
+      </div>
+      <BaseTerminal v-show="terminalVisible" @created="terminalCreated" />
+    </div>
+  </BaseViewTemplate>
+</template>
diff --git a/src/views/UserSelectView.vue b/src/views/UserSelectView.vue
index 46e9ca75c2..e10423453a 100644
--- a/src/views/UserSelectView.vue
+++ b/src/views/UserSelectView.vue
@@ -1,46 +1,3 @@
-<template>
-  <BaseViewTemplate dark>
-    <main
-      id="comfy-user-selection"
-      class="min-w-84 relative rounded-lg bg-(--comfy-menu-bg) p-5 px-10 shadow-lg"
-    >
-      <h1 class="my-2.5 mb-7 font-normal">ComfyUI</h1>
-      <div class="flex w-full flex-col items-center">
-        <div class="flex w-full flex-col gap-2">
-          <label for="new-user-input">{{ $t('userSelect.newUser') }}:</label>
-          <InputText
-            id="new-user-input"
-            v-model="newUsername"
-            :placeholder="$t('userSelect.enterUsername')"
-            @keyup.enter="login"
-          />
-        </div>
-        <Divider />
-        <div class="flex w-full flex-col gap-2">
-          <label for="existing-user-select"
-            >{{ $t('userSelect.existingUser') }}:</label
-          >
-          <Select
-            v-model="selectedUser"
-            class="w-full"
-            input-id="existing-user-select"
-            :options="userStore.users"
-            option-label="username"
-            :placeholder="$t('userSelect.selectUser')"
-            :disabled="createNewUser"
-          />
-          <Message v-if="error" severity="error">
-            {{ error }}
-          </Message>
-        </div>
-        <footer class="mt-5">
-          <Button :label="$t('userSelect.next')" @click="login" />
-        </footer>
-      </div>
-    </main>
-  </BaseViewTemplate>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
@@ -92,3 +49,46 @@ onMounted(async () => {
   }
 })
 </script>
+
+<template>
+  <BaseViewTemplate dark>
+    <main
+      id="comfy-user-selection"
+      class="min-w-84 relative rounded-lg bg-(--comfy-menu-bg) p-5 px-10 shadow-lg"
+    >
+      <h1 class="my-2.5 mb-7 font-normal">ComfyUI</h1>
+      <div class="flex w-full flex-col items-center">
+        <div class="flex w-full flex-col gap-2">
+          <label for="new-user-input">{{ $t('userSelect.newUser') }}:</label>
+          <InputText
+            id="new-user-input"
+            v-model="newUsername"
+            :placeholder="$t('userSelect.enterUsername')"
+            @keyup.enter="login"
+          />
+        </div>
+        <Divider />
+        <div class="flex w-full flex-col gap-2">
+          <label for="existing-user-select"
+            >{{ $t('userSelect.existingUser') }}:</label
+          >
+          <Select
+            v-model="selectedUser"
+            class="w-full"
+            input-id="existing-user-select"
+            :options="userStore.users"
+            option-label="username"
+            :placeholder="$t('userSelect.selectUser')"
+            :disabled="createNewUser"
+          />
+          <Message v-if="error" severity="error">
+            {{ error }}
+          </Message>
+        </div>
+        <footer class="mt-5">
+          <Button :label="$t('userSelect.next')" @click="login" />
+        </footer>
+      </div>
+    </main>
+  </BaseViewTemplate>
+</template>
diff --git a/src/views/WelcomeView.vue b/src/views/WelcomeView.vue
index 597bc5a6b8..77040dd7fe 100644
--- a/src/views/WelcomeView.vue
+++ b/src/views/WelcomeView.vue
@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useRouter } from 'vue-router'
+
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const router = useRouter()
+const navigateTo = async (path: string) => {
+  await router.push(path)
+}
+</script>
+
 <template>
   <BaseViewTemplate dark>
     <div class="flex flex-col items-center justify-center gap-8 p-8">
@@ -20,18 +32,6 @@
   </BaseViewTemplate>
 </template>
 
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useRouter } from 'vue-router'
-
-import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
-
-const router = useRouter()
-const navigateTo = async (path: string) => {
-  await router.push(path)
-}
-</script>
-
 <style scoped>
 @reference '../assets/css/style.css';
 
diff --git a/src/views/layouts/LayoutDefault.vue b/src/views/layouts/LayoutDefault.vue
index 748e4c249a..33fcc28428 100644
--- a/src/views/layouts/LayoutDefault.vue
+++ b/src/views/layouts/LayoutDefault.vue
@@ -1,11 +1,11 @@
-<template>
-  <main class="w-full h-full overflow-hidden relative">
-    <router-view />
-  </main>
-</template>
-
 <script setup lang="ts">
 import { useFavicon } from '@vueuse/core'
 
 useFavicon('/assets/favicon.ico')
 </script>
+
+<template>
+  <main class="w-full h-full overflow-hidden relative">
+    <router-view />
+  </main>
+</template>
diff --git a/src/views/templates/BaseViewTemplate.vue b/src/views/templates/BaseViewTemplate.vue
index 21cdcd9a5c..64b61c85d6 100644
--- a/src/views/templates/BaseViewTemplate.vue
+++ b/src/views/templates/BaseViewTemplate.vue
@@ -1,24 +1,3 @@
-<template>
-  <div
-    class="font-sans w-screen h-screen flex flex-col"
-    :class="[
-      dark
-        ? 'text-neutral-300 bg-neutral-900 dark-theme'
-        : 'text-neutral-900 bg-neutral-300'
-    ]"
-  >
-    <!-- Virtual top menu for native window (drag handle) -->
-    <div
-      v-show="isNativeWindow()"
-      ref="topMenuRef"
-      class="app-drag w-full h-(--comfy-topbar-height)"
-    />
-    <div class="grow w-full flex items-center justify-center overflow-auto">
-      <slot />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue'
 
@@ -50,3 +29,24 @@ onMounted(async () => {
   }
 })
 </script>
+
+<template>
+  <div
+    class="font-sans w-screen h-screen flex flex-col"
+    :class="[
+      dark
+        ? 'text-neutral-300 bg-neutral-900 dark-theme'
+        : 'text-neutral-900 bg-neutral-300'
+    ]"
+  >
+    <!-- Virtual top menu for native window (drag handle) -->
+    <div
+      v-show="isNativeWindow()"
+      ref="topMenuRef"
+      class="app-drag w-full h-(--comfy-topbar-height)"
+    />
+    <div class="grow w-full flex items-center justify-center overflow-auto">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue b/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
index 613d1e2a79..01ddb32b15 100644
--- a/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
@@ -1,84 +1,3 @@
-<template>
-  <div
-    class="overflow-hidden transition-all duration-300"
-    :class="{
-      'max-h-[500px]': isExpanded,
-      'max-h-0 p-0 m-0': !isExpanded
-    }"
-  >
-    <div
-      ref="sectionsContainerRef"
-      class="px-6 py-4 overflow-y-auto max-h-[450px] scroll-container"
-      :style="{
-        scrollbarWidth: 'thin',
-        scrollbarColor: 'rgba(156, 163, 175, 0.5) transparent'
-      }"
-      :class="{
-        'max-h-[450px]': isExpanded,
-        'max-h-0': !isExpanded
-      }"
-    >
-      <div v-for="(log, index) in focusedLogs" :key="index">
-        <Panel
-          :expanded="collapsedPanels[index] === true"
-          toggleable
-          class="shadow-elevation-1 rounded-lg mt-2 dark-theme:bg-black dark-theme:border-black"
-        >
-          <template #header>
-            <div class="flex items-center justify-between w-full py-2">
-              <div class="flex flex-col text-sm font-medium leading-normal">
-                <span>{{ log.taskName }}</span>
-                <span class="text-muted">
-                  {{
-                    isInProgress(index)
-                      ? $t('g.inProgress')
-                      : $t('g.completed') + ' ✓'
-                  }}
-                </span>
-              </div>
-            </div>
-          </template>
-          <template #toggleicon>
-            <Button
-              :icon="
-                collapsedPanels[index]
-                  ? 'pi pi-chevron-right'
-                  : 'pi pi-chevron-down'
-              "
-              text
-              class="text-neutral-300"
-              @click="togglePanel(index)"
-            />
-          </template>
-          <div
-            :ref="
-              index === focusedLogs.length - 1
-                ? (el) => (lastPanelRef = el as HTMLElement)
-                : undefined
-            "
-            class="overflow-y-auto h-64 rounded-lg bg-black"
-            :class="{
-              'h-64': index !== focusedLogs.length - 1,
-              grow: index === focusedLogs.length - 1
-            }"
-            @scroll="handleScroll"
-          >
-            <div class="h-full">
-              <div
-                v-for="(logLine, logIndex) in log.logs"
-                :key="logIndex"
-                class="text-neutral-400 dark-theme:text-muted"
-              >
-                <pre class="whitespace-pre-wrap break-words">{{ logLine }}</pre>
-              </div>
-            </div>
-          </div>
-        </Panel>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useScroll, whenever } from '@vueuse/core'
 import Button from 'primevue/button'
@@ -177,3 +96,84 @@ onBeforeUnmount(() => {
   progressDialogContent.collapse()
 })
 </script>
+
+<template>
+  <div
+    class="overflow-hidden transition-all duration-300"
+    :class="{
+      'max-h-[500px]': isExpanded,
+      'max-h-0 p-0 m-0': !isExpanded
+    }"
+  >
+    <div
+      ref="sectionsContainerRef"
+      class="px-6 py-4 overflow-y-auto max-h-[450px] scroll-container"
+      :style="{
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'rgba(156, 163, 175, 0.5) transparent'
+      }"
+      :class="{
+        'max-h-[450px]': isExpanded,
+        'max-h-0': !isExpanded
+      }"
+    >
+      <div v-for="(log, index) in focusedLogs" :key="index">
+        <Panel
+          :expanded="collapsedPanels[index] === true"
+          toggleable
+          class="shadow-elevation-1 rounded-lg mt-2 dark-theme:bg-black dark-theme:border-black"
+        >
+          <template #header>
+            <div class="flex items-center justify-between w-full py-2">
+              <div class="flex flex-col text-sm font-medium leading-normal">
+                <span>{{ log.taskName }}</span>
+                <span class="text-muted">
+                  {{
+                    isInProgress(index)
+                      ? $t('g.inProgress')
+                      : $t('g.completed') + ' ✓'
+                  }}
+                </span>
+              </div>
+            </div>
+          </template>
+          <template #toggleicon>
+            <Button
+              :icon="
+                collapsedPanels[index]
+                  ? 'pi pi-chevron-right'
+                  : 'pi pi-chevron-down'
+              "
+              text
+              class="text-neutral-300"
+              @click="togglePanel(index)"
+            />
+          </template>
+          <div
+            :ref="
+              index === focusedLogs.length - 1
+                ? (el) => (lastPanelRef = el as HTMLElement)
+                : undefined
+            "
+            class="overflow-y-auto h-64 rounded-lg bg-black"
+            :class="{
+              'h-64': index !== focusedLogs.length - 1,
+              grow: index === focusedLogs.length - 1
+            }"
+            @scroll="handleScroll"
+          >
+            <div class="h-full">
+              <div
+                v-for="(logLine, logIndex) in log.logs"
+                :key="logIndex"
+                class="text-neutral-400 dark-theme:text-muted"
+              >
+                <pre class="whitespace-pre-wrap break-words">{{ logLine }}</pre>
+              </div>
+            </div>
+          </div>
+        </Panel>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/ManagerProgressFooter.vue b/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
index 3923107214..f697e77f39 100644
--- a/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
@@ -1,72 +1,3 @@
-<template>
-  <div
-    class="w-full px-6 py-2 shadow-lg flex items-center justify-between"
-    :class="{
-      'rounded-t-none': progressDialogContent.isExpanded,
-      'rounded-lg': !progressDialogContent.isExpanded
-    }"
-  >
-    <div class="flex items-center text-base leading-none">
-      <div class="flex items-center">
-        <template v-if="isInProgress">
-          <DotSpinner duration="1s" class="mr-2" />
-          <span>{{ currentTaskName }}</span>
-        </template>
-        <template v-else-if="isRestartCompleted">
-          <span class="mr-2">🎉</span>
-          <span>{{ currentTaskName }}</span>
-        </template>
-        <template v-else>
-          <span class="mr-2">✅</span>
-          <span>{{ $t('manager.restartToApplyChanges') }}</span>
-        </template>
-      </div>
-    </div>
-    <div class="flex items-center gap-4">
-      <span v-if="isInProgress" class="text-sm text-neutral-700">
-        {{ completedTasksCount }} {{ $t('g.progressCountOf') }}
-        {{ totalTasksCount }}
-      </span>
-      <div class="flex items-center">
-        <Button
-          v-if="!isInProgress && !isRestartCompleted"
-          rounded
-          outlined
-          class="mr-4 rounded-md border-2 px-3 text-neutral-600 border-neutral-900 hover:bg-neutral-100 !dark-theme:bg-transparent dark-theme:text-white dark-theme:border-white dark-theme:hover:bg-neutral-800"
-          @click="handleRestart"
-        >
-          {{ $t('manager.applyChanges') }}
-        </Button>
-        <Button
-          v-else-if="!isRestartCompleted"
-          :icon="
-            progressDialogContent.isExpanded
-              ? 'pi pi-chevron-up'
-              : 'pi pi-chevron-down'
-          "
-          text
-          rounded
-          size="small"
-          class="font-bold"
-          severity="secondary"
-          :aria-label="progressDialogContent.isExpanded ? 'Collapse' : 'Expand'"
-          @click.stop="progressDialogContent.toggle"
-        />
-        <Button
-          icon="pi pi-times"
-          text
-          rounded
-          size="small"
-          class="font-bold"
-          severity="secondary"
-          aria-label="Close"
-          @click.stop="closeDialog"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import Button from 'primevue/button'
@@ -188,3 +119,72 @@ const handleRestart = async () => {
   }
 }
 </script>
+
+<template>
+  <div
+    class="w-full px-6 py-2 shadow-lg flex items-center justify-between"
+    :class="{
+      'rounded-t-none': progressDialogContent.isExpanded,
+      'rounded-lg': !progressDialogContent.isExpanded
+    }"
+  >
+    <div class="flex items-center text-base leading-none">
+      <div class="flex items-center">
+        <template v-if="isInProgress">
+          <DotSpinner duration="1s" class="mr-2" />
+          <span>{{ currentTaskName }}</span>
+        </template>
+        <template v-else-if="isRestartCompleted">
+          <span class="mr-2">🎉</span>
+          <span>{{ currentTaskName }}</span>
+        </template>
+        <template v-else>
+          <span class="mr-2">✅</span>
+          <span>{{ $t('manager.restartToApplyChanges') }}</span>
+        </template>
+      </div>
+    </div>
+    <div class="flex items-center gap-4">
+      <span v-if="isInProgress" class="text-sm text-neutral-700">
+        {{ completedTasksCount }} {{ $t('g.progressCountOf') }}
+        {{ totalTasksCount }}
+      </span>
+      <div class="flex items-center">
+        <Button
+          v-if="!isInProgress && !isRestartCompleted"
+          rounded
+          outlined
+          class="mr-4 rounded-md border-2 px-3 text-neutral-600 border-neutral-900 hover:bg-neutral-100 !dark-theme:bg-transparent dark-theme:text-white dark-theme:border-white dark-theme:hover:bg-neutral-800"
+          @click="handleRestart"
+        >
+          {{ $t('manager.applyChanges') }}
+        </Button>
+        <Button
+          v-else-if="!isRestartCompleted"
+          :icon="
+            progressDialogContent.isExpanded
+              ? 'pi pi-chevron-up'
+              : 'pi pi-chevron-down'
+          "
+          text
+          rounded
+          size="small"
+          class="font-bold"
+          severity="secondary"
+          :aria-label="progressDialogContent.isExpanded ? 'Collapse' : 'Expand'"
+          @click.stop="progressDialogContent.toggle"
+        />
+        <Button
+          icon="pi pi-times"
+          text
+          rounded
+          size="small"
+          class="font-bold"
+          severity="secondary"
+          aria-label="Close"
+          @click.stop="closeDialog"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/ManagerProgressHeader.vue b/src/workbench/extensions/manager/components/ManagerProgressHeader.vue
index 841119cd09..78d44603a7 100644
--- a/src/workbench/extensions/manager/components/ManagerProgressHeader.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressHeader.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    v-if="progressDialogContent.isExpanded"
-    class="px-4 py-2 flex items-center"
-  >
-    <TabMenu
-      v-model:active-index="activeTabIndex"
-      :model="tabs"
-      class="w-full border-none"
-      :pt="{
-        menu: { class: 'border-none' },
-        menuitem: { class: 'font-medium' },
-        action: { class: 'px-4 py-2' }
-      }"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import TabMenu from 'primevue/tabmenu'
 import { computed } from 'vue'
@@ -42,3 +24,21 @@ const tabs = computed(() => [
   }
 ])
 </script>
+
+<template>
+  <div
+    v-if="progressDialogContent.isExpanded"
+    class="px-4 py-2 flex items-center"
+  >
+    <TabMenu
+      v-model:active-index="activeTabIndex"
+      :model="tabs"
+      class="w-full border-none"
+      :pt="{
+        menu: { class: 'border-none' },
+        menuitem: { class: 'font-medium' },
+        action: { class: 'px-4 py-2' }
+      }"
+    />
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
index f6c290d30d..0c93eb1424 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
@@ -1,129 +1,3 @@
-<template>
-  <div
-    class="h-full flex flex-col mx-auto overflow-hidden"
-    :aria-label="$t('manager.title')"
-  >
-    <ContentDivider :width="0.3" />
-    <Button
-      v-if="isSmallScreen"
-      :icon="isSideNavOpen ? 'pi pi-chevron-left' : 'pi pi-chevron-right'"
-      severity="secondary"
-      filled
-      class="absolute top-1/2 -translate-y-1/2 z-10"
-      :class="isSideNavOpen ? 'left-[12rem]' : 'left-2'"
-      @click="toggleSideNav"
-    />
-    <div class="flex flex-1 relative overflow-hidden">
-      <ManagerNavSidebar
-        v-if="isSideNavOpen"
-        v-model:selected-tab="selectedTab"
-        :tabs="tabs"
-      />
-      <div
-        class="flex-1 overflow-auto bg-gray-50 dark-theme:bg-neutral-900"
-        :class="{
-          'transition-all duration-300': isSmallScreen
-        }"
-      >
-        <div class="px-6 flex flex-col h-full">
-          <!-- Conflict Warning Banner -->
-          <div
-            v-if="shouldShowManagerBanner"
-            class="bg-yellow-500/20 rounded-lg p-4 mt-3 mb-4 flex items-center gap-6 relative"
-          >
-            <i class="pi pi-exclamation-triangle text-yellow-600 text-lg"></i>
-            <div class="flex flex-col gap-2 flex-1">
-              <p class="text-sm font-bold m-0">
-                {{ $t('manager.conflicts.warningBanner.title') }}
-              </p>
-              <p class="text-xs m-0">
-                {{ $t('manager.conflicts.warningBanner.message') }}
-              </p>
-              <p
-                class="text-sm font-bold m-0 cursor-pointer"
-                @click="onClickWarningLink"
-              >
-                {{ $t('manager.conflicts.warningBanner.button') }}
-              </p>
-            </div>
-            <IconButton
-              class="absolute top-0 right-0"
-              type="transparent"
-              @click="dismissWarningBanner"
-            >
-              <i
-                class="pi pi-times text-neutral-900 dark-theme:text-white text-xs"
-              ></i>
-            </IconButton>
-          </div>
-          <RegistrySearchBar
-            v-model:search-query="searchQuery"
-            v-model:search-mode="searchMode"
-            v-model:sort-field="sortField"
-            :search-results="searchResults"
-            :suggestions="suggestions"
-            :is-missing-tab="isMissingTab"
-            :sort-options="sortOptions"
-            :is-update-available-tab="isUpdateAvailableTab"
-          />
-          <div class="flex-1 overflow-auto">
-            <div
-              v-if="isLoading"
-              class="w-full h-full overflow-auto scrollbar-hide"
-            >
-              <GridSkeleton :grid-style="GRID_STYLE" :skeleton-card-count />
-            </div>
-            <NoResultsPlaceholder
-              v-else-if="searchResults.length === 0"
-              :title="
-                comfyManagerStore.error
-                  ? $t('manager.errorConnecting')
-                  : $t('manager.noResultsFound')
-              "
-              :message="
-                comfyManagerStore.error
-                  ? $t('manager.tryAgainLater')
-                  : $t('manager.tryDifferentSearch')
-              "
-            />
-            <div v-else class="h-full" @click="handleGridContainerClick">
-              <VirtualGrid
-                id="results-grid"
-                :items="resultsWithKeys"
-                :buffer-rows="4"
-                :grid-style="GRID_STYLE"
-                @approach-end="onApproachEnd"
-              >
-                <template #item="{ item }">
-                  <PackCard
-                    :node-pack="item"
-                    :is-selected="
-                      selectedNodePacks.some((pack) => pack.id === item.id)
-                    "
-                    @click.stop="
-                      (event: MouseEvent) => selectNodePack(item, event)
-                    "
-                  />
-                </template>
-              </VirtualGrid>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="w-[clamp(250px,33%,306px)] border-l-0 flex z-20">
-        <ContentDivider orientation="vertical" :width="0.2" />
-        <div class="w-full flex flex-col isolate">
-          <InfoPanel
-            v-if="!hasMultipleSelections && selectedNodePack"
-            :node-pack="selectedNodePack"
-          />
-          <InfoPanelMultiItem v-else :node-packs="selectedNodePacks" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
 import { merge } from 'es-toolkit/compat'
@@ -540,3 +414,129 @@ onUnmounted(() => {
   getPackById.cancel()
 })
 </script>
+
+<template>
+  <div
+    class="h-full flex flex-col mx-auto overflow-hidden"
+    :aria-label="$t('manager.title')"
+  >
+    <ContentDivider :width="0.3" />
+    <Button
+      v-if="isSmallScreen"
+      :icon="isSideNavOpen ? 'pi pi-chevron-left' : 'pi pi-chevron-right'"
+      severity="secondary"
+      filled
+      class="absolute top-1/2 -translate-y-1/2 z-10"
+      :class="isSideNavOpen ? 'left-[12rem]' : 'left-2'"
+      @click="toggleSideNav"
+    />
+    <div class="flex flex-1 relative overflow-hidden">
+      <ManagerNavSidebar
+        v-if="isSideNavOpen"
+        v-model:selected-tab="selectedTab"
+        :tabs="tabs"
+      />
+      <div
+        class="flex-1 overflow-auto bg-gray-50 dark-theme:bg-neutral-900"
+        :class="{
+          'transition-all duration-300': isSmallScreen
+        }"
+      >
+        <div class="px-6 flex flex-col h-full">
+          <!-- Conflict Warning Banner -->
+          <div
+            v-if="shouldShowManagerBanner"
+            class="bg-yellow-500/20 rounded-lg p-4 mt-3 mb-4 flex items-center gap-6 relative"
+          >
+            <i class="pi pi-exclamation-triangle text-yellow-600 text-lg"></i>
+            <div class="flex flex-col gap-2 flex-1">
+              <p class="text-sm font-bold m-0">
+                {{ $t('manager.conflicts.warningBanner.title') }}
+              </p>
+              <p class="text-xs m-0">
+                {{ $t('manager.conflicts.warningBanner.message') }}
+              </p>
+              <p
+                class="text-sm font-bold m-0 cursor-pointer"
+                @click="onClickWarningLink"
+              >
+                {{ $t('manager.conflicts.warningBanner.button') }}
+              </p>
+            </div>
+            <IconButton
+              class="absolute top-0 right-0"
+              type="transparent"
+              @click="dismissWarningBanner"
+            >
+              <i
+                class="pi pi-times text-neutral-900 dark-theme:text-white text-xs"
+              ></i>
+            </IconButton>
+          </div>
+          <RegistrySearchBar
+            v-model:search-query="searchQuery"
+            v-model:search-mode="searchMode"
+            v-model:sort-field="sortField"
+            :search-results="searchResults"
+            :suggestions="suggestions"
+            :is-missing-tab="isMissingTab"
+            :sort-options="sortOptions"
+            :is-update-available-tab="isUpdateAvailableTab"
+          />
+          <div class="flex-1 overflow-auto">
+            <div
+              v-if="isLoading"
+              class="w-full h-full overflow-auto scrollbar-hide"
+            >
+              <GridSkeleton :grid-style="GRID_STYLE" :skeleton-card-count />
+            </div>
+            <NoResultsPlaceholder
+              v-else-if="searchResults.length === 0"
+              :title="
+                comfyManagerStore.error
+                  ? $t('manager.errorConnecting')
+                  : $t('manager.noResultsFound')
+              "
+              :message="
+                comfyManagerStore.error
+                  ? $t('manager.tryAgainLater')
+                  : $t('manager.tryDifferentSearch')
+              "
+            />
+            <div v-else class="h-full" @click="handleGridContainerClick">
+              <VirtualGrid
+                id="results-grid"
+                :items="resultsWithKeys"
+                :buffer-rows="4"
+                :grid-style="GRID_STYLE"
+                @approach-end="onApproachEnd"
+              >
+                <template #item="{ item }">
+                  <PackCard
+                    :node-pack="item"
+                    :is-selected="
+                      selectedNodePacks.some((pack) => pack.id === item.id)
+                    "
+                    @click.stop="
+                      (event: MouseEvent) => selectNodePack(item, event)
+                    "
+                  />
+                </template>
+              </VirtualGrid>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="w-[clamp(250px,33%,306px)] border-l-0 flex z-20">
+        <ContentDivider orientation="vertical" :width="0.2" />
+        <div class="w-full flex flex-col isolate">
+          <InfoPanel
+            v-if="!hasMultipleSelections && selectedNodePack"
+            :node-pack="selectedNodePack"
+          />
+          <InfoPanelMultiItem v-else :node-packs="selectedNodePacks" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/ManagerHeader.vue b/src/workbench/extensions/manager/components/manager/ManagerHeader.vue
index 054f1fbf42..6942bd5110 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerHeader.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerHeader.vue
@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="w-full">
     <div class="flex items-center">
@@ -7,5 +9,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue b/src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue
index 0e643b445f..1a9470866d 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue
@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import Listbox from 'primevue/listbox'
+import ScrollPanel from 'primevue/scrollpanel'
+
+import ContentDivider from '@/components/common/ContentDivider.vue'
+import type { TabItem } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+
+defineProps<{
+  tabs: TabItem[]
+}>()
+
+const selectedTab = defineModel<TabItem>('selectedTab')
+</script>
+
 <template>
   <aside
     class="flex translate-x-0 max-w-[250px] w-3/12 z-5 transition-transform duration-300 ease-in-out"
@@ -26,17 +40,3 @@
     <ContentDivider orientation="vertical" :width="0.3" />
   </aside>
 </template>
-
-<script setup lang="ts">
-import Listbox from 'primevue/listbox'
-import ScrollPanel from 'primevue/scrollpanel'
-
-import ContentDivider from '@/components/common/ContentDivider.vue'
-import type { TabItem } from '@/workbench/extensions/manager/types/comfyManagerTypes'
-
-defineProps<{
-  tabs: TabItem[]
-}>()
-
-const selectedTab = defineModel<TabItem>('selectedTab')
-</script>
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
index b6cd70a701..498a3bf57d 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
@@ -1,3 +1,80 @@
+<script setup lang="ts">
+import { filter, flatMap, map, some } from 'es-toolkit/compat'
+import Button from 'primevue/button'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import ContentDivider from '@/components/common/ContentDivider.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
+import type {
+  ConflictDetail,
+  ConflictDetectionResult
+} from '@/types/conflictDetectionTypes'
+import { getConflictMessage } from '@/utils/conflictMessageUtil'
+
+const { showAfterWhatsNew = false, conflictedPackages } = defineProps<{
+  showAfterWhatsNew?: boolean
+  conflictedPackages?: ConflictDetectionResult[]
+}>()
+
+const { t } = useI18n()
+const { conflictedPackages: globalConflictPackages } = useConflictDetection()
+
+const conflictsExpanded = ref<boolean>(false)
+const extensionsExpanded = ref<boolean>(false)
+const importFailedExpanded = ref<boolean>(false)
+
+const conflictData = computed(
+  () => conflictedPackages || globalConflictPackages.value
+)
+
+const allConflictDetails = computed(() => {
+  const allConflicts = flatMap(
+    conflictData.value,
+    (result: ConflictDetectionResult) => result.conflicts
+  )
+  return filter(
+    allConflicts,
+    (conflict: ConflictDetail) => conflict.type !== 'import_failed'
+  )
+})
+
+const packagesWithImportFailed = computed(() => {
+  return filter(conflictData.value, (result: ConflictDetectionResult) =>
+    some(
+      result.conflicts,
+      (conflict: ConflictDetail) => conflict.type === 'import_failed'
+    )
+  )
+})
+
+const importFailedConflicts = computed(() => {
+  return map(
+    packagesWithImportFailed.value,
+    (result: ConflictDetectionResult) =>
+      result.package_name || result.package_id
+  )
+})
+
+const toggleImportFailedPanel = () => {
+  importFailedExpanded.value = !importFailedExpanded.value
+  conflictsExpanded.value = false
+  extensionsExpanded.value = false
+}
+
+const toggleConflictsPanel = () => {
+  conflictsExpanded.value = !conflictsExpanded.value
+  extensionsExpanded.value = false
+  importFailedExpanded.value = false
+}
+
+const toggleExtensionsPanel = () => {
+  extensionsExpanded.value = !extensionsExpanded.value
+  conflictsExpanded.value = false
+  importFailedExpanded.value = false
+}
+</script>
+
 <template>
   <div class="w-[552px] flex flex-col">
     <ContentDivider :width="1" />
@@ -160,83 +237,6 @@
     <ContentDivider :width="1" />
   </div>
 </template>
-
-<script setup lang="ts">
-import { filter, flatMap, map, some } from 'es-toolkit/compat'
-import Button from 'primevue/button'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import ContentDivider from '@/components/common/ContentDivider.vue'
-import { useConflictDetection } from '@/composables/useConflictDetection'
-import type {
-  ConflictDetail,
-  ConflictDetectionResult
-} from '@/types/conflictDetectionTypes'
-import { getConflictMessage } from '@/utils/conflictMessageUtil'
-
-const { showAfterWhatsNew = false, conflictedPackages } = defineProps<{
-  showAfterWhatsNew?: boolean
-  conflictedPackages?: ConflictDetectionResult[]
-}>()
-
-const { t } = useI18n()
-const { conflictedPackages: globalConflictPackages } = useConflictDetection()
-
-const conflictsExpanded = ref<boolean>(false)
-const extensionsExpanded = ref<boolean>(false)
-const importFailedExpanded = ref<boolean>(false)
-
-const conflictData = computed(
-  () => conflictedPackages || globalConflictPackages.value
-)
-
-const allConflictDetails = computed(() => {
-  const allConflicts = flatMap(
-    conflictData.value,
-    (result: ConflictDetectionResult) => result.conflicts
-  )
-  return filter(
-    allConflicts,
-    (conflict: ConflictDetail) => conflict.type !== 'import_failed'
-  )
-})
-
-const packagesWithImportFailed = computed(() => {
-  return filter(conflictData.value, (result: ConflictDetectionResult) =>
-    some(
-      result.conflicts,
-      (conflict: ConflictDetail) => conflict.type === 'import_failed'
-    )
-  )
-})
-
-const importFailedConflicts = computed(() => {
-  return map(
-    packagesWithImportFailed.value,
-    (result: ConflictDetectionResult) =>
-      result.package_name || result.package_id
-  )
-})
-
-const toggleImportFailedPanel = () => {
-  importFailedExpanded.value = !importFailedExpanded.value
-  conflictsExpanded.value = false
-  extensionsExpanded.value = false
-}
-
-const toggleConflictsPanel = () => {
-  conflictsExpanded.value = !conflictsExpanded.value
-  extensionsExpanded.value = false
-  importFailedExpanded.value = false
-}
-
-const toggleExtensionsPanel = () => {
-  extensionsExpanded.value = !extensionsExpanded.value
-  conflictsExpanded.value = false
-  importFailedExpanded.value = false
-}
-</script>
 <style scoped>
 .conflict-list-item:hover {
   background-color: rgba(0, 122, 255, 0.2);
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue b/src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue
index c76f779080..6edfe8e39c 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex items-center justify-between w-full px-3 py-4">
-    <div class="w-full flex items-center justify-between gap-2 pr-1">
-      <Button
-        :label="$t('manager.conflicts.conflictInfoTitle')"
-        text
-        severity="secondary"
-        size="small"
-        icon="pi pi-info-circle"
-        :pt="{
-          label: { class: 'text-sm' }
-        }"
-        @click="handleConflictInfoClick"
-      />
-      <Button
-        v-if="props.buttonText"
-        :label="props.buttonText"
-        severity="secondary"
-        size="small"
-        @click="handleButtonClick"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 
@@ -52,3 +27,28 @@ const handleButtonClick = () => {
   }
 }
 </script>
+
+<template>
+  <div class="flex items-center justify-between w-full px-3 py-4">
+    <div class="w-full flex items-center justify-between gap-2 pr-1">
+      <Button
+        :label="$t('manager.conflicts.conflictInfoTitle')"
+        text
+        severity="secondary"
+        size="small"
+        icon="pi pi-info-circle"
+        :pt="{
+          label: { class: 'text-sm' }
+        }"
+        @click="handleConflictInfoClick"
+      />
+      <Button
+        v-if="props.buttonText"
+        :label="props.buttonText"
+        severity="secondary"
+        size="small"
+        @click="handleButtonClick"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue b/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
index eae2d565bf..b5586812cf 100644
--- a/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
+++ b/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
@@ -1,20 +1,3 @@
-<template>
-  <Message
-    :severity="statusSeverity"
-    class="p-0 flex items-center rounded-xl break-words w-fit"
-    :pt="{
-      text: { class: 'text-xs' },
-      content: { class: 'px-2 py-0.5' }
-    }"
-  >
-    <i
-      class="pi pi-circle-fill mr-1.5 text-[0.6rem] p-0"
-      :style="{ opacity: 0.8 }"
-    />
-    {{ $t(`manager.status.${statusLabel}`) }}
-  </Message>
-</template>
-
 <script setup lang="ts">
 import Message from 'primevue/message'
 import { computed, inject } from 'vue'
@@ -87,3 +70,20 @@ const statusSeverity = computed(() => {
   return statusPropsMap[statusType]?.severity || 'secondary'
 })
 </script>
+
+<template>
+  <Message
+    :severity="statusSeverity"
+    class="p-0 flex items-center rounded-xl break-words w-fit"
+    :pt="{
+      text: { class: 'text-xs' },
+      content: { class: 'px-2 py-0.5' }
+    }"
+  >
+    <i
+      class="pi pi-circle-fill mr-1.5 text-[0.6rem] p-0"
+      :style="{ opacity: 0.8 }"
+    />
+    {{ $t(`manager.status.${statusLabel}`) }}
+  </Message>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue b/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
index 204b2a78ec..89dac37668 100644
--- a/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
+++ b/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
@@ -1,46 +1,3 @@
-<template>
-  <div>
-    <div
-      v-tooltip.top="
-        isDisabled ? $t('manager.enablePackToChangeVersion') : null
-      "
-      class="inline-flex items-center gap-1 rounded-2xl text-xs py-1"
-      :class="{
-        'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill,
-        'cursor-pointer': !isDisabled,
-        'cursor-not-allowed opacity-60': isDisabled
-      }"
-      :aria-haspopup="!isDisabled"
-      :role="isDisabled ? 'text' : 'button'"
-      :tabindex="isDisabled ? -1 : 0"
-      @click="!isDisabled && toggleVersionSelector($event)"
-      @keydown.enter="!isDisabled && toggleVersionSelector($event)"
-      @keydown.space="!isDisabled && toggleVersionSelector($event)"
-    >
-      <i
-        v-if="isUpdateAvailable"
-        class="pi pi-arrow-circle-up text-blue-600 text-xs"
-      />
-      <span>{{ installedVersion }}</span>
-      <i v-if="!isDisabled" class="pi pi-chevron-right text-xxs" />
-    </div>
-
-    <Popover
-      ref="popoverRef"
-      :pt="{
-        content: { class: 'p-0 shadow-lg' }
-      }"
-    >
-      <PackVersionSelectorPopover
-        :installed-version="installedVersion"
-        :node-pack="nodePack"
-        @cancel="closeVersionSelector"
-        @submit="closeVersionSelector"
-      />
-    </Popover>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Popover from 'primevue/popover'
 import { valid as validSemver } from 'semver'
@@ -104,3 +61,46 @@ watch(
   }
 )
 </script>
+
+<template>
+  <div>
+    <div
+      v-tooltip.top="
+        isDisabled ? $t('manager.enablePackToChangeVersion') : null
+      "
+      class="inline-flex items-center gap-1 rounded-2xl text-xs py-1"
+      :class="{
+        'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill,
+        'cursor-pointer': !isDisabled,
+        'cursor-not-allowed opacity-60': isDisabled
+      }"
+      :aria-haspopup="!isDisabled"
+      :role="isDisabled ? 'text' : 'button'"
+      :tabindex="isDisabled ? -1 : 0"
+      @click="!isDisabled && toggleVersionSelector($event)"
+      @keydown.enter="!isDisabled && toggleVersionSelector($event)"
+      @keydown.space="!isDisabled && toggleVersionSelector($event)"
+    >
+      <i
+        v-if="isUpdateAvailable"
+        class="pi pi-arrow-circle-up text-blue-600 text-xs"
+      />
+      <span>{{ installedVersion }}</span>
+      <i v-if="!isDisabled" class="pi pi-chevron-right text-xxs" />
+    </div>
+
+    <Popover
+      ref="popoverRef"
+      :pt="{
+        content: { class: 'p-0 shadow-lg' }
+      }"
+    >
+      <PackVersionSelectorPopover
+        :installed-version="installedVersion"
+        :node-pack="nodePack"
+        @cancel="closeVersionSelector"
+        @submit="closeVersionSelector"
+      />
+    </Popover>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
index fc1271eed1..6e6b5c49ab 100644
--- a/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
+++ b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
@@ -1,84 +1,3 @@
-<template>
-  <div class="w-64 pt-1">
-    <div class="py-2">
-      <span class="pl-3 text-md font-semibold text-neutral-500">
-        {{ $t('manager.selectVersion') }}
-      </span>
-    </div>
-    <div
-      v-if="isLoadingVersions || isQueueing"
-      class="text-center text-muted py-4 flex flex-col items-center"
-    >
-      <ProgressSpinner class="w-8 h-8 mb-2" />
-      {{ $t('manager.loadingVersions') }}
-    </div>
-    <div v-else-if="versionOptions.length === 0" class="py-2">
-      <NoResultsPlaceholder
-        :title="$t('g.noResultsFound')"
-        :message="$t('manager.tryAgainLater')"
-        icon="pi pi-exclamation-circle"
-        class="p-0"
-      />
-    </div>
-    <Listbox
-      v-else
-      v-model="selectedVersion"
-      option-label="label"
-      option-value="value"
-      :options="processedVersionOptions"
-      :highlight-on-select="false"
-      class="w-full max-h-[50vh] border-none shadow-none rounded-md"
-      :pt="{
-        listContainer: { class: 'scrollbar-hide' }
-      }"
-    >
-      <template #option="slotProps">
-        <div class="flex justify-between items-center w-full p-1">
-          <div class="flex items-center gap-2">
-            <template v-if="slotProps.option.value === 'nightly'">
-              <div class="w-4"></div>
-            </template>
-            <template v-else>
-              <i
-                v-if="slotProps.option.hasConflict"
-                v-tooltip="{
-                  value: slotProps.option.conflictMessage,
-                  showDelay: 300
-                }"
-                class="pi pi-exclamation-triangle text-yellow-500"
-              />
-              <VerifiedIcon v-else :size="20" class="relative right-0.5" />
-            </template>
-            <span>{{ slotProps.option.label }}</span>
-          </div>
-          <i
-            v-if="slotProps.option.isSelected"
-            class="pi pi-check text-highlight"
-          />
-        </div>
-      </template>
-    </Listbox>
-    <ContentDivider class="my-2" />
-    <div class="flex justify-end gap-2 py-1 px-3">
-      <Button
-        text
-        class="text-sm"
-        severity="secondary"
-        :label="$t('g.cancel')"
-        :disabled="isQueueing"
-        @click="emit('cancel')"
-      />
-      <Button
-        severity="secondary"
-        :label="$t('g.install')"
-        class="py-2.5 px-4 text-sm dark-theme:bg-unset bg-black/80 dark-theme:text-unset text-neutral-100 rounded-lg"
-        :disabled="isQueueing"
-        @click="handleSubmit"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
 import Button from 'primevue/button'
@@ -312,3 +231,84 @@ const processedVersionOptions = computed(() => {
   })
 })
 </script>
+
+<template>
+  <div class="w-64 pt-1">
+    <div class="py-2">
+      <span class="pl-3 text-md font-semibold text-neutral-500">
+        {{ $t('manager.selectVersion') }}
+      </span>
+    </div>
+    <div
+      v-if="isLoadingVersions || isQueueing"
+      class="text-center text-muted py-4 flex flex-col items-center"
+    >
+      <ProgressSpinner class="w-8 h-8 mb-2" />
+      {{ $t('manager.loadingVersions') }}
+    </div>
+    <div v-else-if="versionOptions.length === 0" class="py-2">
+      <NoResultsPlaceholder
+        :title="$t('g.noResultsFound')"
+        :message="$t('manager.tryAgainLater')"
+        icon="pi pi-exclamation-circle"
+        class="p-0"
+      />
+    </div>
+    <Listbox
+      v-else
+      v-model="selectedVersion"
+      option-label="label"
+      option-value="value"
+      :options="processedVersionOptions"
+      :highlight-on-select="false"
+      class="w-full max-h-[50vh] border-none shadow-none rounded-md"
+      :pt="{
+        listContainer: { class: 'scrollbar-hide' }
+      }"
+    >
+      <template #option="slotProps">
+        <div class="flex justify-between items-center w-full p-1">
+          <div class="flex items-center gap-2">
+            <template v-if="slotProps.option.value === 'nightly'">
+              <div class="w-4"></div>
+            </template>
+            <template v-else>
+              <i
+                v-if="slotProps.option.hasConflict"
+                v-tooltip="{
+                  value: slotProps.option.conflictMessage,
+                  showDelay: 300
+                }"
+                class="pi pi-exclamation-triangle text-yellow-500"
+              />
+              <VerifiedIcon v-else :size="20" class="relative right-0.5" />
+            </template>
+            <span>{{ slotProps.option.label }}</span>
+          </div>
+          <i
+            v-if="slotProps.option.isSelected"
+            class="pi pi-check text-highlight"
+          />
+        </div>
+      </template>
+    </Listbox>
+    <ContentDivider class="my-2" />
+    <div class="flex justify-end gap-2 py-1 px-3">
+      <Button
+        text
+        class="text-sm"
+        severity="secondary"
+        :label="$t('g.cancel')"
+        :disabled="isQueueing"
+        @click="emit('cancel')"
+      />
+      <Button
+        severity="secondary"
+        :label="$t('g.install')"
+        class="py-2.5 px-4 text-sm dark-theme:bg-unset bg-black/80 dark-theme:text-unset text-neutral-100 rounded-lg"
+        :disabled="isQueueing"
+        @click="handleSubmit"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
index 18786757d1..978c02366d 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
@@ -1,33 +1,3 @@
-<template>
-  <div class="flex items-center gap-2">
-    <div
-      v-if="hasConflict"
-      v-tooltip="{
-        value: $t('manager.conflicts.warningTooltip'),
-        showDelay: 300
-      }"
-      class="flex items-center justify-center w-6 h-6 cursor-pointer"
-      @click="showConflictModal(true)"
-    >
-      <i class="pi pi-exclamation-triangle text-yellow-500 text-xl"></i>
-    </div>
-    <ToggleSwitch
-      v-if="!canToggleDirectly"
-      :model-value="isEnabled"
-      :disabled="isLoading"
-      :readonly="!canToggleDirectly"
-      aria-label="Enable or disable pack"
-      @focus="handleToggleInteraction"
-    />
-    <ToggleSwitch
-      v-else
-      :model-value="isEnabled"
-      :disabled="isLoading"
-      aria-label="Enable or disable pack"
-      @update:model-value="onToggle"
-    />
-  </div>
-</template>
 <script setup lang="ts">
 import { debounce } from 'es-toolkit/compat'
 import ToggleSwitch from 'primevue/toggleswitch'
@@ -159,3 +129,33 @@ const handleToggleInteraction = async (event: Event) => {
   }
 }
 </script>
+<template>
+  <div class="flex items-center gap-2">
+    <div
+      v-if="hasConflict"
+      v-tooltip="{
+        value: $t('manager.conflicts.warningTooltip'),
+        showDelay: 300
+      }"
+      class="flex items-center justify-center w-6 h-6 cursor-pointer"
+      @click="showConflictModal(true)"
+    >
+      <i class="pi pi-exclamation-triangle text-yellow-500 text-xl"></i>
+    </div>
+    <ToggleSwitch
+      v-if="!canToggleDirectly"
+      :model-value="isEnabled"
+      :disabled="isLoading"
+      :readonly="!canToggleDirectly"
+      aria-label="Enable or disable pack"
+      @focus="handleToggleInteraction"
+    />
+    <ToggleSwitch
+      v-else
+      :model-value="isEnabled"
+      :disabled="isLoading"
+      aria-label="Enable or disable pack"
+      @update:model-value="onToggle"
+    />
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue b/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
index 939bd34dad..ad66b41252 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
@@ -1,27 +1,3 @@
-<template>
-  <IconTextButton
-    v-bind="$attrs"
-    type="transparent"
-    :label="computedLabel"
-    :border="true"
-    :size="size"
-    :disabled="isLoading || isInstalling"
-    @click="installAllPacks"
-  >
-    <template #icon>
-      <i
-        v-if="hasConflict && !isInstalling && !isLoading"
-        class="pi pi-exclamation-triangle text-yellow-500"
-      />
-      <DotSpinner
-        v-else-if="isLoading || isInstalling"
-        duration="1s"
-        :size="size === 'sm' ? 12 : 16"
-      />
-    </template>
-  </IconTextButton>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -142,3 +118,27 @@ const computedLabel = computed(() =>
       (nodePacks.length > 1 ? t('manager.installSelected') : t('g.install'))
 )
 </script>
+
+<template>
+  <IconTextButton
+    v-bind="$attrs"
+    type="transparent"
+    :label="computedLabel"
+    :border="true"
+    :size="size"
+    :disabled="isLoading || isInstalling"
+    @click="installAllPacks"
+  >
+    <template #icon>
+      <i
+        v-if="hasConflict && !isInstalling && !isLoading"
+        class="pi pi-exclamation-triangle text-yellow-500"
+      />
+      <DotSpinner
+        v-else-if="isLoading || isInstalling"
+        duration="1s"
+        :size="size === 'sm' ? 12 : 16"
+      />
+    </template>
+  </IconTextButton>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue b/src/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue
index 1f8bce0ee0..ee282f108a 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue
@@ -1,19 +1,3 @@
-<template>
-  <IconTextButton
-    v-bind="$attrs"
-    type="transparent"
-    :label="
-      nodePacks.length > 1
-        ? $t('manager.uninstallSelected')
-        : $t('manager.uninstall')
-    "
-    :border="true"
-    :size="size"
-    class="border-red-500"
-    @click="uninstallItems"
-  />
-</template>
-
 <script setup lang="ts">
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import type { ButtonSize } from '@/types/buttonTypes'
@@ -51,3 +35,19 @@ const uninstallItems = async () => {
   await Promise.all(nodePacks.map(uninstallPack))
 }
 </script>
+
+<template>
+  <IconTextButton
+    v-bind="$attrs"
+    type="transparent"
+    :label="
+      nodePacks.length > 1
+        ? $t('manager.uninstallSelected')
+        : $t('manager.uninstall')
+    "
+    :border="true"
+    :size="size"
+    class="border-red-500"
+    @click="uninstallItems"
+  />
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue b/src/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue
index f62efd7a3b..dbf9391789 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue
@@ -1,22 +1,3 @@
-<template>
-  <IconTextButton
-    v-tooltip.top="
-      hasDisabledUpdatePacks ? $t('manager.disabledNodesWontUpdate') : null
-    "
-    v-bind="$attrs"
-    type="transparent"
-    :label="$t('manager.updateAll')"
-    :border="true"
-    size="sm"
-    :disabled="isUpdating"
-    @click="updateAllPacks"
-  >
-    <template v-if="isUpdating" #icon>
-      <DotSpinner duration="1s" :size="12" />
-    </template>
-  </IconTextButton>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue'
 
@@ -81,3 +62,22 @@ const updateAllPacks = async () => {
   }
 }
 </script>
+
+<template>
+  <IconTextButton
+    v-tooltip.top="
+      hasDisabledUpdatePacks ? $t('manager.disabledNodesWontUpdate') : null
+    "
+    v-bind="$attrs"
+    type="transparent"
+    :label="$t('manager.updateAll')"
+    :border="true"
+    size="sm"
+    :disabled="isUpdating"
+    @click="updateAllPacks"
+  >
+    <template v-if="isUpdating" #icon>
+      <DotSpinner duration="1s" :size="12" />
+    </template>
+  </IconTextButton>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
index 46d48cfb6c..4ca83161b3 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
@@ -1,64 +1,3 @@
-<template>
-  <template v-if="nodePack">
-    <div class="flex flex-col h-full z-40 overflow-hidden relative">
-      <div class="top-0 z-10 px-6 pt-6 w-full">
-        <InfoPanelHeader
-          :node-packs="[nodePack]"
-          :has-conflict="hasCompatibilityIssues"
-        />
-      </div>
-      <div
-        ref="scrollContainer"
-        class="p-6 pt-2 overflow-y-auto flex-1 text-sm scrollbar-hide"
-      >
-        <div class="mb-6">
-          <MetadataRow
-            v-if="!importFailed && isPackInstalled(nodePack.id)"
-            :label="t('manager.filter.enabled')"
-            class="flex"
-            style="align-items: center"
-          >
-            <PackEnableToggle
-              :node-pack="nodePack"
-              :has-conflict="hasCompatibilityIssues"
-            />
-          </MetadataRow>
-          <MetadataRow
-            v-for="item in infoItems"
-            v-show="item.value !== undefined && item.value !== null"
-            :key="item.key"
-            :label="item.label"
-            :value="item.value"
-          />
-          <MetadataRow :label="t('g.status')">
-            <PackStatusMessage
-              :status-type="
-                nodePack.status as components['schemas']['NodeVersionStatus']
-              "
-              :has-compatibility-issues="hasCompatibilityIssues"
-            />
-          </MetadataRow>
-          <MetadataRow :label="t('manager.version')">
-            <PackVersionBadge :node-pack="nodePack" :is-selected="true" />
-          </MetadataRow>
-        </div>
-        <div class="mb-6 overflow-hidden">
-          <InfoTabs
-            :node-pack="nodePack"
-            :has-compatibility-issues="hasCompatibilityIssues"
-            :conflict-result="conflictResult"
-          />
-        </div>
-      </div>
-    </div>
-  </template>
-  <template v-else>
-    <div class="pt-4 px-8 flex-1 overflow-hidden text-sm">
-      {{ $t('manager.infoPanelEmpty') }}
-    </div>
-  </template>
-</template>
-
 <script setup lang="ts">
 import { useScroll, whenever } from '@vueuse/core'
 import { computed, provide, ref } from 'vue'
@@ -181,3 +120,64 @@ whenever(
   { immediate: true }
 )
 </script>
+
+<template>
+  <template v-if="nodePack">
+    <div class="flex flex-col h-full z-40 overflow-hidden relative">
+      <div class="top-0 z-10 px-6 pt-6 w-full">
+        <InfoPanelHeader
+          :node-packs="[nodePack]"
+          :has-conflict="hasCompatibilityIssues"
+        />
+      </div>
+      <div
+        ref="scrollContainer"
+        class="p-6 pt-2 overflow-y-auto flex-1 text-sm scrollbar-hide"
+      >
+        <div class="mb-6">
+          <MetadataRow
+            v-if="!importFailed && isPackInstalled(nodePack.id)"
+            :label="t('manager.filter.enabled')"
+            class="flex"
+            style="align-items: center"
+          >
+            <PackEnableToggle
+              :node-pack="nodePack"
+              :has-conflict="hasCompatibilityIssues"
+            />
+          </MetadataRow>
+          <MetadataRow
+            v-for="item in infoItems"
+            v-show="item.value !== undefined && item.value !== null"
+            :key="item.key"
+            :label="item.label"
+            :value="item.value"
+          />
+          <MetadataRow :label="t('g.status')">
+            <PackStatusMessage
+              :status-type="
+                nodePack.status as components['schemas']['NodeVersionStatus']
+              "
+              :has-compatibility-issues="hasCompatibilityIssues"
+            />
+          </MetadataRow>
+          <MetadataRow :label="t('manager.version')">
+            <PackVersionBadge :node-pack="nodePack" :is-selected="true" />
+          </MetadataRow>
+        </div>
+        <div class="mb-6 overflow-hidden">
+          <InfoTabs
+            :node-pack="nodePack"
+            :has-compatibility-issues="hasCompatibilityIssues"
+            :conflict-result="conflictResult"
+          />
+        </div>
+      </div>
+    </div>
+  </template>
+  <template v-else>
+    <div class="pt-4 px-8 flex-1 overflow-hidden text-sm">
+      {{ $t('manager.infoPanelEmpty') }}
+    </div>
+  </template>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue
index 2b0b5133e8..a7f8368440 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue
@@ -1,46 +1,3 @@
-<template>
-  <div v-if="nodePacks?.length" class="flex flex-col items-center">
-    <slot name="thumbnail">
-      <PackIcon :node-pack="nodePacks[0]" width="204" height="106" />
-    </slot>
-    <h2
-      class="text-2xl font-bold text-center mt-4 mb-2"
-      style="word-break: break-all"
-    >
-      <slot name="title">
-        <span class="inline-block text-base">{{ nodePacks[0].name }}</span>
-      </slot>
-    </h2>
-    <div
-      v-if="!importFailed"
-      class="mt-2 mb-4 w-full max-w-xs flex justify-center"
-    >
-      <slot name="install-button">
-        <PackUninstallButton
-          v-if="isAllInstalled"
-          v-bind="$attrs"
-          size="md"
-          :node-packs="nodePacks"
-        />
-        <PackInstallButton
-          v-else
-          v-bind="$attrs"
-          size="md"
-          :node-packs="nodePacks"
-          :has-conflict="hasConflict || computedHasConflict"
-          :conflict-info="conflictInfo"
-        />
-      </slot>
-    </div>
-  </div>
-  <div v-else class="flex flex-col items-center">
-    <NoResultsPlaceholder
-      :message="$t('manager.status.unknown')"
-      :title="$t('manager.tryAgainLater')"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, inject, ref, watch } from 'vue'
 
@@ -95,3 +52,46 @@ const conflictInfo = computed<ConflictDetail[]>(() => {
 
 const computedHasConflict = computed(() => conflictInfo.value.length > 0)
 </script>
+
+<template>
+  <div v-if="nodePacks?.length" class="flex flex-col items-center">
+    <slot name="thumbnail">
+      <PackIcon :node-pack="nodePacks[0]" width="204" height="106" />
+    </slot>
+    <h2
+      class="text-2xl font-bold text-center mt-4 mb-2"
+      style="word-break: break-all"
+    >
+      <slot name="title">
+        <span class="inline-block text-base">{{ nodePacks[0].name }}</span>
+      </slot>
+    </h2>
+    <div
+      v-if="!importFailed"
+      class="mt-2 mb-4 w-full max-w-xs flex justify-center"
+    >
+      <slot name="install-button">
+        <PackUninstallButton
+          v-if="isAllInstalled"
+          v-bind="$attrs"
+          size="md"
+          :node-packs="nodePacks"
+        />
+        <PackInstallButton
+          v-else
+          v-bind="$attrs"
+          size="md"
+          :node-packs="nodePacks"
+          :has-conflict="hasConflict || computedHasConflict"
+          :conflict-info="conflictInfo"
+        />
+      </slot>
+    </div>
+  </div>
+  <div v-else class="flex flex-col items-center">
+    <NoResultsPlaceholder
+      :message="$t('manager.status.unknown')"
+      :title="$t('manager.tryAgainLater')"
+    />
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
index cf1a75436b..606486db1d 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
@@ -1,58 +1,3 @@
-<template>
-  <div v-if="nodePacks?.length" class="flex flex-col h-full">
-    <div class="p-6 flex-1 overflow-auto">
-      <InfoPanelHeader :node-packs>
-        <template #thumbnail>
-          <PackIconStacked :node-packs="nodePacks" />
-        </template>
-        <template #title>
-          <div class="mt-5">
-            <span class="inline-block mr-2 text-blue-500 text-base">{{
-              nodePacks.length
-            }}</span>
-            <span class="text-base">{{ $t('manager.packsSelected') }}</span>
-          </div>
-        </template>
-        <template #install-button>
-          <!-- Mixed: Don't show any button -->
-          <div v-if="isMixed" class="text-sm text-neutral-500">
-            {{ $t('manager.mixedSelectionMessage') }}
-          </div>
-          <!-- All installed: Show uninstall button -->
-          <PackUninstallButton
-            v-else-if="isAllInstalled"
-            size="md"
-            :node-packs="installedPacks"
-          />
-          <!-- None installed: Show install button -->
-          <PackInstallButton
-            v-else-if="isNoneInstalled"
-            size="md"
-            :node-packs="notInstalledPacks"
-            :has-conflict="hasConflicts"
-            :conflict-info="conflictInfo"
-          />
-        </template>
-      </InfoPanelHeader>
-      <div class="mb-6">
-        <MetadataRow :label="$t('g.status')">
-          <PackStatusMessage
-            :status-type="overallStatus"
-            :has-compatibility-issues="hasConflicts"
-          />
-        </MetadataRow>
-        <MetadataRow
-          :label="$t('manager.totalNodes')"
-          :value="totalNodesCount"
-        />
-      </div>
-    </div>
-  </div>
-  <div v-else class="mt-4 mx-8 flex-1 overflow-hidden text-sm">
-    {{ $t('manager.infoPanelEmpty') }}
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
 import { computed, onUnmounted, provide, toRef } from 'vue'
@@ -161,3 +106,58 @@ onUnmounted(() => {
   getNodeDefs.cancel()
 })
 </script>
+
+<template>
+  <div v-if="nodePacks?.length" class="flex flex-col h-full">
+    <div class="p-6 flex-1 overflow-auto">
+      <InfoPanelHeader :node-packs>
+        <template #thumbnail>
+          <PackIconStacked :node-packs="nodePacks" />
+        </template>
+        <template #title>
+          <div class="mt-5">
+            <span class="inline-block mr-2 text-blue-500 text-base">{{
+              nodePacks.length
+            }}</span>
+            <span class="text-base">{{ $t('manager.packsSelected') }}</span>
+          </div>
+        </template>
+        <template #install-button>
+          <!-- Mixed: Don't show any button -->
+          <div v-if="isMixed" class="text-sm text-neutral-500">
+            {{ $t('manager.mixedSelectionMessage') }}
+          </div>
+          <!-- All installed: Show uninstall button -->
+          <PackUninstallButton
+            v-else-if="isAllInstalled"
+            size="md"
+            :node-packs="installedPacks"
+          />
+          <!-- None installed: Show install button -->
+          <PackInstallButton
+            v-else-if="isNoneInstalled"
+            size="md"
+            :node-packs="notInstalledPacks"
+            :has-conflict="hasConflicts"
+            :conflict-info="conflictInfo"
+          />
+        </template>
+      </InfoPanelHeader>
+      <div class="mb-6">
+        <MetadataRow :label="$t('g.status')">
+          <PackStatusMessage
+            :status-type="overallStatus"
+            :has-compatibility-issues="hasConflicts"
+          />
+        </MetadataRow>
+        <MetadataRow
+          :label="$t('manager.totalNodes')"
+          :value="totalNodesCount"
+        />
+      </div>
+    </div>
+  </div>
+  <div v-else class="mt-4 mx-8 flex-1 overflow-hidden text-sm">
+    {{ $t('manager.infoPanelEmpty') }}
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
index a66ff6eca4..5be4f31ee2 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
@@ -1,42 +1,3 @@
-<template>
-  <div class="overflow-hidden">
-    <Tabs :value="activeTab">
-      <TabList class="overflow-x-auto scrollbar-hide">
-        <Tab v-if="hasCompatibilityIssues" value="warning" class="p-2 mr-6">
-          <div class="flex items-center gap-1">
-            <span>⚠️</span>
-            {{ importFailed ? $t('g.error') : $t('g.warning') }}
-          </div>
-        </Tab>
-        <Tab value="description" class="p-2 mr-6">
-          {{ $t('g.description') }}
-        </Tab>
-        <Tab value="nodes" class="p-2">
-          {{ $t('g.nodes') }}
-        </Tab>
-      </TabList>
-      <TabPanels class="overflow-auto py-4 px-2">
-        <TabPanel
-          v-if="hasCompatibilityIssues"
-          value="warning"
-          class="bg-transparent"
-        >
-          <WarningTabPanel
-            :node-pack="nodePack"
-            :conflict-result="conflictResult"
-          />
-        </TabPanel>
-        <TabPanel value="description">
-          <DescriptionTabPanel :node-pack="nodePack" />
-        </TabPanel>
-        <TabPanel value="nodes">
-          <NodesTabPanel :node-pack="nodePack" :node-names="nodeNames" />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-  </div>
-</template>
-
 <script setup lang="ts">
 import Tab from 'primevue/tab'
 import TabList from 'primevue/tablist'
@@ -83,3 +44,42 @@ watchEffect(
   { flush: 'post' }
 )
 </script>
+
+<template>
+  <div class="overflow-hidden">
+    <Tabs :value="activeTab">
+      <TabList class="overflow-x-auto scrollbar-hide">
+        <Tab v-if="hasCompatibilityIssues" value="warning" class="p-2 mr-6">
+          <div class="flex items-center gap-1">
+            <span>⚠️</span>
+            {{ importFailed ? $t('g.error') : $t('g.warning') }}
+          </div>
+        </Tab>
+        <Tab value="description" class="p-2 mr-6">
+          {{ $t('g.description') }}
+        </Tab>
+        <Tab value="nodes" class="p-2">
+          {{ $t('g.nodes') }}
+        </Tab>
+      </TabList>
+      <TabPanels class="overflow-auto py-4 px-2">
+        <TabPanel
+          v-if="hasCompatibilityIssues"
+          value="warning"
+          class="bg-transparent"
+        >
+          <WarningTabPanel
+            :node-pack="nodePack"
+            :conflict-result="conflictResult"
+          />
+        </TabPanel>
+        <TabPanel value="description">
+          <DescriptionTabPanel :node-pack="nodePack" />
+        </TabPanel>
+        <TabPanel value="nodes">
+          <NodesTabPanel :node-pack="nodePack" :node-names="nodeNames" />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue
index ce78dabb70..306769195a 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import MarkdownText from '@/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue'
+
+export interface TextSection {
+  title: string
+  text: string
+  isUrl?: boolean
+}
+
+defineProps<{
+  sections: TextSection[]
+}>()
+
+const isGitHubLink = (url: string): boolean => url.includes('github.com')
+</script>
+
 <template>
   <div class="flex flex-col gap-4 text-sm">
     <div v-for="(section, index) in sections" :key="index" class="mb-4">
@@ -20,19 +36,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import MarkdownText from '@/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue'
-
-export interface TextSection {
-  title: string
-  text: string
-  isUrl?: boolean
-}
-
-defineProps<{
-  sections: TextSection[]
-}>()
-
-const isGitHubLink = (url: string): boolean => url.includes('github.com')
-</script>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue b/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
index feca3a07ca..2bfeb7aa91 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
@@ -1,30 +1,3 @@
-<template>
-  <div>
-    <div v-if="!hasMarkdown" class="break-words" v-text="text" />
-    <div v-else class="break-words">
-      <template v-for="(segment, index) in parsedSegments" :key="index">
-        <a
-          v-if="segment.type === 'link' && 'url' in segment"
-          :href="segment.url"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="hover:underline"
-        >
-          <span class="text-blue-600">{{ segment.text }}</span>
-        </a>
-        <strong v-else-if="segment.type === 'bold'">{{ segment.text }}</strong>
-        <em v-else-if="segment.type === 'italic'">{{ segment.text }}</em>
-        <code
-          v-else-if="segment.type === 'code'"
-          class="px-1 py-0.5 rounded text-xs"
-          >{{ segment.text }}</code
-        >
-        <span v-else>{{ segment.text }}</span>
-      </template>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -106,3 +79,30 @@ const parsedSegments = computed(() => {
   return segments
 })
 </script>
+
+<template>
+  <div>
+    <div v-if="!hasMarkdown" class="break-words" v-text="text" />
+    <div v-else class="break-words">
+      <template v-for="(segment, index) in parsedSegments" :key="index">
+        <a
+          v-if="segment.type === 'link' && 'url' in segment"
+          :href="segment.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="hover:underline"
+        >
+          <span class="text-blue-600">{{ segment.text }}</span>
+        </a>
+        <strong v-else-if="segment.type === 'bold'">{{ segment.text }}</strong>
+        <em v-else-if="segment.type === 'italic'">{{ segment.text }}</em>
+        <code
+          v-else-if="segment.type === 'code'"
+          class="px-1 py-0.5 rounded text-xs"
+          >{{ segment.text }}</code
+        >
+        <span v-else>{{ segment.text }}</span>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue b/src/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue
index 56436b9f0c..70cfb500a6 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+const { value = 'N/A', label } = defineProps<{
+  label: string
+  value?: string | number
+}>()
+</script>
+
 <template>
   <div class="flex py-1.5 text-xs">
     <div class="w-1/3 truncate pr-2 text-muted">{{ label }}</div>
@@ -6,10 +13,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-const { value = 'N/A', label } = defineProps<{
-  label: string
-  value?: string | number
-}>()
-</script>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
index 915ddcf377..12863aa809 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="overflow-hidden">
-    <InfoTextSection
-      v-if="nodePack?.description"
-      :sections="descriptionSections"
-    />
-    <p v-else class="text-muted italic text-sm">
-      {{ $t('manager.noDescription') }}
-    </p>
-    <div v-if="nodePack?.latest_version?.dependencies?.length">
-      <p class="mb-1">
-        {{ $t('manager.dependencies') }}
-      </p>
-      <div
-        v-for="(dep, index) in nodePack.latest_version.dependencies"
-        :key="index"
-        class="text-muted break-words"
-      >
-        {{ dep }}
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -149,3 +125,27 @@ const descriptionSections = computed<TextSection[]>(() => {
   return sections
 })
 </script>
+
+<template>
+  <div class="overflow-hidden">
+    <InfoTextSection
+      v-if="nodePack?.description"
+      :sections="descriptionSections"
+    />
+    <p v-else class="text-muted italic text-sm">
+      {{ $t('manager.noDescription') }}
+    </p>
+    <div v-if="nodePack?.latest_version?.dependencies?.length">
+      <p class="mb-1">
+        {{ $t('manager.dependencies') }}
+      </p>
+      <div
+        v-for="(dep, index) in nodePack.latest_version.dependencies"
+        :key="index"
+        class="text-muted break-words"
+      >
+        {{ dep }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
index e832f11266..a18a5841c0 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
@@ -1,31 +1,3 @@
-<template>
-  <div class="flex flex-col gap-4 text-sm">
-    <template v-if="mappedNodeDefs?.length">
-      <div
-        v-for="nodeDef in mappedNodeDefs"
-        :key="createNodeDefKey(nodeDef)"
-        class="border rounded-lg p-4"
-      >
-        <NodePreview :node-def="nodeDef" class="text-[.625rem]! min-w-full!" />
-      </div>
-    </template>
-    <template v-else-if="isLoading">
-      <ProgressSpinner />
-    </template>
-    <template v-else-if="nodeNames.length">
-      <div v-for="node in nodeNames" :key="node" class="text-muted truncate">
-        {{ node }}
-      </div>
-    </template>
-    <template v-else>
-      <NoResultsPlaceholder
-        :title="$t('manager.noNodesFound')"
-        :message="$t('manager.noNodesFoundDescription')"
-      />
-    </template>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -91,3 +63,31 @@ const mappedNodeDefs = computed(() => {
 const createNodeDefKey = (nodeDef: components['schemas']['ComfyNode']) =>
   `${nodeDef.category}${nodeDef.comfy_node_name ?? useId()}`
 </script>
+
+<template>
+  <div class="flex flex-col gap-4 text-sm">
+    <template v-if="mappedNodeDefs?.length">
+      <div
+        v-for="nodeDef in mappedNodeDefs"
+        :key="createNodeDefKey(nodeDef)"
+        class="border rounded-lg p-4"
+      >
+        <NodePreview :node-def="nodeDef" class="text-[.625rem]! min-w-full!" />
+      </div>
+    </template>
+    <template v-else-if="isLoading">
+      <ProgressSpinner />
+    </template>
+    <template v-else-if="nodeNames.length">
+      <div v-for="node in nodeNames" :key="node" class="text-muted truncate">
+        {{ node }}
+      </div>
+    </template>
+    <template v-else>
+      <NoResultsPlaceholder
+        :title="$t('manager.noNodesFound')"
+        :message="$t('manager.noNodesFoundDescription')"
+      />
+    </template>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
index a992975f85..c677c84d94 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
+import { t } from '@/i18n'
+import type { components } from '@/types/comfyRegistryTypes'
+import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import { getConflictMessage } from '@/utils/conflictMessageUtil'
+
+const { nodePack, conflictResult } = defineProps<{
+  nodePack: components['schemas']['Node']
+  conflictResult: ConflictDetectionResult | null | undefined
+}>()
+const packageId = computed(() => nodePack?.id || '')
+const { importFailedInfo, showImportFailedDialog } =
+  useImportFailedDetection(packageId)
+</script>
+
 <template>
   <div class="flex flex-col gap-3">
     <button
@@ -23,21 +41,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
-import { t } from '@/i18n'
-import type { components } from '@/types/comfyRegistryTypes'
-import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
-import { getConflictMessage } from '@/utils/conflictMessageUtil'
-
-const { nodePack, conflictResult } = defineProps<{
-  nodePack: components['schemas']['Node']
-  conflictResult: ConflictDetectionResult | null | undefined
-}>()
-const packageId = computed(() => nodePack?.id || '')
-const { importFailedInfo, showImportFailedDialog } =
-  useImportFailedDetection(packageId)
-</script>
diff --git a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
index e5b5ea60c9..6a03f0b5a4 100644
--- a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
+++ b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import type { components } from '@/types/comfyRegistryTypes'
+
+const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
+
+const { nodePack } = defineProps<{
+  nodePack: components['schemas']['Node']
+}>()
+
+const isImageError = ref(false)
+
+const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
+const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
+</script>
+
 <template>
   <div class="w-full aspect-7/3 overflow-hidden">
     <!-- default banner show -->
@@ -33,20 +50,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import type { components } from '@/types/comfyRegistryTypes'
-
-const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
-
-const { nodePack } = defineProps<{
-  nodePack: components['schemas']['Node']
-}>()
-
-const isImageError = ref(false)
-
-const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
-const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
-</script>
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
index da2f673380..05fdb0012e 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
@@ -1,3 +1,62 @@
+<script setup lang="ts">
+import Card from 'primevue/card'
+import { computed, provide } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import PackVersionBadge from '@/workbench/extensions/manager/components/manager/PackVersionBadge.vue'
+import PackBanner from '@/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue'
+import PackCardFooter from '@/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import {
+  IsInstallingKey,
+  type MergedNodePack,
+  type RegistryPack,
+  isMergedNodePack
+} from '@/workbench/extensions/manager/types/comfyManagerTypes'
+
+const { nodePack, isSelected = false } = defineProps<{
+  nodePack: MergedNodePack | RegistryPack
+  isSelected?: boolean
+}>()
+
+const { d } = useI18n()
+
+const colorPaletteStore = useColorPaletteStore()
+const isLightTheme = computed(
+  () => colorPaletteStore.completedActivePalette.light_theme
+)
+
+const { isPackInstalled, isPackEnabled, isPackInstalling } =
+  useComfyManagerStore()
+
+const isInstalling = computed(() => isPackInstalling(nodePack?.id))
+provide(IsInstallingKey, isInstalling)
+
+const isInstalled = computed(() => isPackInstalled(nodePack?.id))
+const isDisabled = computed(
+  () => isInstalled.value && !isPackEnabled(nodePack?.id)
+)
+
+const nodesCount = computed(() =>
+  isMergedNodePack(nodePack) ? nodePack.comfy_nodes?.length : undefined
+)
+const publisherName = computed(() => {
+  if (!nodePack) return null
+
+  const { publisher, author } = nodePack
+  return publisher?.name ?? publisher?.id ?? author
+})
+
+const formattedLatestVersionDate = computed(() => {
+  if (!nodePack.latest_version?.createdAt) return null
+
+  return d(new Date(nodePack.latest_version.createdAt), {
+    dateStyle: 'medium'
+  })
+})
+</script>
+
 <template>
   <Card
     class="w-full h-full inline-flex flex-col justify-between items-start overflow-hidden rounded-lg shadow-elevation-3 dark-theme:bg-dark-elevation-2 transition-all duration-200"
@@ -70,65 +129,6 @@
   </Card>
 </template>
 
-<script setup lang="ts">
-import Card from 'primevue/card'
-import { computed, provide } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import PackVersionBadge from '@/workbench/extensions/manager/components/manager/PackVersionBadge.vue'
-import PackBanner from '@/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue'
-import PackCardFooter from '@/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue'
-import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
-import {
-  IsInstallingKey,
-  type MergedNodePack,
-  type RegistryPack,
-  isMergedNodePack
-} from '@/workbench/extensions/manager/types/comfyManagerTypes'
-
-const { nodePack, isSelected = false } = defineProps<{
-  nodePack: MergedNodePack | RegistryPack
-  isSelected?: boolean
-}>()
-
-const { d } = useI18n()
-
-const colorPaletteStore = useColorPaletteStore()
-const isLightTheme = computed(
-  () => colorPaletteStore.completedActivePalette.light_theme
-)
-
-const { isPackInstalled, isPackEnabled, isPackInstalling } =
-  useComfyManagerStore()
-
-const isInstalling = computed(() => isPackInstalling(nodePack?.id))
-provide(IsInstallingKey, isInstalling)
-
-const isInstalled = computed(() => isPackInstalled(nodePack?.id))
-const isDisabled = computed(
-  () => isInstalled.value && !isPackEnabled(nodePack?.id)
-)
-
-const nodesCount = computed(() =>
-  isMergedNodePack(nodePack) ? nodePack.comfy_nodes?.length : undefined
-)
-const publisherName = computed(() => {
-  if (!nodePack) return null
-
-  const { publisher, author } = nodePack
-  return publisher?.name ?? publisher?.id ?? author
-})
-
-const formattedLatestVersionDate = computed(() => {
-  if (!nodePack.latest_version?.createdAt) return null
-
-  return d(new Date(nodePack.latest_version.createdAt), {
-    dateStyle: 'medium'
-  })
-})
-</script>
-
 <style scoped>
 .selected-card {
   position: relative;
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
index 410843b0f2..a126c934d6 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
@@ -1,26 +1,3 @@
-<template>
-  <div
-    class="min-h-12 flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
-  >
-    <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
-      <i class="pi pi-download text-muted"></i>
-      <span>{{ formattedDownloads }}</span>
-    </div>
-    <PackInstallButton
-      v-if="!isInstalled"
-      :node-packs="[nodePack]"
-      :is-installing="isInstalling"
-      :has-conflict="hasConflicts"
-      :conflict-info="conflictInfo"
-    />
-    <PackEnableToggle
-      v-else
-      :has-conflict="hasConflicts"
-      :node-pack="nodePack"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -59,3 +36,26 @@ const conflictInfo = computed<ConflictDetail[]>(() => {
 
 const hasConflicts = computed(() => conflictInfo.value.length > 0)
 </script>
+
+<template>
+  <div
+    class="min-h-12 flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
+  >
+    <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
+      <i class="pi pi-download text-muted"></i>
+      <span>{{ formattedDownloads }}</span>
+    </div>
+    <PackInstallButton
+      v-if="!isInstalled"
+      :node-packs="[nodePack]"
+      :is-installing="isInstalling"
+      :has-conflict="hasConflicts"
+      :conflict-info="conflictInfo"
+    />
+    <PackEnableToggle
+      v-else
+      :has-conflict="hasConflicts"
+      :node-pack="nodePack"
+    />
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue b/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
index e0dfc6497e..b45a85fcc4 100644
--- a/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
+++ b/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import type { components } from '@/types/comfyRegistryTypes'
+
+const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
+
+const { nodePack } = defineProps<{
+  nodePack: components['schemas']['Node']
+}>()
+
+const isImageError = ref(false)
+
+const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
+const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
+</script>
+
 <template>
   <div class="w-full max-w-[204] aspect-[2/1] rounded-lg overflow-hidden">
     <!-- default banner show -->
@@ -33,20 +50,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import type { components } from '@/types/comfyRegistryTypes'
-
-const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
-
-const { nodePack } = defineProps<{
-  nodePack: components['schemas']['Node']
-}>()
-
-const isImageError = ref(false)
-
-const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
-const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
-</script>
diff --git a/src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue b/src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue
index be9a7297ca..711ada5ce0 100644
--- a/src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue
+++ b/src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue
@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import type { components } from '@/types/comfyRegistryTypes'
+import PackIcon from '@/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue'
+
+const {
+  nodePacks,
+  maxVisible = 3,
+  offset = 8
+} = defineProps<{
+  nodePacks: components['schemas']['Node'][]
+  maxVisible?: number
+  offset?: number
+}>()
+</script>
+
 <template>
   <div class="relative w-[224px] h-[104px] shadow-xl">
     <div
@@ -16,18 +31,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import type { components } from '@/types/comfyRegistryTypes'
-import PackIcon from '@/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue'
-
-const {
-  nodePacks,
-  maxVisible = 3,
-  offset = 8
-} = defineProps<{
-  nodePacks: components['schemas']['Node'][]
-  maxVisible?: number
-  offset?: number
-}>()
-</script>
diff --git a/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue b/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
index 3eee59c22b..a8816581d1 100644
--- a/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
+++ b/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
@@ -1,65 +1,3 @@
-<template>
-  <div class="relative w-full p-6">
-    <div class="h-12 flex items-center gap-1 justify-between">
-      <div class="flex items-center w-5/12">
-        <AutoComplete
-          v-model.lazy="searchQuery"
-          :suggestions="suggestions || []"
-          :placeholder="$t('manager.searchPlaceholder')"
-          :complete-on-focus="false"
-          :delay="8"
-          option-label="query"
-          class="w-full"
-          :pt="{
-            pcInputText: {
-              root: {
-                autofocus: true,
-                class: 'w-full rounded-2xl'
-              }
-            },
-            loader: {
-              style: 'display: none'
-            }
-          }"
-          :show-empty-message="false"
-          @complete="stubTrue"
-          @option-select="onOptionSelect"
-        />
-      </div>
-      <PackInstallButton
-        v-if="isMissingTab && missingNodePacks.length > 0"
-        :disabled="isLoading || !!error"
-        :node-packs="missingNodePacks"
-        :label="$t('manager.installAllMissingNodes')"
-      />
-      <PackUpdateButton
-        v-if="isUpdateAvailableTab && hasUpdateAvailable"
-        :node-packs="enabledUpdateAvailableNodePacks"
-        :has-disabled-update-packs="hasDisabledUpdatePacks"
-      />
-    </div>
-    <div class="flex mt-3 text-sm">
-      <div class="flex gap-6 ml-1">
-        <SearchFilterDropdown
-          v-model:model-value="searchMode"
-          :options="filterOptions"
-          :label="$t('g.filter')"
-        />
-        <SearchFilterDropdown
-          v-model:model-value="sortField"
-          :options="availableSortOptions"
-          :label="$t('g.sort')"
-        />
-      </div>
-      <div class="flex items-center gap-4 ml-6">
-        <small v-if="hasResults" class="text-color-secondary">
-          {{ $t('g.resultsCount', { count: searchResults?.length || 0 }) }}
-        </small>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { stubTrue } from 'es-toolkit/compat'
 import type { AutoCompleteOptionSelectEvent } from 'primevue/autocomplete'
@@ -130,3 +68,65 @@ const onOptionSelect = (event: AutoCompleteOptionSelectEvent) => {
   searchQuery.value = event.value.query
 }
 </script>
+
+<template>
+  <div class="relative w-full p-6">
+    <div class="h-12 flex items-center gap-1 justify-between">
+      <div class="flex items-center w-5/12">
+        <AutoComplete
+          v-model.lazy="searchQuery"
+          :suggestions="suggestions || []"
+          :placeholder="$t('manager.searchPlaceholder')"
+          :complete-on-focus="false"
+          :delay="8"
+          option-label="query"
+          class="w-full"
+          :pt="{
+            pcInputText: {
+              root: {
+                autofocus: true,
+                class: 'w-full rounded-2xl'
+              }
+            },
+            loader: {
+              style: 'display: none'
+            }
+          }"
+          :show-empty-message="false"
+          @complete="stubTrue"
+          @option-select="onOptionSelect"
+        />
+      </div>
+      <PackInstallButton
+        v-if="isMissingTab && missingNodePacks.length > 0"
+        :disabled="isLoading || !!error"
+        :node-packs="missingNodePacks"
+        :label="$t('manager.installAllMissingNodes')"
+      />
+      <PackUpdateButton
+        v-if="isUpdateAvailableTab && hasUpdateAvailable"
+        :node-packs="enabledUpdateAvailableNodePacks"
+        :has-disabled-update-packs="hasDisabledUpdatePacks"
+      />
+    </div>
+    <div class="flex mt-3 text-sm">
+      <div class="flex gap-6 ml-1">
+        <SearchFilterDropdown
+          v-model:model-value="searchMode"
+          :options="filterOptions"
+          :label="$t('g.filter')"
+        />
+        <SearchFilterDropdown
+          v-model:model-value="sortField"
+          :options="availableSortOptions"
+          :label="$t('g.sort')"
+        />
+      </div>
+      <div class="flex items-center gap-4 ml-6">
+        <small v-if="hasResults" class="text-color-secondary">
+          {{ $t('g.resultsCount', { count: searchResults?.length || 0 }) }}
+        </small>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue b/src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue
index e076e0cafb..b8e0975b29 100644
--- a/src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue
+++ b/src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts" generic="T">
+// eslint-disable-next-line no-restricted-imports -- TODO: Migrate to Select component
+import Dropdown from 'primevue/dropdown'
+
+import type { SearchOption } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+
+defineProps<{
+  options: SearchOption<T>[]
+  label: string
+  modelValue: T
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: T]
+}>()
+</script>
+
 <template>
   <div class="flex items-center gap-1">
     <span class="text-muted">{{ label }}:</span>
@@ -17,20 +34,3 @@
     />
   </div>
 </template>
-
-<script setup lang="ts" generic="T">
-// eslint-disable-next-line no-restricted-imports -- TODO: Migrate to Select component
-import Dropdown from 'primevue/dropdown'
-
-import type { SearchOption } from '@/workbench/extensions/manager/types/comfyManagerTypes'
-
-defineProps<{
-  options: SearchOption<T>[]
-  label: string
-  modelValue: T
-}>()
-
-defineEmits<{
-  'update:modelValue': [value: T]
-}>()
-</script>
diff --git a/src/workbench/extensions/manager/components/manager/skeleton/GridSkeleton.vue b/src/workbench/extensions/manager/components/manager/skeleton/GridSkeleton.vue
index 54e12bd0ef..4c8c8d9851 100644
--- a/src/workbench/extensions/manager/components/manager/skeleton/GridSkeleton.vue
+++ b/src/workbench/extensions/manager/components/manager/skeleton/GridSkeleton.vue
@@ -1,9 +1,3 @@
-<template>
-  <div :style="gridStyle">
-    <PackCardSkeleton v-for="n in skeletonCardCount" :key="n" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import PackCardSkeleton from '@/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue'
 
@@ -17,3 +11,9 @@ const { skeletonCardCount = 12, gridStyle } = defineProps<{
   }
 }>()
 </script>
+
+<template>
+  <div :style="gridStyle">
+    <PackCardSkeleton v-for="n in skeletonCardCount" :key="n" />
+  </div>
+</template>
diff --git a/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue b/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
index fd8fbe9648..0081ba395e 100644
--- a/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
+++ b/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton'
+</script>
+
 <template>
   <div
     class="rounded-lg shadow-sm h-full overflow-hidden flex flex-col"
@@ -48,7 +52,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import Skeleton from 'primevue/skeleton'
-</script>