diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
index 330c76a7..a29de2e2 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
@@ -1,7 +1,8 @@
-import { Handle, type Node, type NodeProps, NodeResizeControl, Position } from '@xyflow/react'
+import { Handle, type Node, type NodeProps, NodeResizeControl, Position, useStore } from '@xyflow/react'
 import { ResizeIcon } from '~/routes/studio/canvas/nodetypes/frank-node'
 import { FlowConfig } from '~/routes/studio/canvas/flow.config'
 import { useSettingsStore } from '~/stores/settings-store'
+import ZoomedOutNode from './zoomed-out-node'
 
 export type ExitNode = Node<{
   subtype: string
@@ -14,6 +15,20 @@ export default function ExitNodeComponent(properties: NodeProps<ExitNode>) {
   const minNodeWidth = FlowConfig.EXIT_DEFAULT_WIDTH
   const minNodeHeight = FlowConfig.EXIT_DEFAULT_HEIGHT
   const gradientEnabled = useSettingsStore((state) => state.studio.gradient)
+  const zoom = useStore((state) => state.transform[2])
+  const isCompact = zoom < 0.4
+
+  if (isCompact) {
+    return (
+      <ZoomedOutNode
+        subtype={properties.data.subtype}
+        name={properties.data.name}
+        attributes={properties.data.attributes}
+        colorVariable="--type-exit"
+        selected={properties.selected}
+      />
+    )
+  }
 
   return (
     <>
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
index 7cdc76c9..9faece23 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
@@ -36,6 +36,7 @@ import {
   parseXsd,
 } from '~/utils/xsd-utils'
 import MissingRequirements from './components/missing-requirements'
+import ZoomedOutNode from './zoomed-out-node'
 
 export type FrankNodeType = Node<{
   subtype: string
@@ -117,17 +118,6 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
     return (dimensions.height - (properties.data.sourceHandles.length - 1) * handleSpacing) / 2
   }, [dimensions.height, properties.data.sourceHandles.length])
 
-  const COMPACT_INITIALS_BOX_SIZE = 160
-  const COMPACT_PADDING_TOP = 8
-  const COMPACT_HANDLE_SIZE = 15
-  const COMPACT_HANDLE_GAP = 4
-
-  const compactXOffsetPx =
-    (FlowConfig.NODE_DEFAULT_WIDTH - COMPACT_INITIALS_BOX_SIZE) / 2 - COMPACT_HANDLE_SIZE - COMPACT_HANDLE_GAP
-
-  const compactHandleTop =
-    COMPACT_PADDING_TOP + COMPACT_INITIALS_BOX_SIZE / 2 - COMPACT_HANDLE_SIZE / 2 + COMPACT_HANDLE_SIZE
-
   const allForwardTypesUsed = useMemo(() => {
     if (availableHandleTypes.length === 0) return true
 
@@ -406,107 +396,16 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
   }, [draggedName, canAcceptChild, frankElement])
 
   if (isCompact) {
-    const abbr =
-      properties.data.subtype.replaceAll(/[a-z]/g, '').slice(0, 4) || properties.data.subtype.slice(0, 2).toUpperCase()
-
     return (
-      <>
-        <div
-          className="flex flex-col items-center gap-2 rounded-md"
-          style={{
-            width: `${FlowConfig.NODE_DEFAULT_WIDTH}px`,
-            paddingTop: `${COMPACT_PADDING_TOP}px`,
-            paddingBottom: '8px',
-            ...(properties.selected && { borderColor: `var(${colorVariable})` }),
-          }}
-        >
-          <div
-            className="flex h-40 w-40 shrink-0 items-center justify-center rounded-3xl shadow-md"
-            style={{
-              backgroundColor: `color-mix(in srgb, var(${colorVariable}) 25%, transparent)`,
-              border: `3px solid var(${colorVariable})`,
-            }}
-          >
-            <span className="text-5xl font-black tracking-tight" style={{ color: `var(${colorVariable})` }}>
-              {abbr}
-            </span>
-          </div>
-
-          <span className="text-center text-3xl leading-snug font-semibold whitespace-nowrap">
-            {properties.data.subtype}
-          </span>
-
-          {properties.data.name && (
-            <span className="text-foreground-muted text-center text-3xl whitespace-nowrap">{properties.data.name}</span>
-          )}
-          {properties.data.attributes &&
-            Object.entries(properties.data.attributes).map(([key, value]) => (
-              <span key={key} className="text-foreground-muted text-center text-2xl whitespace-nowrap">
-                {value || key}
-              </span>
-            ))}
-        </div>
-
-        {properties.data.subtype !== 'Receiver' && (
-          <>
-            <div
-              className="pointer-events-none absolute rounded-full"
-              style={{
-                left: compactXOffsetPx,
-                top: `${compactHandleTop}px`,
-                transform: 'translate(-50%, -50%)',
-                width: '15px',
-                height: '15px',
-                backgroundColor: '#B2B2B2',
-                border: '1px solid rgba(107, 114, 128, 0.5)',
-              }}
-            />
-            <Handle
-              type="target"
-              position={Position.Left}
-              isConnectableStart={false}
-              style={{
-                opacity: 0,
-                left: compactXOffsetPx,
-                width: '15px',
-                height: '15px',
-                top: `${compactHandleTop}px`,
-              }}
-            />
-          </>
-        )}
-
-        {properties.data.sourceHandles.length > 0 && (
-          <div
-            className="pointer-events-none absolute rounded-full"
-            style={{
-              right: compactXOffsetPx,
-              top: `${compactHandleTop}px`,
-              transform: 'translate(50%, -50%)',
-              width: `${COMPACT_HANDLE_SIZE}px`,
-              height: `${COMPACT_HANDLE_SIZE}px`,
-              backgroundColor: '#B2B2B2',
-              border: '1px solid rgba(107, 114, 128, 0.5)',
-            }}
-          />
-        )}
-
-        {properties.data.sourceHandles.map((handle) => (
-          <Handle
-            key={handle.type + handle.index}
-            type="source"
-            position={Position.Right}
-            id={handle.index.toString()}
-            style={{
-              top: `${compactHandleTop}px`,
-              right: compactXOffsetPx,
-              width: '15px',
-              height: '15px',
-              opacity: 0,
-            }}
-          />
-        ))}
-      </>
+      <ZoomedOutNode
+        subtype={properties.data.subtype}
+        name={properties.data.name}
+        attributes={properties.data.attributes}
+        colorVariable={colorVariable}
+        selected={properties.selected}
+        showTargetHandle={properties.data.subtype !== 'Receiver'}
+        sourceHandles={properties.data.sourceHandles}
+      />
     )
   }
 
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx
new file mode 100644
index 00000000..f8091642
--- /dev/null
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx
@@ -0,0 +1,140 @@
+import { Handle, Position } from '@xyflow/react'
+import { FlowConfig } from '~/routes/studio/canvas/flow.config'
+
+const COMPACT_INITIALS_BOX_SIZE = 160
+const COMPACT_PADDING_TOP = 8
+const COMPACT_HANDLE_SIZE = 15
+const COMPACT_HANDLE_GAP = 4
+
+export interface ZoomedOutNodeProps {
+  subtype: string
+  name?: string
+  attributes?: Record<string, string>
+  colorVariable: string
+  selected?: boolean
+  showTargetHandle?: boolean
+  sourceHandles?: { type: string; index: number }[]
+  width?: number
+}
+
+function getAbbreviation(subtype: string): string {
+  return subtype.replaceAll(/[a-z]/g, '').slice(0, 4) || subtype.slice(0, 2).toUpperCase()
+}
+
+/**
+ * Compact representation of a node shown when the canvas is zoomed out far enough that the full
+ * node would be unreadable. Renders an initials box with the subtype, name attributes and the
+ * handles aligned under it.
+ */
+export default function ZoomedOutNode({
+  subtype,
+  name,
+  attributes,
+  colorVariable,
+  selected,
+  showTargetHandle = true,
+  sourceHandles = [],
+  width = FlowConfig.NODE_DEFAULT_WIDTH,
+}: Readonly<ZoomedOutNodeProps>) {
+  const abbr = getAbbreviation(subtype)
+
+  const compactXOffsetPx = (width - COMPACT_INITIALS_BOX_SIZE) / 2 - COMPACT_HANDLE_SIZE - COMPACT_HANDLE_GAP
+  const compactHandleTop =
+    COMPACT_PADDING_TOP + COMPACT_INITIALS_BOX_SIZE / 2 - COMPACT_HANDLE_SIZE / 2 + COMPACT_HANDLE_SIZE
+
+  return (
+    <>
+      <div
+        className="flex flex-col items-center gap-2 rounded-md"
+        style={{
+          width: `${width}px`,
+          paddingTop: `${COMPACT_PADDING_TOP}px`,
+          paddingBottom: '8px',
+          ...(selected && { borderColor: `var(${colorVariable})` }),
+        }}
+      >
+        <div
+          className="flex h-40 w-40 shrink-0 items-center justify-center rounded-3xl shadow-md"
+          style={{
+            backgroundColor: `color-mix(in srgb, var(${colorVariable}) 25%, transparent)`,
+            border: `3px solid var(${colorVariable})`,
+          }}
+        >
+          <span className="text-5xl font-black tracking-tight" style={{ color: `var(${colorVariable})` }}>
+            {abbr}
+          </span>
+        </div>
+
+        <span className="text-center text-3xl leading-snug font-semibold whitespace-nowrap">{subtype}</span>
+
+        {name && <span className="text-foreground-muted text-center text-3xl whitespace-nowrap">{name}</span>}
+        {attributes &&
+          Object.entries(attributes).map(([key, value]) => (
+            <span key={key} className="text-foreground-muted text-center text-2xl whitespace-nowrap">
+              {value || key}
+            </span>
+          ))}
+      </div>
+
+      {showTargetHandle && (
+        <>
+          <div
+            className="pointer-events-none absolute rounded-full"
+            style={{
+              left: compactXOffsetPx,
+              top: `${compactHandleTop}px`,
+              transform: 'translate(-50%, -50%)',
+              width: `${COMPACT_HANDLE_SIZE}px`,
+              height: `${COMPACT_HANDLE_SIZE}px`,
+              backgroundColor: '#B2B2B2',
+              border: '1px solid rgba(107, 114, 128, 0.5)',
+            }}
+          />
+          <Handle
+            type="target"
+            position={Position.Left}
+            isConnectableStart={false}
+            style={{
+              opacity: 0,
+              left: compactXOffsetPx,
+              width: `${COMPACT_HANDLE_SIZE}px`,
+              height: `${COMPACT_HANDLE_SIZE}px`,
+              top: `${compactHandleTop}px`,
+            }}
+          />
+        </>
+      )}
+
+      {sourceHandles.length > 0 && (
+        <div
+          className="pointer-events-none absolute rounded-full"
+          style={{
+            right: compactXOffsetPx,
+            top: `${compactHandleTop}px`,
+            transform: 'translate(50%, -50%)',
+            width: `${COMPACT_HANDLE_SIZE}px`,
+            height: `${COMPACT_HANDLE_SIZE}px`,
+            backgroundColor: '#B2B2B2',
+            border: '1px solid rgba(107, 114, 128, 0.5)',
+          }}
+        />
+      )}
+
+      {sourceHandles.map((handle) => (
+        <Handle
+          key={handle.type + handle.index}
+          type="source"
+          position={Position.Right}
+          id={handle.index.toString()}
+          style={{
+            top: `${compactHandleTop}px`,
+            right: compactXOffsetPx,
+            width: `${COMPACT_HANDLE_SIZE}px`,
+            height: `${COMPACT_HANDLE_SIZE}px`,
+            opacity: 0,
+          }}
+        />
+      ))}
+    </>
+  )
+}