diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 9eb5b9a3acd..cd41e673bc3 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -19,6 +19,7 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import type { Point } from '@/lib/litegraph/src/litegraph'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import { createModelNodeFromAsset } from '@/platform/assets/utils/createModelNodeFromAsset'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -90,6 +91,7 @@ export function useCoreCommands(): ComfyCommand[] {
 
   const dialogStore = useDialogStore()
   const maskEditorStore = useMaskEditorStore()
+  const compactModeStore = useCompactModeStore()
 
   const { getSelectedNodes, toggleSelectedNodesMode } =
     useSelectedLiteGraphItems()
@@ -106,6 +108,7 @@ export function useCoreCommands(): ComfyCommand[] {
   const moveSelectedNodes = (
     positionUpdater: (pos: Point, gridSize: number) => Point
   ) => {
+    if (compactModeStore.isCompactMode) return
     const selectedNodes = getSelectedNodes()
     if (selectedNodes.length === 0) return
 
@@ -594,6 +597,7 @@ export function useCoreCommands(): ComfyCommand[] {
       versionAdded: '1.3.7',
       category: 'essentials' as const,
       function: () => {
+        if (compactModeStore.isCompactMode) return
         const { canvas } = app
         if (!canvas.selectedItems?.size) {
           toastStore.add({
@@ -898,6 +902,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'icon-[lucide--clipboard-paste]',
       label: 'Paste',
       function: () => {
+        if (compactModeStore.isCompactMode) return
         app.canvas.pasteFromClipboard()
       }
     },
@@ -906,6 +911,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'icon-[lucide--clipboard-paste]',
       label: () => t('Paste with Connect'),
       function: () => {
+        if (compactModeStore.isCompactMode) return
         app.canvas.pasteFromClipboard({ connectInputs: true })
       }
     },
@@ -923,6 +929,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Delete Selected Items',
       versionAdded: '1.10.5',
       function: () => {
+        if (compactModeStore.isCompactMode) return
         if (app.canvas.selectedItems.size === 0) {
           app.canvas.canvas.dispatchEvent(
             new CustomEvent('litegraph:no-items-selected', { bubbles: true })
@@ -1034,6 +1041,7 @@ export function useCoreCommands(): ComfyCommand[] {
       versionAdded: '1.20.1',
       category: 'essentials' as const,
       function: () => {
+        if (compactModeStore.isCompactMode) return
         const canvas = canvasStore.getCanvas()
         const graph = canvas.subgraph ?? canvas.graph
         if (!graph) throw new TypeError('Canvas has no graph or subgraph set.')
@@ -1349,6 +1357,35 @@ export function useCoreCommands(): ComfyCommand[] {
         if (newMode) useTelemetry()?.trackEnterLinear({ source })
         canvasStore.linearMode = newMode
       }
+    },
+    {
+      id: 'Comfy.ToggleCompactMode',
+      icon: 'pi pi-th-large',
+      label: 'Toggle Compact Mode',
+      category: 'view-controls' as const,
+      active: () => compactModeStore.isCompactMode,
+      function: async () => {
+        compactModeStore.toggle()
+        if (compactModeStore.isCompactMode) {
+          compactModeStore.savedLinkRenderMode = settingStore.get(
+            'Comfy.LinkRenderMode'
+          )
+          await settingStore.set('Comfy.LinkRenderMode', LiteGraph.HIDDEN_LINK)
+          return
+        }
+        const linksAreStillHidden =
+          settingStore.get('Comfy.LinkRenderMode') === LiteGraph.HIDDEN_LINK
+        if (
+          linksAreStillHidden &&
+          compactModeStore.savedLinkRenderMode != null
+        ) {
+          await settingStore.set(
+            'Comfy.LinkRenderMode',
+            compactModeStore.savedLinkRenderMode
+          )
+        }
+        compactModeStore.savedLinkRenderMode = null
+      }
     }
   ]
 
diff --git a/src/composables/useWorkflowActionsMenu.test.ts b/src/composables/useWorkflowActionsMenu.test.ts
index e935b14de3a..6aaa3376b22 100644
--- a/src/composables/useWorkflowActionsMenu.test.ts
+++ b/src/composables/useWorkflowActionsMenu.test.ts
@@ -61,6 +61,10 @@ const mockFeatureFlags = vi.hoisted(() => ({
   flags: { linearToggleEnabled: false }
 }))
 
+const mockSettingStore = vi.hoisted(() => ({
+  get: vi.fn<(key: string) => unknown>(() => undefined)
+}))
+
 vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: vi.fn(() => mockWorkflowStore),
   useWorkflowBookmarkStore: vi.fn(() => mockBookmarkStore)
@@ -92,6 +96,10 @@ vi.mock('@/composables/useFeatureFlags', () => ({
   useFeatureFlags: vi.fn(() => mockFeatureFlags)
 }))
 
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => mockSettingStore)
+}))
+
 type MenuItems = ReturnType<typeof useWorkflowActionsMenu>['menuItems']['value']
 
 function actionItems(items: MenuItems): WorkflowMenuAction[] {
@@ -120,6 +128,9 @@ describe('useWorkflowActionsMenu', () => {
     mockFeatureFlags.flags.linearToggleEnabled = false
     mockAppModeStore.selectedInputs.length = 0
     mockAppModeStore.selectedOutputs.length = 0
+    mockSettingStore.get.mockImplementation((key: string) =>
+      key === 'Comfy.VueNodes.Enabled' ? true : undefined
+    )
     mockWorkflowStore.activeWorkflow = {
       path: 'test.json',
       isPersisted: true
@@ -375,6 +386,25 @@ describe('useWorkflowActionsMenu', () => {
     expect(bookmark.disabled).toBe(true)
   })
 
+  it('shows the Compact Mode item when Vue Nodes is enabled', () => {
+    const { menuItems } = useWorkflowActionsMenu(vi.fn(), { isRoot: true })
+    const labels = menuLabels(menuItems.value)
+
+    expect(labels).toContain('breadcrumbsMenu.enterCompactMode')
+  })
+
+  it('hides the Compact Mode item when Vue Nodes is disabled', () => {
+    mockSettingStore.get.mockImplementation((key: string) =>
+      key === 'Comfy.VueNodes.Enabled' ? false : undefined
+    )
+
+    const { menuItems } = useWorkflowActionsMenu(vi.fn(), { isRoot: true })
+    const labels = menuLabels(menuItems.value)
+
+    expect(labels).not.toContain('breadcrumbsMenu.enterCompactMode')
+    expect(labels).not.toContain('breadcrumbsMenu.exitCompactMode')
+  })
+
   it('switches to custom workflow before executing rename', async () => {
     const customWorkflow = ref({
       path: 'other.json',
diff --git a/src/composables/useWorkflowActionsMenu.ts b/src/composables/useWorkflowActionsMenu.ts
index 6990bd0a1c8..254e7ee4ec8 100644
--- a/src/composables/useWorkflowActionsMenu.ts
+++ b/src/composables/useWorkflowActionsMenu.ts
@@ -12,7 +12,9 @@ import {
   useWorkflowBookmarkStore,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import { useAppModeStore } from '@/stores/appModeStore'
@@ -56,6 +58,8 @@ export function useWorkflowActionsMenu(
   const { flags } = useFeatureFlags()
   const appModeStore = useAppModeStore()
   const { enterBuilder, pruneLinearData } = appModeStore
+  const compactModeStore = useCompactModeStore()
+  const settingStore = useSettingStore()
 
   const targetWorkflow = computed(
     () => workflow?.value ?? workflowStore.activeWorkflow
@@ -220,6 +224,23 @@ export function useWorkflowActionsMenu(
       prependSeparator: true
     })
 
+    const isVueNodesEnabled =
+      settingStore.get('Comfy.VueNodes.Enabled') ?? false
+    addItem({
+      id: 'toggle-compact-mode',
+      label: compactModeStore.isCompactMode
+        ? t('breadcrumbsMenu.exitCompactMode')
+        : t('breadcrumbsMenu.enterCompactMode'),
+      icon: 'icon-[lucide--minimize-2]',
+      command: async () => {
+        await ensureWorkflowActive(targetWorkflow.value)
+        await commandStore.execute('Comfy.ToggleCompactMode')
+      },
+      visible: !isLinearMode && isVueNodesEnabled,
+      prependSeparator: !showAppModeItems,
+      isNew: true
+    })
+
     const isActive = workflow === workflowStore.activeWorkflow
     const rawLd = isActive
       ? {
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 156c2fa1fa9..1fd36ddc2d1 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1421,6 +1421,7 @@
     "Canvas Performance": "Canvas Performance",
     "Help Center": "Help Center",
     "Toggle App Mode": "Toggle App Mode",
+    "Toggle Compact Mode": "Toggle Compact Mode",
     "Toggle Queue Panel V2": "Toggle Queue Panel V2",
     "Toggle Theme (Dark/Light)": "Toggle Theme (Dark/Light)",
     "Undo": "Undo",
@@ -2742,6 +2743,8 @@
     "duplicate": "Duplicate",
     "enterAppMode": "Enter app mode",
     "exitAppMode": "Exit app mode",
+    "enterCompactMode": "Enter compact mode",
+    "exitCompactMode": "Exit compact mode",
     "enterBuilderMode": "Build app",
     "editBuilderMode": "Edit app",
     "workflowActions": "Workflow actions",
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 5548f55d40b..5bcc967fc75 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -114,7 +114,7 @@
 
     <!-- Image Dimensions (gallery mode only) -->
     <div
-      v-if="viewMode === 'gallery'"
+      v-if="viewMode === 'gallery' && !compactModeStore.isCompactMode"
       class="pt-2 text-center text-xs text-base-foreground"
     >
       <span
@@ -174,6 +174,7 @@ import { downloadFile } from '@/base/common/downloadUtil'
 import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
 import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { resolveNode } from '@/utils/litegraphUtil'
 import { cn } from '@comfyorg/tailwind-utils'
@@ -201,6 +202,7 @@ function defaultViewMode(urls: readonly string[]): ViewMode {
   return urls.length > 1 ? 'grid' : 'gallery'
 }
 
+const compactModeStore = useCompactModeStore()
 const currentIndex = ref(0)
 const viewMode = ref<ViewMode>(defaultViewMode(imageUrls))
 const galleryPanelEl = ref<HTMLDivElement>()
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 3933314f204..5010960b67c 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -34,7 +34,9 @@
     }"
     :inert="isGhostPlacing"
     v-bind="remainingPointerHandlers"
+    @pointerdown.capture="onCompactCtrlClickCapture"
     @pointerdown="nodeOnPointerdown"
+    @click.capture="onCompactCtrlClickCapture"
     @wheel="handleWheel"
     @contextmenu="handleContextMenu"
     @dragover.prevent="handleDragOver"
@@ -139,7 +141,20 @@
         <div class="relative">
           <!-- Progress bar for executing state -->
           <div
-            v-if="executing && progress !== undefined"
+            v-if="
+              executing &&
+              progress !== undefined &&
+              compactModeStore.isCompactMode
+            "
+            class="pointer-events-none absolute inset-x-3 top-1 h-2 overflow-hidden rounded-full bg-primary-500/20"
+          >
+            <div
+              class="h-full rounded-full bg-primary-500 transition-all duration-300"
+              :style="{ width: `${Math.min(progress * 100, 100)}%` }"
+            />
+          </div>
+          <div
+            v-else-if="executing && progress !== undefined"
             :class="
               cn(
                 'absolute inset-x-0 top-1/2 -translate-y-1/2',
@@ -154,13 +169,17 @@
         <div
           :class="
             cn(
-              'flex flex-1 flex-col gap-1 bg-component-node-background pt-1 pb-3',
+              'flex flex-1 flex-col bg-component-node-background',
+              compactModeStore.isCompactMode ? 'gap-1 py-4' : 'gap-1 pt-1 pb-3',
               bodyRoundingClass
             )
           "
           :data-testid="`node-body-${nodeData.id}`"
         >
-          <NodeSlots :node-data="nodeData" />
+          <NodeSlots
+            v-if="!compactModeStore.isCompactMode"
+            :node-data="nodeData"
+          />
 
           <NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
 
@@ -183,7 +202,7 @@
             :image-url="latestPreviewUrl"
           />
           <NodeBadges
-            v-if="!isTransparentHeaderless"
+            v-if="!isTransparentHeaderless && !compactModeStore.isCompactMode"
             v-bind="badges"
             :pricing="undefined"
             class="mt-auto"
@@ -209,7 +228,8 @@
         !isCollapsed &&
         !isRerouteNode &&
         nodeData.resizable !== false &&
-        !isSelectMode
+        !isSelectMode &&
+        !compactModeStore.isCompactMode
       "
     >
       <div
@@ -304,6 +324,8 @@ import { app } from '@/scripts/app'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isVideoOutput } from '@/utils/litegraphUtil'
@@ -338,6 +360,8 @@ const { t } = useI18n()
 
 const { isSelectMode, isSelectOutputsMode } = useAppMode()
 const settingStore = useSettingStore()
+const compactModeStore = useCompactModeStore()
+const commandStore = useCommandStore()
 
 const { handleNodeCollapse, handleNodeTitleUpdate, handleNodeRightClick } =
   useNodeEventHandlers()
@@ -345,7 +369,8 @@ const { bringNodeToFront } = useNodeZIndex()
 
 useVueElementTracking(String(nodeData.id), 'node')
 
-const { selectedNodeIds, isGhostPlacing } = storeToRefs(useCanvasStore())
+const canvasStore = useCanvasStore()
+const { selectedNodeIds, isGhostPlacing } = storeToRefs(canvasStore)
 const isSelected = computed(() => {
   return selectedNodeIds.value.has(nodeData.id)
 })
@@ -377,7 +402,13 @@ const showErrorsTabEnabled = computed(() =>
   settingStore.get('Comfy.RightSidePanel.ShowErrorsTab')
 )
 
-const displayHeader = computed(() => nodeData.titleMode !== TitleMode.NO_TITLE)
+const displayHeader = computed(
+  () =>
+    !compactModeStore.isCompactMode && nodeData.titleMode !== TitleMode.NO_TITLE
+)
+const isOutputNode = computed(
+  () => !!lgraphNode.value?.constructor?.nodeData?.output_node
+)
 
 const isRerouteNode = computed(() => nodeData.type === 'Reroute')
 
@@ -422,7 +453,35 @@ const { onPointerdown, ...remainingPointerHandlers } = pointerHandlers
 const { startDrag } = useNodeDrag()
 const badges = usePartitionedBadges(nodeData)
 
+function isCompactCtrlClickExecute(event: PointerEvent | MouseEvent): boolean {
+  return (
+    compactModeStore.isCompactMode &&
+    (event.ctrlKey || event.metaKey) &&
+    (event as MouseEvent).button === 0 &&
+    isOutputNode.value &&
+    !!lgraphNode.value
+  )
+}
+
+async function onCompactCtrlClickCapture(event: PointerEvent | MouseEvent) {
+  if (!isCompactCtrlClickExecute(event)) return
+  event.preventDefault()
+  event.stopPropagation()
+  if (event.type !== 'pointerdown') return
+  if (!lgraphNode.value) return
+  app.canvas.select(lgraphNode.value)
+  canvasStore.updateSelectedItems()
+  await commandStore.execute('Comfy.QueueSelectedOutputNodes', {
+    metadata: { trigger_source: 'compact_mode_ctrl_click' }
+  })
+}
+
 async function nodeOnPointerdown(event: PointerEvent) {
+  if (isCompactCtrlClickExecute(event)) return
+  if (compactModeStore.isCompactMode) {
+    onPointerdown(event)
+    return
+  }
   if (event.altKey && lgraphNode.value) {
     const result = LGraphCanvas.cloneNodes([lgraphNode.value])
     if (result?.created?.length) {
@@ -442,6 +501,8 @@ const handleContextMenu = (event: MouseEvent) => {
   event.preventDefault()
   event.stopPropagation()
 
+  if (compactModeStore.isCompactMode) return
+
   // First handle the standard right-click behavior (selection)
   handleNodeRightClick(event as PointerEvent, nodeData.id)
 
@@ -529,6 +590,7 @@ const handleResizePointerDown = (
 ) => {
   if (event.button !== 0) return
   if (!shouldHandleNodePointerEvents.value) return
+  if (compactModeStore.isCompactMode) return
   if (nodeData.flags?.pinned) return
   if (nodeData.resizable === false) return
   startResize(event, corner)
@@ -571,6 +633,16 @@ const cursorClass = computed(() => {
 })
 
 const bodyRoundingClass = computed(() => {
+  if (compactModeStore.isCompactMode) {
+    switch (nodeData.shape) {
+      case RenderShape.BOX:
+        return ''
+      case RenderShape.CARD:
+        return 'rounded-tl-2xl rounded-br-2xl'
+      default:
+        return 'rounded-2xl'
+    }
+  }
   switch (nodeData.shape) {
     case RenderShape.BOX:
       return ''
diff --git a/src/renderer/extensions/vueNodes/components/NodeFooter.test.ts b/src/renderer/extensions/vueNodes/components/NodeFooter.test.ts
index 5bebf4352ff..e7fafceb535 100644
--- a/src/renderer/extensions/vueNodes/components/NodeFooter.test.ts
+++ b/src/renderer/extensions/vueNodes/components/NodeFooter.test.ts
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
+import { createPinia } from 'pinia'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -44,7 +45,7 @@ const baseProps: Props = {
 
 function renderFooter(overrides: Partial<Props> = {}) {
   return render(NodeFooter, {
-    global: { plugins: [i18n] },
+    global: { plugins: [i18n, createPinia()] },
     props: { ...baseProps, ...overrides }
   })
 }
diff --git a/src/renderer/extensions/vueNodes/components/NodeFooter.vue b/src/renderer/extensions/vueNodes/components/NodeFooter.vue
index c5c963f2968..e24c8bf3a1e 100644
--- a/src/renderer/extensions/vueNodes/components/NodeFooter.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeFooter.vue
@@ -1,7 +1,12 @@
 <template>
   <!-- Case 1: Subgraph + Error (Dual Tabs) -->
   <div
-    v-if="isSubgraph && hasAnyError && showErrorsTabEnabled"
+    v-if="
+      isSubgraph &&
+      hasAnyError &&
+      showErrorsTabEnabled &&
+      !compactModeStore.isCompactMode
+    "
     :class="errorWrapperStyles"
   >
     <Button
@@ -9,7 +14,8 @@
       :class="
         cn(
           tabStyles,
-          'z-10 box-border w-1/2 rounded-none bg-destructive-background pt-9 pb-4 text-white hover:bg-destructive-background-hover',
+          'z-10 box-border w-1/2 rounded-none bg-destructive-background text-white hover:bg-destructive-background-hover',
+          paddingClass,
           errorRadiusClass
         )
       "
@@ -27,7 +33,8 @@
       :class="
         cn(
           tabStyles,
-          '-ml-5 box-border w-[calc(50%+20px)] rounded-none bg-node-component-header-surface pt-9 pb-4 pl-5',
+          '-ml-5 box-border w-[calc(50%+20px)] rounded-none bg-node-component-header-surface pl-5',
+          paddingClass,
           enterRadiusClass
         )
       "
@@ -47,7 +54,8 @@
       !isSubgraph &&
       hasAnyError &&
       showErrorsTabEnabled &&
-      (showAdvancedInputsButton || showAdvancedState)
+      (showAdvancedInputsButton || showAdvancedState) &&
+      !compactModeStore.isCompactMode
     "
     :class="errorWrapperStyles"
   >
@@ -56,7 +64,8 @@
       :class="
         cn(
           tabStyles,
-          'z-10 box-border w-1/2 rounded-none bg-destructive-background pt-9 pb-4 text-white hover:bg-destructive-background-hover',
+          'z-10 box-border w-1/2 rounded-none bg-destructive-background text-white hover:bg-destructive-background-hover',
+          paddingClass,
           errorRadiusClass
         )
       "
@@ -73,7 +82,8 @@
       :class="
         cn(
           tabStyles,
-          '-ml-5 box-border w-[calc(50%+20px)] rounded-none bg-node-component-header-surface pt-9 pb-4 pl-5',
+          '-ml-5 box-border w-[calc(50%+20px)] rounded-none bg-node-component-header-surface pl-5',
+          paddingClass,
           enterRadiusClass
         )
       "
@@ -107,7 +117,8 @@
       :class="
         cn(
           tabStyles,
-          'box-border w-full rounded-none bg-destructive-background pt-9 pb-4 text-white hover:bg-destructive-background-hover',
+          'box-border w-full rounded-none bg-destructive-background text-white hover:bg-destructive-background-hover',
+          paddingClass,
           footerRadiusClass
         )
       "
@@ -122,7 +133,7 @@
 
   <!-- Case 3: Subgraph only (Full Width) -->
   <div
-    v-else-if="isSubgraph"
+    v-else-if="isSubgraph && !compactModeStore.isCompactMode"
     :class="
       cn(
         footerWrapperBase,
@@ -137,7 +148,7 @@
         cn(
           tabStyles,
           'box-border w-full rounded-none bg-node-component-header-surface',
-          hasAnyError ? 'pt-9 pb-4' : 'pt-8 pb-4',
+          paddingClass,
           footerRadiusClass
         )
       "
@@ -153,7 +164,10 @@
 
   <!-- Case 4: Advanced Footer (Regular Nodes) -->
   <div
-    v-else-if="showAdvancedInputsButton || showAdvancedState"
+    v-else-if="
+      (showAdvancedInputsButton || showAdvancedState) &&
+      !compactModeStore.isCompactMode
+    "
     :class="
       cn(
         footerWrapperBase,
@@ -167,7 +181,7 @@
         cn(
           tabStyles,
           'box-border w-full rounded-none bg-node-component-header-surface',
-          hasAnyError ? 'pt-9 pb-4' : 'pt-8 pb-4',
+          paddingClass,
           footerRadiusClass
         )
       "
@@ -197,9 +211,11 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Button from '@/components/ui/button/Button.vue'
 import { RenderShape } from '@/lib/litegraph/src/litegraph'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { cn } from '@comfyorg/tailwind-utils'
 
 const { t } = useI18n()
+const compactModeStore = useCompactModeStore()
 
 interface Props {
   isSubgraph: boolean
@@ -257,12 +273,25 @@ const errorRadiusClass = computed(() => getBottomRadius(shape, '20px'))
 
 const enterRadiusClass = computed(() => getBottomRadius(shape, '20px', 'right'))
 
-const tabStyles = 'pointer-events-auto h-9 text-xs'
-const footerWrapperBase = 'isolate -z-1 -mt-5 box-border flex'
-const errorWrapperStyles = cn(
-  footerWrapperBase,
-  '-mx-1 -mb-2 w-[calc(100%+8px)] pb-1'
+const tabStyles = computed(() =>
+  cn(
+    'pointer-events-auto text-xs',
+    compactModeStore.isCompactMode ? 'h-5' : 'h-9'
+  )
+)
+const footerWrapperBase = computed(() =>
+  cn(
+    'isolate -z-1 box-border flex',
+    compactModeStore.isCompactMode ? '-mt-2' : '-mt-5'
+  )
+)
+const errorWrapperStyles = computed(() =>
+  cn(footerWrapperBase.value, '-mx-1 -mb-2 w-[calc(100%+8px)] pb-1')
 )
+const paddingClass = computed(() => {
+  if (compactModeStore.isCompactMode) return 'pt-2 pb-1'
+  return hasAnyError ? 'pt-9 pb-4' : 'pt-8 pb-4'
+})
 
 const headerColorStyle = computed(() =>
   headerColor ? { backgroundColor: headerColor } : undefined
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
index 358d15398fe..1da1438482b 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -14,6 +14,7 @@
         :node-type="nodeData?.type || ''"
         :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
         :index="getActualInputIndex(input, index)"
+        :dot-only="compactModeStore.isCompactMode"
       />
     </div>
 
@@ -28,6 +29,7 @@
         :node-type="nodeData?.type || ''"
         :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
         :index="index"
+        :dot-only="compactModeStore.isCompactMode"
       />
     </div>
   </div>
@@ -40,6 +42,7 @@ import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
 import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import {
   linkedWidgetedInputs,
   nonWidgetedInputs
@@ -56,6 +59,8 @@ interface NodeSlotsProps {
 
 const { nodeData, unified = false } = defineProps<NodeSlotsProps>()
 
+const compactModeStore = useCompactModeStore()
+
 const linkedWidgetInputs = computed(() =>
   unified ? linkedWidgetedInputs(nodeData) : []
 )
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 4f5fb9d8fc1..ecbb12df3a3 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -38,7 +38,7 @@
           "
         >
           <InputSlot
-            v-if="widget.slotMetadata"
+            v-if="widget.slotMetadata && !compactModeStore.isCompactMode"
             :key="`widget-slot-${widget.name}-${widget.slotMetadata.index}`"
             :slot-data="{
               name: widget.name,
@@ -88,6 +88,7 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import AppInput from '@/renderer/extensions/linearMode/AppInput.vue'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
 import { useProcessedWidgets } from '@/renderer/extensions/vueNodes/composables/useProcessedWidgets'
 import { cn } from '@comfyorg/tailwind-utils'
@@ -103,6 +104,7 @@ const { nodeData } = defineProps<NodeWidgetsProps>()
 const { shouldHandleNodePointerEvents, forwardEventToCanvas } =
   useCanvasInteractions()
 const { bringNodeToFront } = useNodeZIndex()
+const compactModeStore = useCompactModeStore()
 
 function handleWidgetPointerEvent(event: PointerEvent) {
   if (shouldHandleNodePointerEvents.value) return
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 5650366ca44..ad3ae81d551 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -34,6 +34,7 @@ import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
 import { RenderShape } from '@/lib/litegraph/src/types/globalEnums'
 import { useSlotLinkDragUIState } from '@/renderer/core/canvas/links/slotLinkDragUIState'
 import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
 import { useSlotLinkInteraction } from '@/renderer/extensions/vueNodes/composables/useSlotLinkInteraction'
@@ -54,6 +55,7 @@ interface OutputSlotProps {
 const props = defineProps<OutputSlotProps>()
 
 const { t } = useI18n()
+const compactModeStore = useCompactModeStore()
 
 const hasNoLabel = computed(
   () => !props.slotData.localized_name && props.slotData.name === ''
@@ -97,7 +99,8 @@ const shouldDim = computed(() => {
 
 const slotWrapperClass = computed(() =>
   cn(
-    'lg-slot lg-slot--output group flex h-6 items-center justify-end rounded-l-lg',
+    'lg-slot lg-slot--output group flex items-center justify-end rounded-l-lg',
+    compactModeStore.isCompactMode ? 'h-3' : 'h-6',
     'cursor-crosshair',
     dotOnly.value ? 'lg-slot--dot-only justify-center' : 'pl-6',
     {
diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
index 5f8d332cf85..b6a3a758ddd 100644
--- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
+++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
@@ -4,6 +4,7 @@ import { computed, useTemplateRef } from 'vue'
 import { getSlotColor, MAX_MULTITYPE_SLICES } from '@/constants/slotColors'
 import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
 import { RenderShape } from '@/lib/litegraph/src/types/globalEnums'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { cn } from '@comfyorg/tailwind-utils'
 import type { ClassValue } from '@comfyorg/tailwind-utils'
 
@@ -14,6 +15,8 @@ const props = defineProps<{
   multi?: boolean
 }>()
 
+const compactModeStore = useCompactModeStore()
+
 const clipPath = computed(() => {
   switch (props.slotData?.shape) {
     case 6:
@@ -61,7 +64,8 @@ const slotClass = computed(() =>
   <div
     :class="
       cn(
-        'group/slot relative flex size-6 items-center justify-center after:absolute after:inset-y-0 after:w-5/2',
+        'group/slot relative flex items-center justify-center after:absolute after:inset-y-0 after:w-5/2',
+        compactModeStore.isCompactMode ? 'size-3' : 'size-6',
         props.class
       )
     "
diff --git a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
index 8d4897e684a..24e8d929fc8 100644
--- a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
+++ b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
@@ -25,6 +25,7 @@ import {
 } from '@/renderer/core/canvas/links/linkDropOrchestrator'
 import { useSlotLinkDragUIState } from '@/renderer/core/canvas/links/slotLinkDragUIState'
 import type { SlotDropCandidate } from '@/renderer/core/canvas/links/slotLinkDragUIState'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import type { Point } from '@/renderer/core/layout/types'
@@ -123,6 +124,7 @@ export function useSlotLinkInteraction({
     clearCompatible
   } = useSlotLinkDragUIState()
   const conversion = useSharedCanvasPositionConversion()
+  const compactModeStore = useCompactModeStore()
   const pointerSession = createPointerSession()
   let activeAdapter: LinkConnectorAdapter | null = null
   let autoPan: AutoPanController | null = null
@@ -589,6 +591,7 @@ export function useSlotLinkInteraction({
   const onPointerDown = (event: PointerEvent) => {
     if (event.button !== 0) return
     if (!nodeId) return
+    if (compactModeStore.isCompactMode) return
     if (pointerSession.isActive()) return
     event.preventDefault()
     event.stopPropagation()
diff --git a/src/renderer/extensions/vueNodes/layout/useNodeDrag.ts b/src/renderer/extensions/vueNodes/layout/useNodeDrag.ts
index f52d9c7570a..f1068dca672 100644
--- a/src/renderer/extensions/vueNodes/layout/useNodeDrag.ts
+++ b/src/renderer/extensions/vueNodes/layout/useNodeDrag.ts
@@ -2,6 +2,7 @@ import { storeToRefs } from 'pinia'
 import { toValue } from 'vue'
 
 import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { AutoPanController } from '@/renderer/core/canvas/useAutoPan'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
@@ -23,6 +24,7 @@ export const useNodeDrag = createSharedComposable(useNodeDragIndividual)
 function useNodeDragIndividual() {
   const mutations = useLayoutMutations()
   const { selectedNodeIds, selectedItems } = storeToRefs(useCanvasStore())
+  const compactModeStore = useCompactModeStore()
 
   // Get transform utilities from TransformPane if available
   const transformState = useTransformState()
@@ -52,6 +54,7 @@ function useNodeDragIndividual() {
   let lastPointerY = 0
 
   function startDrag(event: PointerEvent, nodeId: NodeId) {
+    if (compactModeStore.isCompactMode) return
     const layout = toValue(layoutStore.getNodeLayoutRef(nodeId))
     if (!layout) return
     const position = layout.position ?? { x: 0, y: 0 }
diff --git a/src/stores/compactModeStore.test.ts b/src/stores/compactModeStore.test.ts
new file mode 100644
index 00000000000..f069a99d2c4
--- /dev/null
+++ b/src/stores/compactModeStore.test.ts
@@ -0,0 +1,31 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useCompactModeStore } from './compactModeStore'
+
+describe('useCompactModeStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('starts with compact mode disabled', () => {
+    const store = useCompactModeStore()
+    expect(store.isCompactMode).toBe(false)
+  })
+
+  it('toggle flips the value', () => {
+    const store = useCompactModeStore()
+    store.toggle()
+    expect(store.isCompactMode).toBe(true)
+    store.toggle()
+    expect(store.isCompactMode).toBe(false)
+  })
+
+  it('set assigns the value directly', () => {
+    const store = useCompactModeStore()
+    store.set(true)
+    expect(store.isCompactMode).toBe(true)
+    store.set(false)
+    expect(store.isCompactMode).toBe(false)
+  })
+})
diff --git a/src/stores/compactModeStore.ts b/src/stores/compactModeStore.ts
new file mode 100644
index 00000000000..1be13513f7e
--- /dev/null
+++ b/src/stores/compactModeStore.ts
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useCompactModeStore = defineStore('compactMode', () => {
+  const isCompactMode = ref(false)
+  const savedLinkRenderMode = ref<number | null>(null)
+
+  function toggle() {
+    isCompactMode.value = !isCompactMode.value
+  }
+
+  function set(value: boolean) {
+    isCompactMode.value = value
+  }
+
+  return {
+    isCompactMode,
+    savedLinkRenderMode,
+    toggle,
+    set
+  }
+})