diff --git a/.gitignore b/.gitignore
index bee3e8317..c51197db0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,12 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# Package manager lockfiles (allow users to use different package managers)
+bun.lock
+bun.lockb
+pnpm-lock.yaml
+yarn.lock
+
 # ESLint cache
 .eslintcache
 
diff --git a/browser_tests/tests/groupNode.spec.ts b/browser_tests/tests/groupNode.spec.ts
index ae1ee505f..a6cb1e67f 100644
--- a/browser_tests/tests/groupNode.spec.ts
+++ b/browser_tests/tests/groupNode.spec.ts
@@ -17,11 +17,11 @@ test.describe('Group Node', () => {
       await libraryTab.open()
     })
 
-    test.skip('Is added to node library sidebar', async ({ comfyPage }) => {
+    test('Is added to node library sidebar', async ({ comfyPage }) => {
       expect(await libraryTab.getFolder('group nodes').count()).toBe(1)
     })
 
-    test.skip('Can be added to canvas using node library sidebar', async ({
+    test('Can be added to canvas using node library sidebar', async ({
       comfyPage
     }) => {
       const initialNodeCount = await comfyPage.getGraphNodesCount()
@@ -34,7 +34,7 @@ test.describe('Group Node', () => {
       expect(await comfyPage.getGraphNodesCount()).toBe(initialNodeCount + 1)
     })
 
-    test.skip('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
+    test('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
       await libraryTab.getFolder(groupNodeCategory).click()
       await libraryTab
         .getNode(groupNodeName)
@@ -61,7 +61,7 @@ test.describe('Group Node', () => {
       ).toHaveLength(0)
     })
 
-    test.skip('Displays preview on bookmark hover', async ({ comfyPage }) => {
+    test('Displays preview on bookmark hover', async ({ comfyPage }) => {
       await libraryTab.getFolder(groupNodeCategory).click()
       await libraryTab
         .getNode(groupNodeName)
@@ -95,7 +95,7 @@ test.describe('Group Node', () => {
     )
   })
 
-  test.skip('Displays tooltip on title hover', async ({ comfyPage }) => {
+  test('Displays tooltip on title hover', async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.convertAllNodesToGroupNode('Group Node')
     await comfyPage.page.mouse.move(47, 173)
@@ -104,7 +104,7 @@ test.describe('Group Node', () => {
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
-  test.skip('Manage group opens with the correct group selected', async ({
+  test('Manage group opens with the correct group selected', async ({
     comfyPage
   }) => {
     const makeGroup = async (name, type1, type2) => {
@@ -165,7 +165,7 @@ test.describe('Group Node', () => {
     expect(visibleInputCount).toBe(2)
   })
 
-  test.skip('Reconnects inputs after configuration changed via manage dialog save', async ({
+  test('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {
     const expectSingleNode = async (type: string) => {
diff --git a/browser_tests/tests/rightClickMenu.spec.ts b/browser_tests/tests/rightClickMenu.spec.ts
index d35eaccf6..db21ecd36 100644
--- a/browser_tests/tests/rightClickMenu.spec.ts
+++ b/browser_tests/tests/rightClickMenu.spec.ts
@@ -24,11 +24,11 @@ test.describe('Canvas Right Click Menu', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('add-group-group-added.png')
   })
 
-  test.skip('Can convert to group node', async ({ comfyPage }) => {
+  test('Can convert to group node', async ({ comfyPage }) => {
     await comfyPage.select2Nodes()
     await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png')
     await comfyPage.rightClickCanvas()
-    await comfyPage.clickContextMenuItem('Convert to Group Node')
+    await comfyPage.clickContextMenuItem('Convert to Group Node (Deprecated)')
     await comfyPage.promptDialogInput.fill('GroupNode2CLIP')
     await comfyPage.page.keyboard.press('Enter')
     await comfyPage.promptDialogInput.waitFor({ state: 'hidden' })
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png
index 8c01233c5..9693f5373 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png
index 29713c532..0a9eb155c 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png
index f8398e12a..1ca78bae4 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png
index 855c5a15a..f930bb889 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png
index d5a833ff6..088ecf100 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png
index f8398e12a..1ca78bae4 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png
index 50cda8cd8..dfccbf641 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png differ
diff --git a/src/assets/icons/custom/ai-model.svg b/src/assets/icons/custom/ai-model.svg
new file mode 100644
index 000000000..ede8e5c7e
--- /dev/null
+++ b/src/assets/icons/custom/ai-model.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.91396 12.7428L5.41396 10.7428C5.57175 10.1116 5.09439 9.50024 4.44382 9.50024H2.50538C2.04651 9.50024 1.64652 9.81253 1.53523 10.2577L1.03523 12.2577C0.877446 12.8888 1.3548 13.5002 2.00538 13.5002H3.94382C4.40269 13.5002 4.80267 13.1879 4.91396 12.7428Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M5.91396 6.74277L6.41396 4.74277C6.57175 4.11163 6.09439 3.50024 5.44382 3.50024H3.50538C3.04651 3.50024 2.64652 3.81253 2.53523 4.2577L2.03523 6.2577C1.87745 6.88885 2.3548 7.50024 3.00538 7.50024H4.94382C5.40269 7.50024 5.80267 7.18794 5.91396 6.74277Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M10.914 12.7428L11.414 10.7428C11.5718 10.1116 11.0944 9.50024 10.4438 9.50024H8.50538C8.04651 9.50024 7.64652 9.81253 7.53523 10.2577L7.03523 12.2577C6.87745 12.8888 7.3548 13.5002 8.00538 13.5002H9.94382C10.4027 13.5002 10.8027 13.1879 10.914 12.7428Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M12.2342 5.46739L11.5287 7.11354C11.4248 7.35597 11.0811 7.35597 10.9772 7.11354L10.2717 5.46739C10.2414 5.39659 10.185 5.34017 10.1141 5.30983L8.468 4.60433C8.22557 4.50044 8.22557 4.15675 8.468 4.05285L10.1141 3.34736C10.185 3.31701 10.2414 3.26059 10.2717 3.18979L10.9772 1.54364C11.0811 1.30121 11.4248 1.30121 11.5287 1.54364L12.2342 3.18979C12.2645 3.26059 12.3209 3.31701 12.3918 3.34736L14.0379 4.05285C14.2803 4.15675 14.2803 4.50044 14.0379 4.60433L12.3918 5.30983C12.3209 5.34017 12.2645 5.39659 12.2342 5.46739Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/custom/node.svg b/src/assets/icons/custom/node.svg
new file mode 100644
index 000000000..3239b59bd
--- /dev/null
+++ b/src/assets/icons/custom/node.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6667 10L10.598 10.2577C10.4812 10.6954 10.0848 11 9.63172 11H5.30161C4.64458 11 4.16608 10.3772 4.33538 9.74234L5.40204 5.74234C5.51878 5.30458 5.91523 5 6.36828 5H10.8286C11.4199 5 11.8505 5.56051 11.6982 6.13185L11.6736 6.22389M14 8H10M4.5 8H2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/custom/template.svg b/src/assets/icons/custom/template.svg
new file mode 100644
index 000000000..2a2a75f8d
--- /dev/null
+++ b/src/assets/icons/custom/template.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1894 6.24254L13.6894 4.24254C13.8471 3.61139 13.3698 3 12.7192 3H3.78077C3.3219 3 2.92192 3.3123 2.81062 3.75746L2.31062 5.75746C2.15284 6.38861 2.63019 7 3.28077 7H12.2192C12.6781 7 13.0781 6.6877 13.1894 6.24254Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M13.1894 12.2425L13.6894 10.2425C13.8471 9.61139 13.3698 9 12.7192 9H8.78077C8.3219 9 7.92192 9.3123 7.81062 9.75746L7.31062 11.7575C7.15284 12.3886 7.6302 13 8.28077 13H12.2192C12.6781 13 13.0781 12.6877 13.1894 12.2425Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M5.18936 12.2425L5.68936 10.2425C5.84714 9.61139 5.36978 9 4.71921 9H3.78077C3.3219 9 2.92192 9.3123 2.81062 9.75746L2.31062 11.7575C2.15284 12.3886 2.6302 13 3.28077 13H4.21921C4.67808 13 5.07806 12.6877 5.18936 12.2425Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 0ef8598d1..72a451d81 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -8,10 +8,13 @@
         :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 />
@@ -43,6 +46,7 @@ import type { SidebarTabExtension } from '@/types/extensionTypes'
 import SidebarHelpCenterIcon from './SidebarHelpCenterIcon.vue'
 import SidebarIcon from './SidebarIcon.vue'
 import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
+import SidebarTemplatesButton from './SidebarTemplatesButton.vue'
 
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
@@ -86,7 +90,7 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   box-shadow: var(--bar-shadow);
 
   --sidebar-width: 4rem;
-  --sidebar-icon-size: 1.5rem;
+  --sidebar-icon-size: 1rem;
 }
 
 .side-tool-bar-container.small-sidebar {
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index 5002d7724..f38a0aa0b 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -19,12 +19,29 @@
     @click="emit('click', $event)"
   >
     <template #icon>
-      <slot name="icon">
-        <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
-          <i :class="icon + ' side-bar-button-icon'" />
-        </OverlayBadge>
-        <i v-else :class="icon + ' side-bar-button-icon'" />
-      </slot>
+      <div class="side-bar-button-content">
+        <slot name="icon">
+          <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
+            <i
+              v-if="typeof icon === 'string'"
+              :class="icon + ' side-bar-button-icon'"
+            />
+            <component :is="icon" v-else class="side-bar-button-icon" />
+          </OverlayBadge>
+          <i
+            v-else-if="typeof icon === 'string'"
+            :class="icon + ' side-bar-button-icon'"
+          />
+          <component
+            :is="icon"
+            v-else-if="typeof icon === 'object'"
+            class="side-bar-button-icon"
+          />
+        </slot>
+        <span v-if="label && !isSmall" class="side-bar-button-label">{{
+          t(label)
+        }}</span>
+      </div>
     </template>
   </Button>
 </template>
@@ -33,6 +50,7 @@
 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()
@@ -41,13 +59,17 @@ const {
   selected = false,
   tooltip = '',
   tooltipSuffix = '',
-  iconBadge = ''
+  iconBadge = '',
+  label = '',
+  isSmall = false
 } = defineProps<{
-  icon?: string
+  icon?: string | Component
   selected?: boolean
   tooltip?: string
   tooltipSuffix?: string
   iconBadge?: string | (() => string | null)
+  label?: string
+  isSmall?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -74,10 +96,23 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 <style scoped>
 .side-bar-button {
   width: var(--sidebar-width);
-  height: var(--sidebar-width);
+  height: calc(var(--sidebar-width) + 0.5rem);
   border-radius: 0;
 }
 
+.side-tool-bar-end .side-bar-button {
+  height: var(--sidebar-width);
+}
+
+.side-bar-button-content {
+  @apply flex flex-col items-center gap-2;
+}
+
+.side-bar-button-label {
+  @apply text-[10px] text-center whitespace-nowrap;
+  line-height: 1;
+}
+
 .comfyui-body-left .side-bar-button.side-bar-button-selected,
 .comfyui-body-left .side-bar-button.side-bar-button-selected:hover {
   border-left: 4px solid var(--p-button-text-primary-color);
diff --git a/src/components/sidebar/SidebarTemplatesButton.vue b/src/components/sidebar/SidebarTemplatesButton.vue
new file mode 100644
index 000000000..b2b4c09c3
--- /dev/null
+++ b/src/components/sidebar/SidebarTemplatesButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <SidebarIcon
+    :icon="TemplateIcon"
+    :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, defineAsyncComponent, markRaw } from 'vue'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useSettingStore } from '@/stores/settingStore'
+
+import SidebarIcon from './SidebarIcon.vue'
+
+// Import the custom template icon
+const TemplateIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/template'))
+)
+
+const settingStore = useSettingStore()
+const commandStore = useCommandStore()
+
+const isSmall = computed(
+  () => settingStore.get('Comfy.Sidebar.Size') === 'small'
+)
+
+const openTemplates = () => {
+  void commandStore.execute('Comfy.BrowseTemplates')
+}
+</script>
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index c8e43a61a..b819312da 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -261,7 +261,10 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
             return '$0.14-2.80/Run (varies with model, mode & duration)'
 
           const modelValue = String(modelWidget.value)
-          if (modelValue.includes('v2-master')) {
+          if (
+            modelValue.includes('v2-1-master') ||
+            modelValue.includes('v2-master')
+          ) {
             return '$1.40/Run'
           } else if (
             modelValue.includes('v1-6') ||
@@ -280,12 +283,19 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         console.log('durationValue', durationValue)
 
         // Same pricing matrix as KlingTextToVideoNode
-        if (modelValue.includes('v2-master')) {
+        if (
+          modelValue.includes('v2-1-master') ||
+          modelValue.includes('v2-master')
+        ) {
           if (durationValue.includes('10')) {
             return '$2.80/Run'
           }
           return '$1.40/Run' // 5s default
-        } else if (modelValue.includes('v1-6') || modelValue.includes('v1-5')) {
+        } else if (
+          modelValue.includes('v2-1') ||
+          modelValue.includes('v1-6') ||
+          modelValue.includes('v1-5')
+        ) {
           if (modeValue.includes('pro')) {
             return durationValue.includes('10') ? '$0.98/Run' : '$0.49/Run'
           } else {
diff --git a/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts b/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
index 5764ec579..c5f5d9099 100644
--- a/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
+++ b/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
@@ -1,16 +1,21 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent, markRaw } from 'vue'
 
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
 
+const AiModelIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/ai-model'))
+)
+
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'model-library',
-    icon: 'pi pi-box',
+    icon: AiModelIcon,
     title: 'sideToolbar.modelLibrary',
     tooltip: 'sideToolbar.modelLibrary',
+    label: 'sideToolbar.labels.models',
     component: markRaw(ModelLibrarySidebarTab),
     type: 'vue',
     iconBadge: () => {
diff --git a/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts b/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
index bdaa94e19..5da93a1c4 100644
--- a/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
+++ b/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
@@ -1,14 +1,19 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent, markRaw } from 'vue'
 
 import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const NodeIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/node'))
+)
+
 export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'node-library',
-    icon: 'pi pi-book',
+    icon: NodeIcon,
     title: 'sideToolbar.nodeLibrary',
     tooltip: 'sideToolbar.nodeLibrary',
+    label: 'sideToolbar.labels.nodes',
     component: markRaw(NodeLibrarySidebarTab),
     type: 'vue'
   }
diff --git a/src/composables/sidebarTabs/useQueueSidebarTab.ts b/src/composables/sidebarTabs/useQueueSidebarTab.ts
index 9f1501aab..753a18fb5 100644
--- a/src/composables/sidebarTabs/useQueueSidebarTab.ts
+++ b/src/composables/sidebarTabs/useQueueSidebarTab.ts
@@ -15,6 +15,7 @@ export const useQueueSidebarTab = (): SidebarTabExtension => {
     },
     title: 'sideToolbar.queue',
     tooltip: 'sideToolbar.queue',
+    label: 'sideToolbar.labels.queue',
     component: markRaw(QueueSidebarTab),
     type: 'vue'
   }
diff --git a/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts b/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
index 842d3587a..772adf4de 100644
--- a/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
+++ b/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
@@ -1,16 +1,20 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent, markRaw } from 'vue'
 
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const WorkflowIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/workflow'))
+)
+
 export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
   const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
   return {
     id: 'workflows',
-    icon: 'pi pi-folder-open',
+    icon: WorkflowIcon,
     iconBadge: () => {
       if (
         settingStore.get('Comfy.Workflow.WorkflowTabsPosition') !== 'Sidebar'
@@ -22,6 +26,7 @@ export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
     },
     title: 'sideToolbar.workflows',
     tooltip: 'sideToolbar.workflows',
+    label: 'sideToolbar.labels.workflows',
     component: markRaw(WorkflowsSidebarTab),
     type: 'vue'
   }
diff --git a/src/composables/useMinimap.ts b/src/composables/useMinimap.ts
index c329769c4..499d068b8 100644
--- a/src/composables/useMinimap.ts
+++ b/src/composables/useMinimap.ts
@@ -102,6 +102,9 @@ export function useMinimap() {
   const groupColor = computed(() =>
     isLightTheme.value ? '#A2D3EC' : '#1F547A'
   )
+  const groupColorDefault = computed(
+    () => (isLightTheme.value ? '#283640' : '#B3C1CB') // this is the default group color when using nodeColors setting
+  )
   const bypassColor = computed(() =>
     isLightTheme.value ? '#DBDBDB' : '#4B184B'
   )
@@ -249,7 +252,17 @@ export function useMinimap() {
       const w = group.size[0] * scale.value
       const h = group.size[1] * scale.value
 
-      ctx.fillStyle = groupColor.value
+      let color = groupColor.value
+
+      if (nodeColors.value) {
+        color = group.color ?? groupColorDefault.value
+
+        if (isLightTheme.value) {
+          color = adjustColor(color, { opacity: 0.5 })
+        }
+      }
+
+      ctx.fillStyle = color
       ctx.fillRect(x, y, w, h)
     }
   }
diff --git a/src/extensions/core/groupNode.ts b/src/extensions/core/groupNode.ts
index 0b7cbb700..8b2170950 100644
--- a/src/extensions/core/groupNode.ts
+++ b/src/extensions/core/groupNode.ts
@@ -3,6 +3,7 @@ import { type NodeId } from '@/lib/litegraph/src/LGraphNode'
 import {
   type ExecutableLGraphNode,
   type ExecutionId,
+  LGraphCanvas,
   LGraphNode,
   LiteGraph,
   SubgraphNode
@@ -1172,8 +1173,7 @@ export class GroupNodeHandler {
       // @ts-expect-error fixme ts strict error
       getExtraMenuOptions?.apply(this, arguments)
 
-      // @ts-expect-error fixme ts strict error
-      let optionIndex = options.findIndex((o) => o.content === 'Outputs')
+      let optionIndex = options.findIndex((o) => o?.content === 'Outputs')
       if (optionIndex === -1) optionIndex = options.length
       else optionIndex++
       options.splice(
@@ -1634,6 +1634,57 @@ export class GroupNodeHandler {
   }
 }
 
+function addConvertToGroupOptions() {
+  // @ts-expect-error fixme ts strict error
+  function addConvertOption(options, index) {
+    const selected = Object.values(app.canvas.selected_nodes ?? {})
+    const disabled =
+      selected.length < 2 ||
+      selected.find((n) => GroupNodeHandler.isGroupNode(n))
+    options.splice(index, null, {
+      content: `Convert to Group Node (Deprecated)`,
+      disabled,
+      callback: convertSelectedNodesToGroupNode
+    })
+  }
+
+  // @ts-expect-error fixme ts strict error
+  function addManageOption(options, index) {
+    const groups = app.graph.extra?.groupNodes
+    const disabled = !groups || !Object.keys(groups).length
+    options.splice(index, null, {
+      content: `Manage Group Nodes`,
+      disabled,
+      callback: () => manageGroupNodes()
+    })
+  }
+
+  // Add to canvas
+  const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions
+  LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+    // @ts-expect-error fixme ts strict error
+    const options = getCanvasMenuOptions.apply(this, arguments)
+    const index = options.findIndex((o) => o?.content === 'Add Group')
+    const insertAt = index === -1 ? options.length - 1 : index + 2
+    addConvertOption(options, insertAt)
+    addManageOption(options, insertAt + 1)
+    return options
+  }
+
+  // Add to nodes
+  const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions
+  LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
+    // @ts-expect-error fixme ts strict error
+    const options = getNodeMenuOptions.apply(this, arguments)
+    if (!GroupNodeHandler.isGroupNode(node)) {
+      const index = options.findIndex((o) => o?.content === 'Properties')
+      const insertAt = index === -1 ? options.length - 1 : index
+      addConvertOption(options, insertAt)
+    }
+    return options
+  }
+}
+
 const replaceLegacySeparators = (nodes: ComfyNode[]): void => {
   for (const node of nodes) {
     if (typeof node.type === 'string' && node.type.startsWith('workflow/')) {
@@ -1729,6 +1780,9 @@ const ext: ComfyExtension = {
       }
     }
   ],
+  setup() {
+    addConvertToGroupOptions()
+  },
   async beforeConfigureGraph(
     graphData: ComfyWorkflowJSON,
     missingNodeTypes: string[]
diff --git a/src/lib/litegraph/src/LGraph.ts b/src/lib/litegraph/src/LGraph.ts
index 7585dab4c..94eee60de 100644
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -20,6 +20,7 @@ import type { SubgraphEventMap } from './infrastructure/SubgraphEventMap'
 import type {
   DefaultConnectionColors,
   Dictionary,
+  HasBoundingRect,
   IContextMenuValue,
   INodeInputSlot,
   INodeOutputSlot,
@@ -28,7 +29,8 @@ import type {
   MethodNames,
   OptionalProps,
   Point,
-  Positionable
+  Positionable,
+  Size
 } from './interfaces'
 import { LiteGraph, SubgraphNode } from './litegraph'
 import {
@@ -1569,6 +1571,9 @@ export class LGraph
       boundingRect
     )
 
+    //Correct for title height. It's included in bounding box, but not _posSize
+    subgraphNode.pos[1] += LiteGraph.NODE_TITLE_HEIGHT / 2
+
     // Add the subgraph node to the graph
     this.add(subgraphNode)
 
@@ -1668,14 +1673,21 @@ export class LGraph
     if (!(subgraphNode instanceof SubgraphNode))
       throw new Error('Can only unpack Subgraph Nodes')
     this.beforeChange()
-    const center = [0, 0]
-    for (const node of subgraphNode.subgraph.nodes) {
-      center[0] += node.pos[0] + node.size[0] / 2
-      center[1] += node.pos[1] + node.size[1] / 2
-    }
-    center[0] /= subgraphNode.subgraph.nodes.length
-    center[1] /= subgraphNode.subgraph.nodes.length
+    //NOTE: Create bounds can not be called on positionables directly as the subgraph is not being displayed and boundingRect is not initialized.
+    //NOTE: NODE_TITLE_HEIGHT is explicitly excluded here
+    const positionables = [
+      ...subgraphNode.subgraph.nodes,
+      ...subgraphNode.subgraph.reroutes.values(),
+      ...subgraphNode.subgraph.groups
+    ].map((p: { pos: Point; size?: Size }): HasBoundingRect => {
+      return {
+        boundingRect: [p.pos[0], p.pos[1], p.size?.[0] ?? 0, p.size?.[1] ?? 0]
+      }
+    })
+    const bounds = createBounds(positionables) ?? [0, 0, 0, 0]
+    const center = [bounds[0] + bounds[2] / 2, bounds[1] + bounds[3] / 2]
 
+    const toSelect: Positionable[] = []
     const offsetX = subgraphNode.pos[0] - center[0] + subgraphNode.size[0] / 2
     const offsetY = subgraphNode.pos[1] - center[1] + subgraphNode.size[1] / 2
     const movedNodes = multiClone(subgraphNode.subgraph.nodes)
@@ -1697,6 +1709,21 @@ export class LGraph
       for (const input of node.inputs) {
         input.link = null
       }
+      for (const output of node.outputs) {
+        output.links = []
+      }
+      toSelect.push(node)
+    }
+    const groups = structuredClone(
+      [...subgraphNode.subgraph.groups].map((g) => g.serialize())
+    )
+    for (const g_info of groups) {
+      const group = new LGraphGroup(g_info.title, g_info.id)
+      this.add(group, true)
+      group.configure(g_info)
+      group.pos[0] += offsetX
+      group.pos[1] += offsetY
+      toSelect.push(group)
     }
     //cleanup reoute.linkIds now, but leave link.parentIds dangling
     for (const islot of subgraphNode.inputs) {
@@ -1722,17 +1749,16 @@ export class LGraph
         }
       }
     }
-
-    const newLinks: [
-      NodeId,
-      number,
-      NodeId,
-      number,
-      LinkId,
-      RerouteId | undefined,
-      RerouteId | undefined,
-      boolean
-    ][] = []
+    const newLinks: {
+      oid: NodeId
+      oslot: number
+      tid: NodeId
+      tslot: number
+      id: LinkId
+      iparent?: RerouteId
+      eparent?: RerouteId
+      externalFirst: boolean
+    }[] = []
     for (const [, link] of subgraphNode.subgraph._links) {
       let externalParentId: RerouteId | undefined
       if (link.origin_id === SUBGRAPH_INPUT_ID) {
@@ -1757,16 +1783,16 @@ export class LGraph
         for (const linkId of subgraphNode.outputs[link.target_slot].links ??
           []) {
           const sublink = this.links[linkId]
-          newLinks.push([
-            link.origin_id,
-            link.origin_slot,
-            sublink.target_id,
-            sublink.target_slot,
-            link.id,
-            link.parentId,
-            sublink.parentId,
-            true
-          ])
+          newLinks.push({
+            oid: link.origin_id,
+            oslot: link.origin_slot,
+            tid: sublink.target_id,
+            tslot: sublink.target_slot,
+            id: link.id,
+            iparent: link.parentId,
+            eparent: sublink.parentId,
+            externalFirst: true
+          })
           sublink.parentId = undefined
         }
         continue
@@ -1778,47 +1804,47 @@ export class LGraph
         }
         link.target_id = target_id
       }
-      newLinks.push([
-        link.origin_id,
-        link.origin_slot,
-        link.target_id,
-        link.target_slot,
-        link.id,
-        link.parentId,
-        externalParentId,
-        false
-      ])
+      newLinks.push({
+        oid: link.origin_id,
+        oslot: link.origin_slot,
+        tid: link.target_id,
+        tslot: link.target_slot,
+        id: link.id,
+        iparent: link.parentId,
+        eparent: externalParentId,
+        externalFirst: false
+      })
     }
     this.remove(subgraphNode)
     this.subgraphs.delete(subgraphNode.subgraph.id)
     const linkIdMap = new Map<LinkId, LinkId[]>()
     for (const newLink of newLinks) {
       let created: LLink | null | undefined
-      if (newLink[0] == SUBGRAPH_INPUT_ID) {
+      if (newLink.oid == SUBGRAPH_INPUT_ID) {
         if (!(this instanceof Subgraph)) {
           console.error('Ignoring link to subgraph outside subgraph')
           continue
         }
-        const tnode = this._nodes_by_id[newLink[2]]
-        created = this.inputNode.slots[newLink[1]].connect(
-          tnode.inputs[newLink[3]],
+        const tnode = this._nodes_by_id[newLink.tid]
+        created = this.inputNode.slots[newLink.oslot].connect(
+          tnode.inputs[newLink.tslot],
           tnode
         )
-      } else if (newLink[2] == SUBGRAPH_OUTPUT_ID) {
+      } else if (newLink.tid == SUBGRAPH_OUTPUT_ID) {
         if (!(this instanceof Subgraph)) {
           console.error('Ignoring link to subgraph outside subgraph')
           continue
         }
-        const tnode = this._nodes_by_id[newLink[0]]
-        created = this.outputNode.slots[newLink[3]].connect(
-          tnode.outputs[newLink[1]],
+        const tnode = this._nodes_by_id[newLink.oid]
+        created = this.outputNode.slots[newLink.tslot].connect(
+          tnode.outputs[newLink.oslot],
           tnode
         )
       } else {
-        created = this._nodes_by_id[newLink[0]].connect(
-          newLink[1],
-          this._nodes_by_id[newLink[2]],
-          newLink[3]
+        created = this._nodes_by_id[newLink.oid].connect(
+          newLink.oslot,
+          this._nodes_by_id[newLink.tid],
+          newLink.tslot
         )
       }
       if (!created) {
@@ -1826,12 +1852,12 @@ export class LGraph
         continue
       }
       //This is a little unwieldy since Map.has isn't a type guard
-      const linkIds = linkIdMap.get(newLink[4]) ?? []
+      const linkIds = linkIdMap.get(newLink.id) ?? []
       linkIds.push(created.id)
-      if (!linkIdMap.has(newLink[4])) {
-        linkIdMap.set(newLink[4], linkIds)
+      if (!linkIdMap.has(newLink.id)) {
+        linkIdMap.set(newLink.id, linkIds)
       }
-      newLink[4] = created.id
+      newLink.id = created.id
     }
     const rerouteIdMap = new Map<RerouteId, RerouteId>()
     for (const reroute of subgraphNode.subgraph.reroutes.values()) {
@@ -1847,17 +1873,18 @@ export class LGraph
       ])
       rerouteIdMap.set(reroute.id, migratedReroute.id)
       this.reroutes.set(migratedReroute.id, migratedReroute)
+      toSelect.push(migratedReroute)
     }
     //iterate over newly created links to update reroute parentIds
     for (const newLink of newLinks) {
-      const linkInstance = this.links.get(newLink[4])
+      const linkInstance = this.links.get(newLink.id)
       if (!linkInstance) {
         continue
       }
       let instance: Reroute | LLink | undefined = linkInstance
-      let parentId: RerouteId | undefined = newLink[6]
-      if (newLink[7]) {
-        parentId = newLink[6]
+      let parentId: RerouteId | undefined = undefined
+      if (newLink.externalFirst) {
+        parentId = newLink.eparent
         //TODO: recursion check/helper method? Probably exists, but wouldn't mesh with the reference tracking used by this implementation
         while (parentId) {
           instance.parentId = parentId
@@ -1869,7 +1896,7 @@ export class LGraph
           parentId = instance.parentId
         }
       }
-      parentId = newLink[5]
+      parentId = newLink.iparent
       while (parentId) {
         const migratedId = rerouteIdMap.get(parentId)
         if (!migratedId) throw new Error('Broken Id link when unpacking')
@@ -1883,8 +1910,8 @@ export class LGraph
         if (!oldReroute) throw new Error('Broken Id link when unpacking')
         parentId = oldReroute.parentId
       }
-      if (!newLink[7]) {
-        parentId = newLink[6]
+      if (!newLink.externalFirst) {
+        parentId = newLink.eparent
         while (parentId) {
           instance.parentId = parentId
           instance = this.reroutes.get(parentId)
@@ -1897,18 +1924,13 @@ export class LGraph
       }
     }
 
-    const nodes: LGraphNode[] = []
     for (const nodeId of nodeIdMap.values()) {
       const node = this._nodes_by_id[nodeId]
-      nodes.push(node)
       node._setConcreteSlots()
       node.arrange()
     }
-    const reroutes = [...rerouteIdMap.values()]
-      .map((i) => this.reroutes.get(i))
-      .filter((x): x is Reroute => !!x)
 
-    this.canvasAction((c) => c.selectItems([...nodes, ...reroutes]))
+    this.canvasAction((c) => c.selectItems(toSelect))
     this.afterChange()
   }
 
diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
index b856af0ac..e7d721182 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphNode.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
@@ -171,7 +171,12 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     subgraphInput: SubgraphInput,
     input: INodeInputSlot & Partial<ISubgraphInput>
   ) {
-    input._listenerController?.abort()
+    if (
+      input._listenerController &&
+      typeof input._listenerController.abort === 'function'
+    ) {
+      input._listenerController.abort()
+    }
     input._listenerController = new AbortController()
     const { signal } = input._listenerController
 
@@ -207,7 +212,12 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
 
   override configure(info: ExportedSubgraphInstance): void {
     for (const input of this.inputs) {
-      input._listenerController?.abort()
+      if (
+        input._listenerController &&
+        typeof input._listenerController.abort === 'function'
+      ) {
+        input._listenerController.abort()
+      }
     }
 
     this.inputs.length = 0
@@ -518,7 +528,12 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     }
 
     for (const input of this.inputs) {
-      input._listenerController?.abort()
+      if (
+        input._listenerController &&
+        typeof input._listenerController.abort === 'function'
+      ) {
+        input._listenerController.abort()
+      }
     }
   }
 }
diff --git a/src/lib/litegraph/test/subgraph/SubgraphConversion.test.ts b/src/lib/litegraph/test/subgraph/SubgraphConversion.test.ts
index 921c68387..7ba3749fd 100644
--- a/src/lib/litegraph/test/subgraph/SubgraphConversion.test.ts
+++ b/src/lib/litegraph/test/subgraph/SubgraphConversion.test.ts
@@ -3,6 +3,7 @@ import { assert, describe, expect, it } from 'vitest'
 import {
   ISlotType,
   LGraph,
+  LGraphGroup,
   LGraphNode,
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
@@ -80,7 +81,7 @@ describe('SubgraphConversion', () => {
       expect(graph.nodes.length).toBe(4)
       expect(graph.links.size).toBe(2)
     })
-    it('Should keep reroutes', () => {
+    it('Should keep reroutes and groups', () => {
       const subgraph = createTestSubgraph({
         outputs: [{ name: 'value', type: 'number' }]
       })
@@ -98,6 +99,7 @@ describe('SubgraphConversion', () => {
       const outer = createNode(graph, ['number'])
       const outerLink = subgraphNode.connect(0, outer, 0)
       assert(outerLink)
+      subgraph.add(new LGraphGroup())
 
       subgraph.createReroute([10, 10], innerLink)
       graph.createReroute([10, 10], outerLink)
@@ -105,6 +107,7 @@ describe('SubgraphConversion', () => {
       graph.unpackSubgraph(subgraphNode)
 
       expect(graph.reroutes.size).toBe(2)
+      expect(graph.groups.length).toBe(1)
     })
     it('Should map reroutes onto split outputs', () => {
       const subgraph = createTestSubgraph({
diff --git a/src/locales/ar/commands.json b/src/locales/ar/commands.json
index da2a33980..6c323c639 100644
--- a/src/locales/ar/commands.json
+++ b/src/locales/ar/commands.json
@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "تجميع العقد المحددة"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "فك التفرع الفرعي المحدد"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "تحويل العقد المحددة إلى عقدة مجموعة"
   },
diff --git a/src/locales/ar/main.json b/src/locales/ar/main.json
index 1d60488a9..1db4a4919 100644
--- a/src/locales/ar/main.json
+++ b/src/locales/ar/main.json
@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "تبديل شريط تقدم مدير العقد المخصصة",
     "Undo": "تراجع",
     "Ungroup selected group nodes": "فك تجميع عقد المجموعة المحددة",
+    "Unpack the selected Subgraph": "فك تجميع الرسم البياني الفرعي المحدد",
     "Workflow": "سير العمل",
     "Zoom In": "تكبير",
     "Zoom Out": "تصغير"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "تصفح القوالب المثال",
     "downloads": "التنزيلات",
     "helpCenter": "مركز المساعدة",
+    "labels": {
+      "models": "النماذج",
+      "nodes": "العُقَد",
+      "queue": "قائمة الانتظار",
+      "templates": "القوالب",
+      "workflows": "سير العمل"
+    },
     "logout": "تسجيل الخروج",
     "modelLibrary": "مكتبة النماذج",
     "newBlankWorkflow": "إنشاء سير عمل جديد فارغ",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "عرض القائمة المسطحة"
     },
+    "templates": "القوالب",
     "workflowTab": {
       "confirmDelete": "هل أنت متأكد من رغبتك في حذف هذا السير؟",
       "confirmDeleteTitle": "حذف سير العمل؟",
diff --git a/src/locales/en/commands.json b/src/locales/en/commands.json
index 51903a0b6..fdf8c3bd7 100644
--- a/src/locales/en/commands.json
+++ b/src/locales/en/commands.json
@@ -125,15 +125,15 @@
   "Comfy_Graph_ExitSubgraph": {
     "label": "Exit Subgraph"
   },
-  "Comfy_Graph_UnpackSubgraph": {
-    "label": "Unpack the selected Subgraph"
-  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Fit Group To Contents"
   },
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "Group Selected Nodes"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "Unpack the selected Subgraph"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "Convert selected nodes to group node"
   },
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 1b1f71f10..185b3c366 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -437,6 +437,14 @@
     "queue": "Queue",
     "nodeLibrary": "Node Library",
     "workflows": "Workflows",
+    "templates": "Templates",
+    "labels": {
+      "queue": "Queue",
+      "nodes": "Nodes",
+      "models": "Models",
+      "workflows": "Workflows",
+      "templates": "Templates"
+    },
     "browseTemplates": "Browse example templates",
     "openWorkflow": "Open workflow in local file system",
     "newBlankWorkflow": "Create a new blank workflow",
@@ -979,6 +987,7 @@
     "Exit Subgraph": "Exit Subgraph",
     "Fit Group To Contents": "Fit Group To Contents",
     "Group Selected Nodes": "Group Selected Nodes",
+    "Unpack the selected Subgraph": "Unpack the selected Subgraph",
     "Convert selected nodes to group node": "Convert selected nodes to group node",
     "Manage group nodes": "Manage group nodes",
     "Ungroup selected group nodes": "Ungroup selected group nodes",
diff --git a/src/locales/es/commands.json b/src/locales/es/commands.json
index 84df6d9b5..11d0d99a0 100644
--- a/src/locales/es/commands.json
+++ b/src/locales/es/commands.json
@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "Agrupar nodos seleccionados"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "Desempaquetar el subgrafo seleccionado"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "Convertir nodos seleccionados en nodo de grupo"
   },
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index f62617ee2..5d1304dc3 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "Alternar la Barra de Progreso del Administrador de Nodos Personalizados",
     "Undo": "Deshacer",
     "Ungroup selected group nodes": "Desagrupar nodos de grupo seleccionados",
+    "Unpack the selected Subgraph": "Desempaquetar el Subgrafo seleccionado",
     "Workflow": "Flujo de trabajo",
     "Zoom In": "Acercar",
     "Zoom Out": "Alejar"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "Explorar plantillas de ejemplo",
     "downloads": "Descargas",
     "helpCenter": "Centro de ayuda",
+    "labels": {
+      "models": "Modelos",
+      "nodes": "Nodos",
+      "queue": "Cola",
+      "templates": "Plantillas",
+      "workflows": "Flujos de trabajo"
+    },
     "logout": "Cerrar sesión",
     "modelLibrary": "Biblioteca de modelos",
     "newBlankWorkflow": "Crear un nuevo flujo de trabajo en blanco",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "Mostrar lista plana"
     },
+    "templates": "Plantillas",
     "workflowTab": {
       "confirmDelete": "¿Estás seguro de que quieres eliminar este flujo de trabajo?",
       "confirmDeleteTitle": "¿Eliminar flujo de trabajo?",
diff --git a/src/locales/fr/commands.json b/src/locales/fr/commands.json
index 1f8c30012..f40ad108d 100644
--- a/src/locales/fr/commands.json
+++ b/src/locales/fr/commands.json
@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "Grouper les nœuds sélectionnés"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "Décompresser le sous-graphe sélectionné"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "Convertir les nœuds sélectionnés en nœud de groupe"
   },
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index dc179d31f..e27a59864 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
     "Undo": "Annuler",
     "Ungroup selected group nodes": "Dégrouper les nœuds de groupe sélectionnés",
+    "Unpack the selected Subgraph": "Décompresser le Subgraph sélectionné",
     "Workflow": "Flux de travail",
     "Zoom In": "Zoom avant",
     "Zoom Out": "Zoom arrière"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "Parcourir les modèles d'exemple",
     "downloads": "Téléchargements",
     "helpCenter": "Centre d'aide",
+    "labels": {
+      "models": "Modèles",
+      "nodes": "Nœuds",
+      "queue": "File d’attente",
+      "templates": "Modèles",
+      "workflows": "Flux de travail"
+    },
     "logout": "Déconnexion",
     "modelLibrary": "Bibliothèque de modèles",
     "newBlankWorkflow": "Créer un nouveau flux de travail vierge",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "Afficher la liste plate"
     },
+    "templates": "Modèles",
     "workflowTab": {
       "confirmDelete": "Êtes-vous sûr de vouloir supprimer ce flux de travail ?",
       "confirmDeleteTitle": "Supprimer le flux de travail ?",
diff --git a/src/locales/ja/commands.json b/src/locales/ja/commands.json
index 853d8d8dd..fd503b42b 100644
--- a/src/locales/ja/commands.json
+++ b/src/locales/ja/commands.json
@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "選択したノードをグループ化"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "選択したサブグラフを展開"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "選択したノードをグループノードに変換"
   },
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index b6f66071d..aeb9691d1 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "カスタムノードマネージャーの進行状況バーを切り替え",
     "Undo": "元に戻す",
     "Ungroup selected group nodes": "選択したグループノードのグループ解除",
+    "Unpack the selected Subgraph": "選択したサブグラフを展開",
     "Workflow": "ワークフロー",
     "Zoom In": "ズームイン",
     "Zoom Out": "ズームアウト"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "サンプルテンプレートを表示",
     "downloads": "ダウンロード",
     "helpCenter": "ヘルプセンター",
+    "labels": {
+      "models": "モデル",
+      "nodes": "ノード",
+      "queue": "キュー",
+      "templates": "テンプレート",
+      "workflows": "ワークフロー"
+    },
     "logout": "ログアウト",
     "modelLibrary": "モデルライブラリ",
     "newBlankWorkflow": "新しい空のワークフローを作成",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "フラットリストを表示"
     },
+    "templates": "テンプレート",
     "workflowTab": {
       "confirmDelete": "このワークフローを削除してもよろしいですか？",
       "confirmDeleteTitle": "ワークフローを削除しますか？",
diff --git a/src/locales/ko/commands.json b/src/locales/ko/commands.json
index 29fcb2968..dff73f051 100644
--- a/src/locales/ko/commands.json
+++ b/src/locales/ko/commands.json
@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "선택한 노드 그룹화"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "선택한 서브그래프 풀기"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "선택한 노드를 그룹 노드로 변환"
   },
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 45b3eec42..62c35f48d 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "커스텀 노드 매니저 진행률 표시줄 전환",
     "Undo": "실행 취소",
     "Ungroup selected group nodes": "선택한 그룹 노드 그룹 해제",
+    "Unpack the selected Subgraph": "선택한 서브그래프 풀기",
     "Workflow": "워크플로",
     "Zoom In": "확대",
     "Zoom Out": "축소"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "예제 템플릿 탐색",
     "downloads": "다운로드",
     "helpCenter": "도움말 센터",
+    "labels": {
+      "models": "모델",
+      "nodes": "노드",
+      "queue": "대기열",
+      "templates": "템플릿",
+      "workflows": "워크플로우"
+    },
     "logout": "로그아웃",
     "modelLibrary": "모델 라이브러리",
     "newBlankWorkflow": "새 빈 워크플로 만들기",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "평면 목록 표시"
     },
+    "templates": "템플릿",
     "workflowTab": {
       "confirmDelete": "정말로 이 워크플로를 삭제하시겠습니까?",
       "confirmDeleteTitle": "워크플로 삭제",
diff --git a/src/locales/ru/commands.json b/src/locales/ru/commands.json
index 805e814e8..130121e41 100644
--- a/src/locales/ru/commands.json
+++ b/src/locales/ru/commands.json
@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "Группировать выбранные ноды"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "Распаковать выбранный подграф"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "Преобразовать выбранные ноды в групповую ноду"
   },
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index fc04d60a0..e7acf0f1c 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
     "Undo": "Отменить",
     "Ungroup selected group nodes": "Разгруппировать выбранные групповые ноды",
+    "Unpack the selected Subgraph": "Распаковать выбранный подграф",
     "Workflow": "Рабочий процесс",
     "Zoom In": "Увеличить",
     "Zoom Out": "Уменьшить"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "Просмотреть примеры шаблонов",
     "downloads": "Загрузки",
     "helpCenter": "Центр поддержки",
+    "labels": {
+      "models": "Модели",
+      "nodes": "Узлы",
+      "queue": "Очередь",
+      "templates": "Шаблоны",
+      "workflows": "Воркфлоу"
+    },
     "logout": "Выйти",
     "modelLibrary": "Библиотека моделей",
     "newBlankWorkflow": "Создайте новый пустой рабочий процесс",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "Показать плоский список"
     },
+    "templates": "Шаблоны",
     "workflowTab": {
       "confirmDelete": "Вы уверены, что хотите удалить этот рабочий процесс?",
       "confirmDeleteTitle": "Удалить рабочий процесс?",
diff --git a/src/locales/zh-TW/commands.json b/src/locales/zh-TW/commands.json
index 0dda2c282..0f76375b4 100644
--- a/src/locales/zh-TW/commands.json
+++ b/src/locales/zh-TW/commands.json
@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "群組所選節點"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "解開所選子圖"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "將選取的節點轉換為群組節點"
   },
diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json
index d04470758..8a6872ff0 100644
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "切換自訂節點管理器進度條",
     "Undo": "復原",
     "Ungroup selected group nodes": "取消群組選取的群組節點",
+    "Unpack the selected Subgraph": "解包所選子圖",
     "Workflow": "工作流程",
     "Zoom In": "放大",
     "Zoom Out": "縮小"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "瀏覽範例模板",
     "downloads": "下載",
     "helpCenter": "說明中心",
+    "labels": {
+      "models": "模型",
+      "nodes": "節點",
+      "queue": "佇列",
+      "templates": "範本",
+      "workflows": "工作流程"
+    },
     "logout": "登出",
     "modelLibrary": "模型庫",
     "newBlankWorkflow": "建立新的空白工作流程",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "顯示平面清單"
     },
+    "templates": "範本",
     "workflowTab": {
       "confirmDelete": "您確定要刪除這個工作流程嗎？",
       "confirmDeleteTitle": "刪除工作流程？",
diff --git a/src/locales/zh/commands.json b/src/locales/zh/commands.json
index d974e499c..9fd2e66ff 100644
--- a/src/locales/zh/commands.json
+++ b/src/locales/zh/commands.json
@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "添加框到选中节点"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "解開所選子圖"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "将选中节点转换为组节点"
   },
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 1431a0891..08bbd46c3 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "切换自定义节点管理器进度条",
     "Undo": "撤销",
     "Ungroup selected group nodes": "解散选中组节点",
+    "Unpack the selected Subgraph": "解開所選子圖",
     "Workflow": "工作流",
     "Zoom In": "放大画面",
     "Zoom Out": "缩小画面"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "浏览示例模板",
     "downloads": "下载",
     "helpCenter": "帮助中心",
+    "labels": {
+      "models": "模型",
+      "nodes": "節點",
+      "queue": "佇列",
+      "templates": "範本",
+      "workflows": "工作流程"
+    },
     "logout": "登出",
     "modelLibrary": "模型库",
     "newBlankWorkflow": "创建空白工作流",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "平铺结果"
     },
+    "templates": "範本",
     "workflowTab": {
       "confirmDelete": "您确定要删除此工作流吗？",
       "confirmDeleteTitle": "删除工作流？",
diff --git a/src/stores/workspace/sidebarTabStore.ts b/src/stores/workspace/sidebarTabStore.ts
index 876736619..2143b0e1f 100644
--- a/src/stores/workspace/sidebarTabStore.ts
+++ b/src/stores/workspace/sidebarTabStore.ts
@@ -40,7 +40,7 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
 
     useCommandStore().registerCommand({
       id: `Workspace.ToggleSidebarTab.${tab.id}`,
-      icon: tab.icon,
+      icon: typeof tab.icon === 'string' ? tab.icon : undefined,
       label: labelFunction,
       tooltip: tooltipFunction,
       versionAdded: '1.3.9',
diff --git a/src/types/extensionTypes.ts b/src/types/extensionTypes.ts
index e9d705115..1cd3e4480 100644
--- a/src/types/extensionTypes.ts
+++ b/src/types/extensionTypes.ts
@@ -6,9 +6,10 @@ import type { ComfyCommand } from '@/stores/commandStore'
 export interface BaseSidebarTabExtension {
   id: string
   title: string
-  icon?: string
+  icon?: string | Component
   iconBadge?: string | (() => string | null)
   tooltip?: string
+  label?: string
 }
 
 export interface BaseBottomPanelExtension {
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index ad347c896..c6fdfff71 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,5 +1,17 @@
 /// <reference types="vite/client" />
 
+declare module 'virtual:icons/*' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent
+  export default component
+}
+
+declare module '~icons/*' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent
+  export default component
+}
+
 declare global {
   interface Window {
     __COMFYUI_FRONTEND_VERSION__: string
diff --git a/tests-ui/tests/composables/node/useNodePricing.test.ts b/tests-ui/tests/composables/node/useNodePricing.test.ts
index 072180793..d5978110a 100644
--- a/tests-ui/tests/composables/node/useNodePricing.test.ts
+++ b/tests-ui/tests/composables/node/useNodePricing.test.ts
@@ -114,6 +114,16 @@ describe('useNodePricing', () => {
       expect(price).toBe('$1.40/Run')
     })
 
+    it('should return high price for kling-v2-1-master model', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingImage2VideoNode', [
+        { name: 'model_name', value: 'v2-1-master' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.40/Run')
+    })
+
     it('should return standard price for kling-v1-6 model', () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNode('KlingImage2VideoNode', [
diff --git a/vitest.config.ts b/vitest.config.ts
index 648f9dfc0..a0912c561 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,8 +1,18 @@
 import vue from '@vitejs/plugin-vue'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import Icons from 'unplugin-icons/vite'
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    Icons({
+      compiler: 'vue3',
+      customCollections: {
+        comfy: FileSystemIconLoader('src/assets/icons/custom')
+      }
+    })
+  ],
   test: {
     globals: true,
     environment: 'happy-dom',