diff --git a/.stylelintrc.json b/.stylelintrc.json
index f3ed5fcd..abca526f 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,6 +1,7 @@
 {
     "extends": ["stylelint-config-standard-scss", "stylelint-config-recess-order"],
     "rules": {
-        "scss/at-extend-no-missing-placeholder": null
+        "scss/at-extend-no-missing-placeholder": null,
+        "selector-class-pattern": null
     }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 11cce697..1c5c0db9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - Parameter `modalFocusable: boolean`: When `true` the outer `div` element of the modal can be focused by clicking on it.
                                            This is needed e.g. when key (down, up) events should trigger on the modal in order
                                            to bubble up to its parent elements.
+-   `<HandleTools />`: can be used as single handle content to add an context menu to handles
+-   `<NodeContent />`
+    -   `introductionTime` parameter could be used to visualize the node was added or updated
+-   `<ReactFlow />`:
+    -   Support disabling the react-flow hot keys via a React context, e.g. `Delete` etc.
 
 ### Fixed
 
diff --git a/src/cmem/react-flow/ReactFlow/ReactFlow.tsx b/src/cmem/react-flow/ReactFlow/ReactFlow.tsx
index 9a77656f..4e870c9e 100644
--- a/src/cmem/react-flow/ReactFlow/ReactFlow.tsx
+++ b/src/cmem/react-flow/ReactFlow/ReactFlow.tsx
@@ -6,6 +6,7 @@ import * as graphConfig from "./../configuration/graph";
 import * as workflowConfig from "./../configuration/workflow";
 import * as linkingConfig from "./../configuration/linking";
 import {useReactFlowScrollOnDrag} from "../extensions/scrollOnDragHook";
+import {ReactFlowHotkeyContext} from "../extensions/ReactFlowHotkeyContext";
 
 export interface ReactFlowProps extends ReactFlowOriginalProps {
     /**
@@ -42,11 +43,16 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
     },
     ref) => {
 
+    /** If the hot keys should be disabled. By default, they are always disabled. */
+    const {hotKeysDisabled} = React.useContext(ReactFlowHotkeyContext)
+
     const scrollOnDragFunctions = useReactFlowScrollOnDrag({
         reactFlowProps: originalProps,
         scrollOnDrag
     })
 
+    const {selectionKeyCode, multiSelectionKeyCode, deleteKeyCode, zoomActivationKeyCode} = originalProps
+
     const configReactFlow = {
         unspecified: unspecifiedConfig,
         graph: graphConfig,
@@ -61,6 +67,10 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
             edgeTypes={ configReactFlow[configuration].edgeTypes }
             {...originalProps}
             {...scrollOnDragFunctions}
+            selectionKeyCode={hotKeysDisabled ? null : selectionKeyCode as any}
+            deleteKeyCode={hotKeysDisabled ? null : deleteKeyCode as any}
+            multiSelectionKeyCode={hotKeysDisabled ? null : multiSelectionKeyCode as any}
+            zoomActivationKeyCode={hotKeysDisabled ? null : zoomActivationKeyCode as any}
         >
             { children }
             <ReactFlowMarkers />
diff --git a/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx b/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx
index 80ae4cb0..23318ad2 100644
--- a/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx
+++ b/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Tag, TagList, SimpleDialog, Icon, Button, FieldItem } from "./../../../index";
 import getColorConfiguration from "../../../common/utils/getColorConfiguration";
 import { CodeEditor } from "../../../extensions";
+import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 
 export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
 
@@ -38,6 +39,15 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
     const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
         ([key, value]) => [key, value as string]
     );
+    const {disableHotKeys} = React.useContext(ReactFlowHotkeyContext)
+
+    React.useEffect(() => {
+        disableHotKeys(true)
+
+        return () => {
+            disableHotKeys(false)
+        }
+    }, [])
 
     React.useEffect(() => {
         if (!color && noteColors[0][1]) {
@@ -45,17 +55,6 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
         }
     }, [color, noteColors]);
 
-    const wrapperDivProps: { [key: string]: (event: any) => any } = {
-        // Prevent react-flow from getting these events
-        onContextMenu: (event) => event.stopPropagation(),
-        onDrag: (event) => event.stopPropagation(),
-        onDragStart: (event) => event.stopPropagation(),
-        onDragEnd: (event) => event.stopPropagation(),
-        onMouseDown: (event) => event.stopPropagation(),
-        onMouseUp: (event) => event.stopPropagation(),
-        onClick: (event) => event.stopPropagation(),
-    };
-
     const predefinedColorsMenu = (
         <TagList>
             {noteColors &&
@@ -88,7 +87,6 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
             hasBorder
             isOpen
             onClose={onClose}
-            wrapperDivProps={wrapperDivProps}
             actions={[
                 <Button
                     key="submit"
diff --git a/src/cmem/react-flow/extensions/ReactFlowHotkeyContext.ts b/src/cmem/react-flow/extensions/ReactFlowHotkeyContext.ts
new file mode 100644
index 00000000..587b2532
--- /dev/null
+++ b/src/cmem/react-flow/extensions/ReactFlowHotkeyContext.ts
@@ -0,0 +1,14 @@
+import React from "react";
+
+export interface ReactFlowHotkeyContextProps {
+    /** Allows to disable hot keys. */
+    disableHotKeys: (enable: boolean) => any
+
+    /** If the hot keys are currently disabled. */
+    hotKeysDisabled: boolean
+}
+
+export const ReactFlowHotkeyContext = React.createContext<ReactFlowHotkeyContextProps>({
+    disableHotKeys: () => {},
+    hotKeysDisabled: false
+})
diff --git a/src/components/Dialog/Modal.tsx b/src/components/Dialog/Modal.tsx
index bce3ddf8..b64b8d3c 100644
--- a/src/components/Dialog/Modal.tsx
+++ b/src/components/Dialog/Modal.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import {
     Classes as BlueprintClassNames,
-    OverlayProps, Overlay as BlueprintOverlay,
     IOverlayState,
+    Overlay as BlueprintOverlay,
+    OverlayProps,
 } from "@blueprintjs/core";
 import {Card} from "./../Card";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
@@ -87,6 +88,7 @@ export const Modal = ({
                 // this is a workaround because data attribute on SimpleDialog is not correctly routed to the overlay by blueprint js
                 data-test-id={(otherProps as any)["data-test-id"] ?? "simpleDialogWidget"}
                 {...focusableProps}
+                tabIndex={0}
             >
                 <section
                     className={
diff --git a/src/components/Dialog/SimpleDialog.tsx b/src/components/Dialog/SimpleDialog.tsx
index 819aa4fa..5135aeee 100644
--- a/src/components/Dialog/SimpleDialog.tsx
+++ b/src/components/Dialog/SimpleDialog.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {BaseSyntheticEvent} from "react";
 
 import { IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -71,10 +71,15 @@ export const SimpleDialog = ({
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
     const showToggler = startInFullScreenMode || showFullScreenToggler;
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";
+    const wrapperDivProps = {
+        ...modalPreventEvents,
+        ...otherProps.wrapperDivProps,
+    };
     return (
         <Modal
             enforceFocus={enforceFocus}
             {...otherProps}
+            wrapperDivProps={wrapperDivProps}
             // set default test id if not given
             data-test-id={otherProps["data-test-id"] ?? "simpleDialogWidget"}
             canOutsideClickClose={canOutsideClickClose || !preventSimpleClosing}
@@ -116,4 +121,17 @@ export const SimpleDialog = ({
     );
 };
 
+/** Events that should be prevented to bubble up from a modal that goes beyond the most simple version of a modal, e.g.
+ * allows to drag or supports hot keys etc. */
+export const modalPreventEvents = {
+    // Prevent certain events from leaving the modal, so that e.g. react-flow does not receive these events doing unexpected stuff
+    onContextMenu: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDrag: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDragStart: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDragEnd: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onMouseUp: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onClick: (event: BaseSyntheticEvent) => event.stopPropagation()
+};
+
 export default SimpleDialog;
diff --git a/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx b/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx
index 5dd1dfff..4e0fc37b 100644
--- a/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx
+++ b/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx
@@ -1,24 +1,24 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow, EdgeLabel, EdgeLabelObject } from "./../../../../../index";
-import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from 'react-flow-renderer';
+import React, { useCallback, useEffect, useState } from "react";
+import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from "react-flow-renderer";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
+import { EdgeLabel, EdgeLabelObject, ReactFlow } from "./../../../../../index";
 import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
 import { edgeTypes } from "./../edgeTypes";
 
 const EdgeDefaultDataProps = (data: EdgeData) => {
     // this is only a mock to get it as sub element in the table
     return <></>;
-}
+};
 
 export default {
-    title: "Extensions/React Flow/Default Edge",
+    title: "Extensions/React Flow/Edge",
     component: EdgeDefault,
     subcomponents: { EdgeDefaultDataProps },
     argTypes: {
         type: {
             control: "select",
-            options: [...(Object.keys(edgeTypes))],
+            options: [...Object.keys(edgeTypes)],
         },
     },
 } as ComponentMeta<typeof EdgeDefault>;
@@ -33,7 +33,9 @@ const EdgeDefaultExample = (args: any) => {
                 id: args.source,
                 type: "default",
                 data: {
-                    label: "Default ", content: "Example content.", minimalShape: "none",
+                    label: "Default ",
+                    content: "Example content.",
+                    minimalShape: "none",
                 },
                 position: { x: 50, y: 200 },
             },
@@ -41,13 +43,15 @@ const EdgeDefaultExample = (args: any) => {
                 id: args.target,
                 type: "default",
                 data: {
-                    label: "Default ", content: "Example content.", minimalShape: "none",
+                    label: "Default ",
+                    content: "Example content.",
+                    minimalShape: "none",
                 },
                 position: { x: 600, y: 200 },
             },
             {
-                ...args
-            }
+                ...args,
+            },
         ] as Elements);
     }, [args]);
 
@@ -60,31 +64,30 @@ const EdgeDefaultExample = (args: any) => {
         [reactflowInstance]
     );
 
-    return <ReactFlowProvider>
-        <ReactFlow
-            elements={elements}
-            style={{ height: '400px' }}
-            onLoad={onLoad}
-            edgeTypes={ edgeTypes }
-            defaultZoom={1}
-        />
-    </ReactFlowProvider>
-}
+    return (
+        <ReactFlowProvider>
+            <ReactFlow
+                elements={elements}
+                style={{ height: "400px" }}
+                onLoad={onLoad}
+                edgeTypes={edgeTypes}
+                defaultZoom={1}
+            />
+        </ReactFlowProvider>
+    );
+};
 
-const Template: ComponentStory<typeof EdgeDefault> = (args) => (
-    <EdgeDefaultExample {...args} />
-);
+const Template: ComponentStory<typeof EdgeDefault> = (args) => <EdgeDefaultExample {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    id: 'default',
-    type: 'dangerStep',
+    id: "default",
+    type: "dangerStep",
     label: "edge",
     arrowHeadType: "arrowclosed",
-    source: 'node-1',
-    target: 'node-2',
-    data: {
-    }
+    source: "node-1",
+    target: "node-2",
+    data: {},
 };
 
 export const CustomLabel = Template.bind({});
@@ -94,14 +97,12 @@ CustomLabel.args = {
     arrowHeadType: undefined,
     label: undefined,
     data: {
-        renderLabel: (
-            edgeCenter: [number, number, number, number]
-        ) => (
+        renderLabel: (edgeCenter: [number, number, number, number]) => (
             <EdgeLabelObject edgeCenter={edgeCenter}>
-                    <EdgeLabel text="Custom label that is very long" />
+                <EdgeLabel text="Custom label that is very long" />
             </EdgeLabelObject>
-        )
-    }
+        ),
+    },
 };
 
 export const InverseEdge = Template.bind({});
@@ -111,10 +112,8 @@ InverseEdge.args = {
     arrowHeadType: undefined,
     data: {
         inversePath: true,
-        markerStart: getMarkerEnd(
-            `${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType
-        ),
-    }
+        markerStart: getMarkerEnd(`${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType),
+    },
 };
 
 export const AdjustStrokeType = Template.bind({});
@@ -122,7 +121,7 @@ AdjustStrokeType.args = {
     ...Default.args,
     data: {
         strokeType: "double",
-    }
+    },
 };
 
 export const AdjustIntent = Template.bind({});
@@ -130,13 +129,13 @@ AdjustIntent.args = {
     ...Default.args,
     data: {
         intent: "warning",
-    }
+    },
 };
 
 export const AdjustHighlight = Template.bind({});
 AdjustHighlight.args = {
     ...Default.args,
     data: {
-        highlightColor: ["default", "alternate"]
-    }
+        highlightColor: ["default", "alternate"],
+    },
 };
diff --git a/src/extensions/react-flow/handles/HandleDefault.tsx b/src/extensions/react-flow/handles/HandleDefault.tsx
index 3b610ded..3bc9a0c2 100644
--- a/src/extensions/react-flow/handles/HandleDefault.tsx
+++ b/src/extensions/react-flow/handles/HandleDefault.tsx
@@ -1,15 +1,13 @@
-import React, {memo} from 'react';
-import {
-    HandleProps as ReactFlowHandleLegacyProps,
-    Handle as HandleLegacy,
-} from "react-flow-renderer";
-import {
-    HandleProps as ReactFlowHandleNextProps,
-    Handle as HandleNext,
-} from "react-flow-renderer-lts";
-import { HandleContent, HandleContentProps } from "./HandleContent";
+import React, { memo } from "react";
+import { Handle as HandleLegacy, HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
+import { Handle as HandleNext, HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
+import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
+import { HandleContent, HandleContentProps } from "./HandleContent";
+import { HandleTools } from "./HandleTools";
+
 interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     /**
      * Extended handle data.
@@ -28,37 +26,46 @@ export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNe
 
 export type HandleDefaultProps = HandleProps | HandleNextProps;
 
-export const HandleDefault = memo(({
-    flowVersion,
-    data,
-    tooltip,
-    children,
-    ...handleProps
-}: HandleDefaultProps) => {
+export const HandleDefault = memo(({ flowVersion, data, tooltip, children, ...handleProps }: HandleDefaultProps) => {
     const evaluateFlowVersion = useReactFlowVersion();
     const flowVersionCheck = flowVersion || evaluateFlowVersion;
+    const [toolsDisplayed, setToolsDisplayed] = React.useState<boolean>(false);
+
+    const handleClosing = () => {
+        setToolsDisplayed(false);
+    };
 
-    const tooltipTitle = !!tooltip ? { title: tooltip } : {};
+    const tooltipTitle = tooltip ? { title: tooltip } : {};
+    const configToolsOn = {
+        defaultIsOpen: true,
+        autoFocus: true,
+        interactionKind: BlueprintPopoverInteractionKind.HOVER,
+        onClosing: handleClosing,
+    };
+
+    const isToolsContent = children && typeof children !== "string" && children.type === HandleTools;
+    let handleContent = <HandleContent {...data}>{children}</HandleContent>;
+
+    if (isToolsContent && toolsDisplayed) {
+        handleContent = <HandleContent {...data}>{React.cloneElement(children ?? <></>, configToolsOn)}</HandleContent>;
+    }
+    if (isToolsContent && !toolsDisplayed) {
+        handleContent = <HandleContent {...data}></HandleContent>;
+    }
+    const handleClick = React.useCallback(() => setToolsDisplayed(!toolsDisplayed), []);
 
-    const handleContent = (
-        <HandleContent {...data}>
-            { children }
-        </HandleContent>
-    );
+    const handleConfig = {
+        ...handleProps,
+        ...tooltipTitle,
+        className: isToolsContent ? "clickable" : undefined,
+        onClick: isToolsContent ? handleClick : undefined,
+    };
 
     switch (flowVersionCheck) {
         case "legacy":
-            return (
-                <HandleLegacy {...handleProps} {...tooltipTitle}>
-                    { handleContent }
-                </HandleLegacy>
-            );
+            return <HandleLegacy {...handleConfig}>{handleContent}</HandleLegacy>;
         case "next":
-            return (
-                <HandleNext {...handleProps} {...tooltipTitle}>
-                    { handleContent }
-                </HandleNext>
-            );
+            return <HandleNext {...handleConfig}>{handleContent}</HandleNext>;
         default:
             return <></>;
     }
diff --git a/src/extensions/react-flow/handles/HandleTools.tsx b/src/extensions/react-flow/handles/HandleTools.tsx
new file mode 100644
index 00000000..c58ca680
--- /dev/null
+++ b/src/extensions/react-flow/handles/HandleTools.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ContextOverlay } from "../../../index";
+
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+
+export interface HandleToolsProps extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName"> {
+    children: string | JSX.Element | JSX.Element[];
+}
+
+export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToolsProps) => {
+    return (
+        <ContextOverlay
+            {...otherContextOverlayProps}
+            content={<div className={`${eccgui}-graphviz__handletools-content`}>{children}</div>}
+            popoverClassName={`${eccgui}-graphviz__handletools-overlay`}
+        >
+            <div className={`${eccgui}-graphviz__handletools-target`} />
+        </ContextOverlay>
+    );
+};
diff --git a/src/extensions/react-flow/handles/_handles.scss b/src/extensions/react-flow/handles/_handles.scss
index 2ba43e50..a362b157 100644
--- a/src/extensions/react-flow/handles/_handles.scss
+++ b/src/extensions/react-flow/handles/_handles.scss
@@ -1,72 +1,87 @@
 div.react-flow__handle {
-    color: $reactflow-node-border-color;
-    background-color: currentColor;
-    border-color: currentColor;
+    z-index: 2;
     width: $eccgui-size-block-whitespace * 0.5;
     height: $eccgui-size-block-whitespace * 0.5;
-    z-index: 2;
+    color: $reactflow-node-border-color;
+    background-color: currentcolor;
+    border-color: currentcolor;
     border-radius: 100%;
 
     .react-flow__node-default & {
-        background-color: currentColor;
+        background-color: currentcolor;
     }
 
-    &:before {
-        content: " ";
+    &::before {
         position: absolute;
-        //width: $eccgui-size-block-whitespace;
-        //height: $eccgui-size-block-whitespace;
-        top: $eccgui-size-block-whitespace * -0.5;
-        left: $eccgui-size-block-whitespace * -0.5;
-        bottom: $eccgui-size-block-whitespace * -0.5;
-        right: $eccgui-size-block-whitespace * -0.5;
-        opacity: 0.61;
+        inset: $eccgui-size-block-whitespace * -0.5;
+        z-index: 1;
         display: none;
-        background-color: currentColor;
-        border: solid 1px currentColor;
+        content: " ";
+        background-color: currentcolor;
+        border: solid 1px currentcolor;
         border-radius: 100%;
+        opacity: 0.61;
+    }
+
+    &.clickable {
+        &::after {
+            position: absolute;
+            inset: $eccgui-size-block-whitespace * -0.75;
+            z-index: -1;
+            display: none;
+            cursor: pointer;
+            content: " ";
+            border-radius: 100%;
+            outline: dotted $eccgui-size-block-whitespace * 0.25 currentcolor;
+        }
     }
 
     &:hover {
-        &:before {
-            box-shadow: 0 0 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25 currentColor;
+        &::before {
+            box-shadow: 0 0 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25 currentcolor;
         }
     }
 
     &.#{eccgui}-graphviz__handle--highlight-configuration {
         border-radius: 0;
 
-        &:before {
+        &::before {
             border-radius: 0;
         }
     }
 
     .react-flow__node:hover &.connectable {
-        &:before {
+        &::before {
             display: block;
         }
     }
 
-    &.react-flow__handle-connecting:hover, &.invalid-handle {
+    .react-flow__node:hover &.clickable {
+        &::after {
+            display: block;
+        }
+    }
+
+    &.react-flow__handle-connecting:hover,
+    &.invalid-handle {
         color: $eccgui-color-danger-text;
-        &:before {
+
+        &::before {
             display: block;
         }
     }
 
-    &.react-flow__handle-valid:hover, &.valid-handle {
+    &.react-flow__handle-valid:hover,
+    &.valid-handle {
         color: $eccgui-color-success-text;
     }
 }
 
 .#{$eccgui}-graphviz__handle__content {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    cursor: help;
+    inset: 0;
     overflow: hidden;
+    cursor: help;
 }
 
 div.react-flow__handle-right {
@@ -93,28 +108,22 @@ div.react-flow__handle-bottom {
 .#{$eccgui}-graphviz__node--minimal-circular {
     .react-flow__node:not(.selected) & {
         & ~ .react-flow__handle {
-            top: 50%;
-            left: $reactflow-node-basesize * 0.5;
-            right: auto;
-            bottom: auto;
-            transform: translateX(-50%) translateY(-50%);
+            inset: 50% auto auto $reactflow-node-basesize * 0.5;
             z-index: 0;
-            opacity: 0;
-            height: $reactflow-node-basesize;
             width: $reactflow-node-basesize;
+            height: $reactflow-node-basesize;
+            opacity: 0;
+            transform: translateX(-50%) translateY(-50%);
         }
     }
 
     & ~ .react-flow__handle:not(.connectable) {
-        top: 50%;
-        left: $reactflow-node-basesize * 0.5;
-        right: auto;
-        bottom: auto;
-        transform: translateX(-50%) translateY(-50%);
+        inset: 50% auto auto $reactflow-node-basesize * 0.5;
         z-index: 0;
-        opacity: 0;
-        height: $reactflow-node-basesize;
         width: $reactflow-node-basesize;
+        height: $reactflow-node-basesize;
+        opacity: 0;
+        transform: translateX(-50%) translateY(-50%);
     }
 }
 
@@ -132,23 +141,34 @@ div.react-flow__handle-bottom {
 
 .#{$eccgui}-graphviz__node--hidehandles {
     & ~ .react-flow__handle:not(.connectable) {
-        height: 1px;
+        z-index: -1;
         width: 1px;
+        height: 1px;
         visibility: hidden;
         border: none;
-        z-index: -1;
 
         &.react-flow__handle-top {
             top: 0;
         }
+
         &.react-flow__handle-right {
             right: 0;
         }
+
         &.react-flow__handle-bottom {
             bottom: 0;
         }
+
         &.react-flow__handle-left {
             left: 0;
         }
     }
 }
+
+.#{$eccgui}-graphviz__handletools-target {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/src/extensions/react-flow/handles/stories/HandleDefault.stories.tsx b/src/extensions/react-flow/handles/stories/HandleDefault.stories.tsx
index f632c1cd..2273096f 100644
--- a/src/extensions/react-flow/handles/stories/HandleDefault.stories.tsx
+++ b/src/extensions/react-flow/handles/stories/HandleDefault.stories.tsx
@@ -1,21 +1,21 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow, HandleDefault, HandleProps } from "./../../../../../index";
-import { Elements, ReactFlowProvider } from 'react-flow-renderer';
+import React, { useCallback, useEffect, useState } from "react";
+import { Elements, ReactFlowProvider } from "react-flow-renderer";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { HandleDefault, HandleProps, HandleTools, ReactFlow } from "./../../../../../index";
 import { edgeTypes } from "./../../edges/edgeTypes";
 
 const HandleDefaultDataProps = (data: HandleProps["data"]) => {
     // this is only a mock to get it as sub element in the table
     return <>{data.extendedTooltip}</>;
-}
+};
 
 export default {
-    title: "Extensions/React Flow/Default Handle",
+    title: "Extensions/React Flow/Handle",
     component: HandleDefault,
-    subcomponents: { HandleDefaultDataProps },
-    argTypes: {
-    },
-} as ComponentMeta<typeof HandleDefault>;
+    subcomponents: { HandleDefaultDataProps, HandleTools },
+    argTypes: {},
+} as Meta<typeof HandleDefault>;
 
 const HandleDefaultExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
@@ -30,9 +30,7 @@ const HandleDefaultExample = (args: any) => {
                     label: "Default ",
                     content: "Example content.",
                     minimalShape: "none",
-                    handles: [
-                        { ...args }
-                    ],
+                    handles: [{ ...args }],
                 },
                 position: { x: 50, y: 200 },
             },
@@ -48,24 +46,32 @@ const HandleDefaultExample = (args: any) => {
         [reactflowInstance]
     );
 
-    return <ReactFlowProvider>
-        <ReactFlow
-            elements={elements}
-            style={{ height: '400px' }}
-            onLoad={onLoad}
-            edgeTypes={ edgeTypes }
-            defaultZoom={1}
-        />
-    </ReactFlowProvider>
-}
+    return (
+        <ReactFlowProvider>
+            <ReactFlow
+                elements={elements}
+                style={{ height: "400px" }}
+                onLoad={onLoad}
+                edgeTypes={edgeTypes}
+                defaultZoom={1}
+            />
+        </ReactFlowProvider>
+    );
+};
 
-const Template: ComponentStory<typeof HandleDefault> = (args) => (
-    <HandleDefaultExample {...args} />
-);
+const Template: StoryFn<typeof HandleDefault> = (args) => <HandleDefaultExample {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
     type: "target",
     tooltip: "this is a target handle",
-    isConnectable: false,
+    isConnectable: true,
+};
+
+export const UsingHandleTools = Template.bind({});
+UsingHandleTools.args = {
+    type: "source",
+    tooltip: "this is a handle with tools overlay",
+    isConnectable: true,
+    children: <HandleTools>Content could be an menu, or something else.</HandleTools>,
 };
diff --git a/src/extensions/react-flow/index.ts b/src/extensions/react-flow/index.ts
index 967845bb..f2dd9449 100644
--- a/src/extensions/react-flow/index.ts
+++ b/src/extensions/react-flow/index.ts
@@ -7,6 +7,8 @@ export * from "./nodes/NodeContentExtension";
 export * from "./nodes/NodeTools";
 export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
+export * from "./handles/HandleContent";
+export * from "./handles/HandleTools";
 export * from "./edges/EdgeDefault";
 export * from "./edges/EdgeStep";
 export * from "./edges/EdgeTools";
diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx
index c054138b..7f21446b 100644
--- a/src/extensions/react-flow/nodes/NodeContent.tsx
+++ b/src/extensions/react-flow/nodes/NodeContent.tsx
@@ -38,6 +38,23 @@ export type NodeDimensions = {
     height: number;
 };
 
+type IntroductionTime = {
+    /**
+     * The delay time in ms before the introduction animation is displayed.
+     * Until the animation starts the node is invisible.
+     */
+    delay?: number;
+    /**
+     * The time in ms the introdcution animation runs.
+     */
+    run: number;
+    /**
+     * Animation used for the visual introduction.
+     * `outline` is used as default animation.
+     */
+    animation?: "landing" | "outline";
+};
+
 interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Name of icon that should be displayed before the node label.
@@ -167,6 +184,10 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * The node is displayed with some animated shadow for highlighting purposes.
      */
     animated?: boolean;
+    /**
+     * Time in ms used for a short animation of the node to visualize it was added or updated.
+     */
+    introductionTime?: number | IntroductionTime;
 
     /** Additional data stored in the node. */
     businessData?: NODE_DATA;
@@ -324,6 +345,7 @@ export function NodeContent<CONTENT_PROPS = any>({
     style = {},
     showUnconnectableHandles = false,
     animated = false,
+    introductionTime = 0,
     onNodeResize,
     nodeDimensions,
     // forwarded props
@@ -386,7 +408,7 @@ export function NodeContent<CONTENT_PROPS = any>({
         }
     }, [nodeContentRef, onNodeResize, minimalShape, nodeDimensions]);
 
-    //update node dimensions when resized
+    // update node dimensions when resized
     React.useEffect(() => {
         if (nodeDimensions) {
             setWidth(nodeDimensions.width);
@@ -394,6 +416,26 @@ export function NodeContent<CONTENT_PROPS = any>({
         }
     }, [nodeDimensions]);
 
+    // remove introduction class
+    React.useEffect(() => {
+        if (nodeContentRef && introductionTime) {
+            const timeDelay = typeof introductionTime === "object" ? introductionTime.delay ?? 0 : 0;
+            const timeRun = typeof introductionTime === "object" ? introductionTime.run : introductionTime;
+            setTimeout(() => {
+                nodeContentRef.current.className = nodeContentRef.current.className.replace(
+                    `${eccgui}-graphviz__node--introduction`,
+                    `${eccgui}-graphviz__node--introduction-runs`
+                );
+            }, timeDelay);
+            setTimeout(() => {
+                nodeContentRef.current.className = nodeContentRef.current.className.replace(
+                    `${eccgui}-graphviz__node--introduction-runs`,
+                    ""
+                );
+            }, timeDelay + timeRun);
+        }
+    }, [nodeContentRef, introductionTime]);
+
     if (handles.length > 0) {
         handles.forEach((handle) => {
             if (handle.position) {
@@ -430,12 +472,26 @@ export function NodeContent<CONTENT_PROPS = any>({
 
     const resizableStyles =
         !!onNodeResize === true && minimalShape === "none" && width + height > 0 ? { width, height } : {};
+
+    const introductionStyles = introductionTime
+        ? ({
+              "--node-introduction-time": `${
+                  typeof introductionTime === "object" ? introductionTime.run : introductionTime
+              }ms`,
+          } as React.CSSProperties)
+        : {};
     const nodeContent = (
         <>
             <section
                 ref={nodeContentRef}
                 {...otherProps}
-                style={{ ...style, ...highlightCustomPropertySettings, ...styleExpandDimensions, ...resizableStyles }}
+                style={{
+                    ...style,
+                    ...highlightCustomPropertySettings,
+                    ...styleExpandDimensions,
+                    ...resizableStyles,
+                    ...introductionStyles,
+                }}
                 className={
                     `${eccgui}-graphviz__node` +
                     ` ${eccgui}-graphviz__node--${size}` +
@@ -452,9 +508,13 @@ export function NodeContent<CONTENT_PROPS = any>({
                         ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`)
                         : "") +
                     (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
+                    (introductionTime ? ` ${eccgui}-graphviz__node--introduction` : "") +
                     (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "") +
                     (letPassWheelEvents === false ? ` nowheel` : "")
                 }
+                data-introduction-animation={
+                    typeof introductionTime === "object" ? introductionTime.animation : undefined
+                }
             >
                 <header
                     className={
diff --git a/src/extensions/react-flow/nodes/_nodes.scss b/src/extensions/react-flow/nodes/_nodes.scss
index 901cc52a..ed470b1f 100644
--- a/src/extensions/react-flow/nodes/_nodes.scss
+++ b/src/extensions/react-flow/nodes/_nodes.scss
@@ -1,50 +1,50 @@
+@use "sass:color";
+
 .react-flow__node {
-    &.selected:before {
-        content: " ";
+    &.selected::before {
         position: absolute;
-        top: -6 * $reactflow-node-border-width;
-        right: -6 * $reactflow-node-border-width;
-        bottom: -6 * $reactflow-node-border-width;
-        left: -6 * $reactflow-node-border-width;
-        border-width: 1px;
+        inset: -6 * $reactflow-node-border-width;
+        z-index: 0;
+        content: " ";
+        background-color: rgba($reactflow-edge-stroke-color-selected, 0.05);
         border-color: $reactflow-edge-stroke-color-selected;
-        border-radius: $reactflow-node-border-radius;
         border-style: dotted;
-        background-color: rgba($reactflow-edge-stroke-color-selected, 0.05);
-        z-index: 0;
+        border-width: 1px;
+        border-radius: $reactflow-node-border-radius;
     }
 
     &.react-flow__node-default {
+        width: unset !important;
+        height: unset !important;
+        padding: unset !important;
+        color: unset !important;
+        text-align: unset !important;
+
         // remove default styles
         background-color: unset !important;
-        color: unset !important;
         border: unset !important;
-        height: unset !important;
-        width: unset !important;
-        text-align: unset !important;
-        padding: unset !important;
 
-        &.selected, &.selected:hover {
+        &.selected,
+        &.selected:hover {
             box-shadow: none;
         }
     }
 }
 
 .#{$eccgui}-graphviz__node {
+    position: relative;
+    z-index: 1;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: stretch;
-    position: relative;
-    z-index: 1;
-
+    justify-content: center;
     font-size: $reactflow-node-font-size;
     color: $reactflow-node-color;
     background-color: $reactflow-node-background-color;
-    border-width: $reactflow-node-border-width;
     border-color: $reactflow-node-border-color;
-    border-radius: $reactflow-node-border-radius;
     border-style: solid;
+    border-width: $reactflow-node-border-width;
+    border-radius: $reactflow-node-border-radius;
 
     &:hover {
         box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
@@ -53,7 +53,6 @@
 
 .#{$eccgui}-graphviz__node--minimal-rectangular,
 .#{$eccgui}-graphviz__node--minimal-circular {
-
     /* FIXME: does not work correctly with tooltips around
     transition: width $reactflow-transition-time $reactflow-transition-function,
         max-height $reactflow-transition-time $reactflow-transition-function,
@@ -61,9 +60,9 @@
     */
 
     .react-flow__node:not(.selected) /*:not(:hover)*/ & {
+        z-index: 3;
         width: $reactflow-node-basesize;
         max-height: $reactflow-node-basesize;
-        z-index: 3;
 
         .#{$eccgui}-graphviz__node__header-depiction + .#{$eccgui}-graphviz__node__header-label,
         .#{$eccgui}-graphviz__node__header-menu,
@@ -74,8 +73,8 @@
         }
 
         .#{$eccgui}-graphviz__node__header-depiction {
-            max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
             max-width: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
+            max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
         }
     }
 }
@@ -92,15 +91,15 @@
 
 .#{$eccgui}-graphviz__node__header {
     box-sizing: border-box;
+    display: flex;
     flex-grow: 0;
     flex-shrink: 0;
-    display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     min-height: $reactflow-node-basesize;
 
     .#{$ns}-button:not([class*="#{$ns}-intent-"]) {
-        color: currentColor;
+        color: currentcolor;
     }
 }
 
@@ -121,17 +120,18 @@
 }
 
 .#{$eccgui}-graphviz__node__header-depiction {
-    border-radius: $reactflow-node-border-radius;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     /* TODO: does not work correctly with tooltips around
     transition: border-radius $reactflow-transition-time $reactflow-transition-function;
     */
     min-width: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
-    min-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
     max-width: calc(2 * (#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width}));
+    min-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
     overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    border-radius: $reactflow-node-border-radius;
 
     & .#{$eccgui}-depiction {
         flex-grow: 0;
@@ -150,8 +150,8 @@
 
     .#{$eccgui}-graphviz__node__header--large & {
         min-width: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
-        min-height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
         max-width: calc(2 * (#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width}));
+        min-height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
 
         .#{$eccgui}-depiction__image {
             height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
@@ -160,33 +160,33 @@
 }
 
 .#{$eccgui}-graphviz__node__header-label {
-    margin: 0 $eccgui-size-block-whitespace * 0.25;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-grow: 1;
-    flex-shrink: 1;
     display: inline-flex;
     flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+    margin: 0 $eccgui-size-block-whitespace * 0.25;
+    overflow: hidden;
     text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .#{$eccgui}-graphviz__node__header-label__mainline,
 .#{$eccgui}-graphviz__node__header-label__subline {
+    flex-grow: 0;
+    flex-shrink: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    flex-grow: 0;
-    flex-shrink: 0;
 }
 
 .#{$eccgui}-graphviz__node__content {
+    flex-grow: 1;
     padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25;
+    margin: 0.1px; // workaround that Firefox displays node borders better when canvas is scaled down
     overflow: hidden;
-    background-color: $card-background-color;
     color: $eccgui-color-workspace-text;
-    margin: 0.1px; // workaround that Firefox displays node borders better when canvas is scaled down
-    flex-grow: 1;
+    background-color: $card-background-color;
 
     &:hover {
         overflow: auto;
@@ -194,7 +194,7 @@
 }
 
 .#{$eccgui}-graphviz__node__footer {
-    padding: $eccgui-size-block-whitespace* 0.5 $eccgui-size-block-whitespace* 0.25;
+    padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25;
     font-size: $reactflow-node-font-size;
     color: $reactflow-node-color;
     background-color: $reactflow-node-background-color;
@@ -204,8 +204,8 @@
 
 .#{$eccgui}-graphviz__node__resizer,
 .#{$eccgui}-graphviz__node.is-resizeable {
-    min-height: 2.5 * $reactflow-node-basesize;
     min-width: 2.5 * $reactflow-node-basesize;
+    min-height: 2.5 * $reactflow-node-basesize;
 }
 
 .#{$eccgui}-graphviz__node__resizer {
@@ -255,8 +255,8 @@
 }
 
 .#{$eccgui}-graphviz__node--border-double {
-    border-width: 1.5 * $reactflow-node-border-width;
     border-style: double;
+    border-width: 1.5 * $reactflow-node-border-width;
 }
 
 .#{$eccgui}-graphviz__node--border-dashed {
@@ -282,21 +282,20 @@
 .#{$eccgui}-graphviz__node--animated:not([class*="#{$eccgui}-intent--"]) {
     --node-intent-color: #{$eccgui-color-workspace-text};
 
-    &:after {
+    &::after {
         --node-intent-angle: #{$reactflow-transition-anglestart};
-        content: " ";
-        display: block;
+
         position: absolute;
-        top: -2 * $reactflow-node-border-width;
-        left: -2 * $reactflow-node-border-width;
-        bottom: -2 * $reactflow-node-border-width;
-        right: -2 * $reactflow-node-border-width;
+        inset: -2 * $reactflow-node-border-width;
         z-index: -1;
+        display: block;
+        content: " ";
         border-style: solid;
         border-width: 2 * $reactflow-node-border-width;
-        @include node-intent-gradient;
         border-image-slice: 1;
         border-image-width: 2 * $reactflow-node-border-width;
+
+        @include node-intent-gradient;
     }
 }
 
@@ -327,21 +326,17 @@
 // hode highlight mark
 
 .#{$eccgui}-graphviz__node[class*="#{$eccgui}-graphviz__node--highlight-"] {
-
-    &:before {
-        opacity: $eccgui-opacity-disabled;
-        content: " ";
-        display: block;
+    &::before {
         position: absolute;
-        top: -2 * $reactflow-node-border-width;
-        left: -2 * $reactflow-node-border-width;
-        bottom: -2 * $reactflow-node-border-width;
-        right: -2 * $reactflow-node-border-width;
+        inset: -2 * $reactflow-node-border-width;
         z-index: -2;
-        box-shadow:
-            0 0 0 2 * $reactflow-node-border-width var(--node-highlight-default-color),
-            0 0 0 3.5 * $reactflow-node-border-width var(--node-highlight-alternate-color, var(--node-highlight-default-color));
+        display: block;
+        content: " ";
         border: 0.1px solid transparent; // workaround for Firefox, otherwise shadows are overlayed
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width var(--node-highlight-default-color),
+            0 0 0 3.5 * $reactflow-node-border-width
+                var(--node-highlight-alternate-color, var(--node-highlight-default-color));
+        opacity: $eccgui-opacity-disabled;
     }
 }
 
@@ -364,7 +359,7 @@
 
 @property --node-intent-angle {
     // rule necessary, otherwise increasing --node-intent-angle for animation does not work correctly
-    syntax: '<angle>';
+    syntax: "<angle>";
     initial-value: #{$reactflow-transition-anglestart};
     inherits: true;
 }
@@ -373,23 +368,99 @@
     animation: spinningborder 8 * $reactflow-transition-time linear infinite;
 
     @keyframes spinningborder {
-        to {
+        100% {
             --node-intent-angle: #{$reactflow-transition-anglestart + 360deg};
         }
+
         @for $step from 1 through 10 {
             /*
             This is a fix/workaround for Firefox/Gecko.
             Looks like "animation" the custom property is not enough.
             It is also necessary to repeat the rule.
             */
-            #{$step*10}#{"%"} {
+            #{$step * 10}#{"%"} {
                 --node-intent-angle: #{$reactflow-transition-anglestart + $step * 36deg};
+
                 @include node-intent-gradient;
             }
         }
     }
 }
 
+// node introduction animation
+
+.#{$eccgui}-graphviz__node--introduction {
+    visibility: hidden;
+    animation-play-state: paused;
+
+    & ~ * {
+        visibility: hidden;
+    }
+}
+
+.#{$eccgui}-graphviz__node--introduction-runs {
+    animation-name: outline;
+    animation-duration: var(--node-introduction-time);
+    animation-play-state: running;
+    animation-timing-function: linear;
+
+    &[data-introduction-animation="landing"] {
+        animation-name: landing;
+
+        & ~ * {
+            visibility: hidden;
+        }
+    }
+
+    @keyframes landing {
+        0% {
+            filter: blur($eccgui-size-block-whitespace);
+            outline: solid 0 rgb(0 0 0 / 0%);
+            outline-offset: 0;
+            opacity: 0;
+            transform: scale(2);
+        }
+
+        61% {
+            filter: blur(0);
+            outline: solid 0 rgb(0 0 0 / 39%);
+            outline-offset: 0;
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        100% {
+            filter: blur(0);
+            outline: solid $eccgui-size-block-whitespace rgb(0 0 0 / 0%);
+            outline-offset: 2 * $eccgui-size-block-whitespace;
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    @keyframes outline {
+        0% {
+            outline: solid 0 rgba($eccgui-color-accent, 0);
+            outline-offset: 0;
+        }
+
+        9% {
+            outline: solid 0.5 * $eccgui-size-block-whitespace rgba($eccgui-color-accent, 0.39);
+            outline-offset: 0;
+        }
+
+        85% {
+            outline: solid 0.5 * $eccgui-size-block-whitespace rgba($eccgui-color-accent, 0.39);
+            outline-offset: 0;
+        }
+
+        100% {
+            outline: solid 0 rgba($eccgui-color-accent, 0);
+            outline-offset: 2 * $eccgui-size-block-whitespace;
+        }
+    }
+}
+
 // Node tools
 
 .#{$eccgui}-graphviz__nodetools__content {
@@ -401,10 +472,10 @@
 // Node content extension
 
 .#{$eccgui}-graphviz__node__extension {
-    background-color: $reactflow-node-background-color;
-    min-height: $eccgui-size-block-whitespace* 0.5;
     flex-grow: 1;
     flex-shrink: 1;
+    min-height: $eccgui-size-block-whitespace * 0.5;
+    background-color: $reactflow-node-background-color;
 
     .#{$eccgui}-graphviz__node--tiny & {
         max-height: $reactflow-node-basesize * 3;
@@ -430,23 +501,22 @@
 .#{$eccgui}-graphviz__node__extension--expanded {
     display: flex;
     flex-direction: column;
+
     // separation between node content and extension
     // do not inherit styles here
-    border-top-color: $eccgui-color-separation-divider !important;
-    border-top-width: 1px !important;
-    border-top-style: solid !important;
+    border-top: 1px solid $eccgui-color-separation-divider !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
 
     &.#{$eccgui}-graphviz__node__extension--slideout {
         position: absolute;
         top: 100%;
-        left: -1 * $reactflow-node-border-width;
         right: -1 * $reactflow-node-border-width;
-        border-width: $reactflow-node-border-width;
+        left: -1 * $reactflow-node-border-width;
         border-color: $reactflow-node-border-color;
-        border-radius: $reactflow-node-border-radius;
         border-style: solid;
+        border-width: $reactflow-node-border-width;
+        border-radius: $reactflow-node-border-radius;
     }
 
     &:not(.#{$eccgui}-graphviz__node__extension--slideout) + .#{$eccgui}-graphviz__node__footer {
@@ -456,16 +526,15 @@
 
 .#{$eccgui}-graphviz__node__extension-expandbutton {
     display: flex;
-    min-height: 0;
-    max-height: $eccgui-size-block-whitespace* 0.5;
     width: 100%;
+    min-height: 0;
+    max-height: $eccgui-size-block-whitespace * 0.5;
 }
 
 .#{$eccgui}-graphviz__node__extension-body {
-    padding: $eccgui-size-block-whitespace* 0.5 $eccgui-size-block-whitespace* 0.25;
     flex-grow: 0;
     flex-shrink: 1;
-    overflow: auto;
+    padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25;
     overflow: auto;
 
     .#{$eccgui}-tag__item {
@@ -476,15 +545,15 @@
         }
 
         &:last-child {
-            max-width: 100%
+            max-width: 100%;
         }
     }
 }
 
 .#{$eccgui}-graphviz__node__extension-actions {
-    text-align: center;
     flex-grow: 0;
     flex-shrink: 0;
+    text-align: center;
 }
 
 // Node highlights (@deprecated) // FIXME: remove in v24.0.0
@@ -492,61 +561,52 @@
 .#{$eccgui}-graphviz__node--highlight-success,
 .#{$eccgui}-graphviz__node--highlight-warning,
 .#{$eccgui}-graphviz__node--highlight-danger {
-    &:before {
-        content: " ";
-        display: block;
+    &::before {
         position: absolute;
-        top: -2 * $reactflow-node-border-width;
-        left: -2 * $reactflow-node-border-width;
-        bottom: -2 * $reactflow-node-border-width;
-        right: -2 * $reactflow-node-border-width;
+        inset: -2 * $reactflow-node-border-width;
+        z-index: -1;
+        display: block;
+        content: " ";
         border-radius: inherit;
         box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text !important;
-        z-index: -1;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-match,
 .#{$eccgui}-graphviz__node--highlight-altmatch {
-    &:after {
-        content: " ";
-        display: block;
+    &::after {
         position: absolute;
-        top: -2 * $reactflow-node-border-width;
-        left: -2 * $reactflow-node-border-width;
-        bottom: -2 * $reactflow-node-border-width;
-        right: -2 * $reactflow-node-border-width;
+        inset: -2 * $reactflow-node-border-width;
+        z-index: -1;
+        display: block;
+        content: " ";
         border-radius: inherit;
         box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-accent;
-        z-index: -1;
     }
 
     &.#{$eccgui}-graphviz__node--highlight-success,
     &.#{$eccgui}-graphviz__node--highlight-warning,
     &.#{$eccgui}-graphviz__node--highlight-danger {
-        &:after {
-            top: -4 * $reactflow-node-border-width;
-            left: -4 * $reactflow-node-border-width;
-            bottom: -4 * $reactflow-node-border-width;
-            right: -4 * $reactflow-node-border-width;
+        &::after {
+            inset: -4 * $reactflow-node-border-width;
         }
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-success {
-    &:before {
+    &::before {
         box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text !important;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-warning {
-    &:before {
+    &::before {
         box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text !important;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-altmatch {
-    &:after {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width complement($eccgui-color-primary) !important;
+    &::after {
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width color.complement($eccgui-color-primary) !important;
     }
 }
diff --git a/src/extensions/react-flow/nodes/stories/NodeDefault.stories.tsx b/src/extensions/react-flow/nodes/stories/NodeDefault.stories.tsx
index 1a5b64d6..7144cca4 100644
--- a/src/extensions/react-flow/nodes/stories/NodeDefault.stories.tsx
+++ b/src/extensions/react-flow/nodes/stories/NodeDefault.stories.tsx
@@ -1,15 +1,15 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow } from "./../../../../cmem";
-import { Elements } from 'react-flow-renderer';
+import React, { useCallback, useEffect, useState } from "react";
+import { Elements } from "react-flow-renderer";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import { NodeDefault } from "./../NodeDefault";
+import { ReactFlow } from "./../../../../cmem";
 import { NodeContent } from "./../NodeContent";
+import { NodeDefault } from "./../NodeDefault";
 import { nodeTypes } from "./../nodeTypes";
 import { Default as NodeContentExample } from "./NodeContent.stories";
 
 export default {
-    title: "Extensions/React Flow/Default Node",
+    title: "Extensions/React Flow/Node",
     component: NodeDefault,
     subcomponents: { NodeContent },
     argTypes: {
@@ -21,7 +21,7 @@ export default {
             type: { required: true },
             description: "Position on React-Flow canvas.",
             table: {
-                type: { summary: "XYPosition" }
+                type: { summary: "XYPosition" },
             },
         },
         type: {
@@ -29,34 +29,34 @@ export default {
             description: "Key of the imported and connected `nodeTypes` to specify what node implementation is used.",
             table: {
                 type: { summary: "string" },
-                defaultValue: { summary: "default" }
+                defaultValue: { summary: "default" },
             },
             options: Object.keys(nodeTypes),
-            mapping: Object.fromEntries(Object.keys(nodeTypes).map(type => [type, type])),
+            mapping: Object.fromEntries(Object.keys(nodeTypes).map((type) => [type, type])),
         },
         style: {
             control: "object",
             description: "css properties",
             table: {
-                type: { summary: "React.CSSProperties" }
+                type: { summary: "React.CSSProperties" },
             },
         },
         className: {
             control: "text",
-            description: "additional class name"
+            description: "additional class name",
         },
         targetPosition: {
             description: "'left' | 'right' | 'top' | 'bottom' handle position",
             table: {
                 type: { summary: "Position" },
-                defaultValue: { summary: "Position.Left" }
+                defaultValue: { summary: "Position.Left" },
             },
         },
         sourcePosition: {
             description: "'left' | 'right' | 'top' | 'bottom' handle position",
             table: {
                 type: { summary: "Position" },
-                defaultValue: { summary: "Position.Right" }
+                defaultValue: { summary: "Position.Right" },
             },
         },
         isHidden: {
@@ -64,7 +64,7 @@ export default {
             description: "if true, the node will not be rendered",
             table: {
                 type: { summary: "boolean" },
-                defaultValue: { summary: "false" }
+                defaultValue: { summary: "false" },
             },
         },
         draggable: {
@@ -72,7 +72,7 @@ export default {
             description: "if option is not set, the node is draggable (overwrites general nodesDraggable option)",
             table: {
                 type: { summary: "boolean" },
-                defaultValue: { summary: "true" }
+                defaultValue: { summary: "true" },
             },
         },
         connectable: {
@@ -80,7 +80,7 @@ export default {
             description: "if option is not set, the node is connectable (overwrites general nodesConnectable option)",
             table: {
                 type: { summary: "boolean" },
-                defaultValue: { summary: "true" }
+                defaultValue: { summary: "true" },
             },
         },
         selectable: {
@@ -88,12 +88,12 @@ export default {
             description: "if option is not set, the node is selectable (overwrites general elementsSelectable option)",
             table: {
                 type: { summary: "boolean" },
-                defaultValue: { summary: "true" }
+                defaultValue: { summary: "true" },
             },
         },
         dragHandle: {
             control: "text",
-            description: "selector for specifying an element as a drag handle"
+            description: "selector for specifying an element as a drag handle",
         },
     },
 } as ComponentMeta<typeof NodeDefault>;
@@ -104,9 +104,7 @@ const NodeDefaultExample = (args: any) => {
     //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
 
     useEffect(() => {
-        setElements([
-            args
-        ] as Elements);
+        setElements([args] as Elements);
     }, [args]);
 
     const onLoad = useCallback(
@@ -118,23 +116,23 @@ const NodeDefaultExample = (args: any) => {
         [reactflowInstance]
     );
 
-    return <ReactFlow
-        elements={elements}
-        style={{ height: '400px' }}
-        onLoad={onLoad}
-        nodeTypes={ nodeTypes }
-        defaultZoom={1}
-    />
-}
+    return (
+        <ReactFlow
+            elements={elements}
+            style={{ height: "400px" }}
+            onLoad={onLoad}
+            nodeTypes={nodeTypes}
+            defaultZoom={1}
+        />
+    );
+};
 
-const Template: ComponentStory<typeof NodeDefault> = (args) => (
-    <NodeDefaultExample {...args} /*some comment*/ />
-);
+const Template: ComponentStory<typeof NodeDefault> = (args) => <NodeDefaultExample {...args} /*some comment*/ />;
 
 export const Default = Template.bind({});
 Default.args = {
-    id: '1',
-    type: 'default',
+    id: "1",
+    type: "default",
     data: NodeContentExample.args,
     position: { x: 50, y: 50 },
 };