diff --git a/CHANGELOG.md b/CHANGELOG.md
index 518f02481..284f5d9ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,38 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   `<ApplicationContainer />`:
+    -   `monitorDropzonesFor` property can be used to monitor application wide dropzones for dragged elements via data attributes attached to body element containing the data transfer type of drag over events.
+-   `<ReactFlow />`
+    -   `dropzoneFor` property can be used to mark react flow canvas as matching area to drop dragged elements.
+-   `<Accordion />`, `<AccordionItem />`
+    -   `whitespaceSize` property to define how much whitespace is used on top and bottom inside the header and content of an accordion item.
+    -   `separationSize` property defines how much space is used for the separation between an accordion item and the next one.
+-   class name prefixes are now available by variables with more readable names:
+    -   BlueprintJS: `$prefix-blueprintjs` (current value is `bp5`)
+    -   Carbon Design System: `$prefix-carbon` (current value is `cds`)
+    -   eccenca GUI elements: `$prefix-eccgui` (current value is `eccgui`)
+
+### Fixed
+
+-   `<ElapsedDateTimeDisplay />`
+    -   negative values are not shown (e.g. in case server and browser clocks are apart)
+
+### Changed
+
+-   `<TextArea />`
+    -   improve visual alignment to `TextField` regarding whitespace and colors
+-   basic styles for Uppy widget were improved and moved to its own component folder
+
+### Deprecated
+
+-   `<Accordion />`
+    -   `size` property in favour of `whitespaceSize`
+-   `<AccordionItem />`
+    -   `condensed` property in favour of `whitespaceSize="none"`
+
 ## [23.7.0] - 2024-06-26
 
 ### Added
diff --git a/package.json b/package.json
index e3979afe3..3145d863a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.7.0",
+    "version": "23.8.0-rc.2",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -166,7 +166,10 @@
         "**/word-wrap": "^1.2.4",
         "**/webpack-dev-middleware": "^6.1.2",
         "**/braces": "^3.0.3",
-        "**/ws": "^8.17.1"
+        "**/ws": "^8.17.1",
+        "**/ejs": "^3.1.10",
+        "**/tar": "^6.2.1",
+        "**/express": "^4.19.2"
     },
     "husky": {
         "hooks": {
diff --git a/src/_shame.scss b/src/_shame.scss
index 6e1fb7315..e808a65f0 100644
--- a/src/_shame.scss
+++ b/src/_shame.scss
@@ -19,33 +19,6 @@
     border: 0;
 }
 
-.uppy-DragDrop-container {
-    color: inherit;
-    background-color: $data-table-zebra-color;
-    // TODO: create own file upload elements
-
-    border-width: 1px;
-
-    //border-style: dotted;
-    border-radius: 3px;
-
-    .uppy-DragDrop-inner {
-        padding: 1rem;
-        line-height: inherit;
-    }
-
-    .uppy-DragDrop-arrow {
-        width: 2rem;
-        height: 2rem;
-        margin-bottom: 0.5rem;
-    }
-
-    .uppy-DragDrop-label {
-        margin-bottom: 0.5rem;
-        font-size: inherit;
-    }
-}
-
 /*
     WORKAROUND: thinner scrollbars
 */
diff --git a/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx b/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx
index b198c84c0..c9e7885bc 100644
--- a/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx
+++ b/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx
@@ -22,7 +22,8 @@ export interface ElapsedDateTimeDisplayProps extends TestableComponent {
 
 const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
     const absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime();
-    return new Date().getTime() - absoluteMs;
+    const elapsed = new Date().getTime() - absoluteMs;
+    return elapsed < 0 ? 0 : elapsed;
 };
 
 /**
diff --git a/src/cmem/react-flow/ReactFlow/ReactFlow.tsx b/src/cmem/react-flow/ReactFlow/ReactFlow.tsx
index f2b92f417..01aa61cd4 100644
--- a/src/cmem/react-flow/ReactFlow/ReactFlow.tsx
+++ b/src/cmem/react-flow/ReactFlow/ReactFlow.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { default as ReactFlowOriginal, ReactFlowProps as ReactFlowOriginalProps } from "react-flow-renderer";
 
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 import { useReactFlowScrollOnDrag } from "../extensions/scrollOnDragHook";
@@ -16,6 +17,11 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
      */
     configuration?: "unspecified" | "graph" | "workflow" | "linking";
 
+    /**
+     * Types data transfers that can be dragged in and dropped on the canvas.
+     */
+    dropzoneFor?: string[];
+
     /** If defined the canvas scrolls on all drag operations (node, selection, edge connect)
      * when the mouse pointer comes near the canvas borders or goes beyond them.
      * The `id` property of the ReactFlow component must be set in order for this to work.
@@ -37,7 +43,37 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
  * Corporate Memory tools.
  */
 export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>(
-    ({ configuration = "unspecified", scrollOnDrag, children, ...originalProps }, ref) => {
+    ({ configuration = "unspecified", scrollOnDrag, dropzoneFor, children, className, ...originalProps }, outerRef) => {
+        const innerRef = React.useRef<HTMLDivElement>(null);
+        React.useImperativeHandle(outerRef, () => innerRef.current!, []);
+
+        React.useEffect(() => {
+            const reactflowContainer = innerRef?.current;
+
+            if (reactflowContainer && dropzoneFor) {
+                const addDragover = (event: DragEvent) => {
+                    reactflowContainer.classList.add(`${eccgui}-graphviz__canvas--draghover`);
+                    event.preventDefault();
+                };
+
+                const removeDragover = (event: DragEvent) => {
+                    if (reactflowContainer === event.target) {
+                        reactflowContainer.classList.remove(`${eccgui}-graphviz__canvas--draghover`);
+                    }
+                };
+
+                reactflowContainer.addEventListener("dragover", addDragover);
+                reactflowContainer.addEventListener("dragleave", removeDragover);
+                reactflowContainer.addEventListener("drop", removeDragover);
+                return () => {
+                    reactflowContainer.removeEventListener("dragover", addDragover);
+                    reactflowContainer.removeEventListener("dragleave", removeDragover);
+                    reactflowContainer.removeEventListener("drop", removeDragover);
+                };
+            }
+            return;
+        }, [innerRef, dropzoneFor]);
+
         /** If the hot keys should be disabled. By default, they are always disabled. */
         const { hotKeysDisabled } = React.useContext(ReactFlowHotkeyContext);
 
@@ -57,11 +93,13 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>(
 
         return (
             <ReactFlowOriginal
-                ref={ref}
+                ref={innerRef}
+                className={`${eccgui}-graphviz__canvas` + className ? ` ${className}` : ""}
                 nodeTypes={configReactFlow[configuration].nodeTypes}
                 edgeTypes={configReactFlow[configuration].edgeTypes}
                 {...originalProps}
                 {...scrollOnDragFunctions}
+                data-dropzone-for={dropzoneFor ? dropzoneFor.join(" ") : undefined}
                 selectionKeyCode={hotKeysDisabled ? null : (selectionKeyCode as any)}
                 deleteKeyCode={hotKeysDisabled ? null : (deleteKeyCode as any)}
                 multiSelectionKeyCode={hotKeysDisabled ? null : (multiSelectionKeyCode as any)}
diff --git a/src/cmem/react-flow/_canvas.scss b/src/cmem/react-flow/_canvas.scss
new file mode 100644
index 000000000..78311180b
--- /dev/null
+++ b/src/cmem/react-flow/_canvas.scss
@@ -0,0 +1,15 @@
+.eccgui-graphviz__canvas--draghover {
+    body[data-monitor-dropzone~="application/reactflow"] &[data-dropzone-for~="application/reactflow"],
+    body[data-monitor-dropzone~="Files"] &[data-dropzone-for~="Files"] {
+        background-color: rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
+        box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
+
+        & > * {
+            opacity: $eccgui-opacity-narrow;
+        }
+
+        .react-flow__node {
+            pointer-events: none !important;
+        }
+    }
+}
diff --git a/src/cmem/react-flow/_index.scss b/src/cmem/react-flow/_index.scss
index add982b89..5b598acda 100644
--- a/src/cmem/react-flow/_index.scss
+++ b/src/cmem/react-flow/_index.scss
@@ -1,4 +1,5 @@
 @import "./configuration/colors";
+@import "canvas";
 @import "edges";
 @import "handles";
 @import "minimap";
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 4ca43596d..dfdfdf001 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -3,13 +3,24 @@ import { Accordion as CarbonAccordion, AccordionProps as CarbonAccordionProps }
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import { AccordionItemProps } from "./AccordionItem";
+
 export interface AccordionProps extends Omit<CarbonAccordionProps, "className" | "size"> {
     /**
      * Additional CSS classes.
      */
     className?: string;
+    /**
+     * Defines how much whitespace is used on top and bottom inside the header and content of an accordion item.
+     */
+    whitespaceSize?: AccordionItemProps["whitespaceSize"];
+    /**
+     * Defines how much space is used for the separation between an accordion item and the next one.
+     */
+    separationSize?: AccordionItemProps["separationSize"];
     /**
      * How much space is used for the header of the each of the accordion items.
+     * @deprecated Use ẁhitespaceSize` on `Accordion` or `AccordionItem` instead.
      */
     size?: "small" | "medium" | "large";
 }
@@ -24,12 +35,28 @@ export const Accordion = ({
     children,
     className = "",
     align = "start",
+    whitespaceSize = "medium",
+    separationSize = "none",
     size = "medium",
     ...otherProps
 }: AccordionProps) => {
+    const headerWhitespaceSize = typeof whitespaceSize === "string" ? whitespaceSize : whitespaceSize.header;
+    const contentWhitespaceSize = typeof whitespaceSize === "string" ? whitespaceSize : whitespaceSize.content;
     return (
         <CarbonAccordion
-            className={`${eccgui}-accordion__container ` + className}
+            className={
+                `${eccgui}-accordion__container` +
+                (headerWhitespaceSize !== "medium"
+                    ? ` ${eccgui}-accordion__container--global-headerspace-${headerWhitespaceSize}`
+                    : "") +
+                (contentWhitespaceSize !== "medium"
+                    ? ` ${eccgui}-accordion__container--global-contentspace-${contentWhitespaceSize}`
+                    : "") +
+                (separationSize !== "none"
+                    ? ` ${eccgui}-accordion__container--global-separationspace-${separationSize}`
+                    : "") +
+                (className ? ` ${className}` : "")
+            }
             align={align}
             size={carbonAccordionSizeMapping[size]}
             {...otherProps}
diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx
index a20ee31d0..5b9c01939 100644
--- a/src/components/Accordion/AccordionItem.tsx
+++ b/src/components/Accordion/AccordionItem.tsx
@@ -6,6 +6,8 @@ import {
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+type sizeOptions = "none" | "small" | "medium" | "large";
+
 export interface AccordionItemProps
     extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
     /**
@@ -20,8 +22,18 @@ export interface AccordionItemProps
      * use full available width for content
      */
     fullWidth?: boolean;
+    /**
+     * Defines how much whitespace is used on top and bottom inside the header and content of an accordion item.
+     * Seeting on `AccordionItem` overwrites the global setting on `Accordion`.
+     */
+    whitespaceSize?: sizeOptions | { header: sizeOptions; content: sizeOptions };
+    /**
+     * Defines how much space is used for the separation between the accordion item and the next one.
+     */
+    separationSize?: sizeOptions;
     /**
      * minimize white space and paddings
+     * @deprecated Use `whitespaceSize="none"` on `Accordion` or `AccordionItem` instead.
      */
     condensed?: boolean;
     /**
@@ -40,10 +52,14 @@ export const AccordionItem = ({
     className = "",
     fullWidth = false,
     elevated = false,
+    whitespaceSize = "medium",
+    separationSize = "none",
     condensed = false,
     noBorder = false,
     ...otherProps
 }: AccordionItemProps) => {
+    const headerWhitespaceSize = typeof whitespaceSize === "string" ? whitespaceSize : whitespaceSize.header;
+    const contentWhitespaceSize = typeof whitespaceSize === "string" ? whitespaceSize : whitespaceSize.content;
     return (
         <CarbonAccordionItem
             className={
@@ -51,6 +67,13 @@ export const AccordionItem = ({
                 (className ? " " + className : "") +
                 (fullWidth ? ` ${eccgui}-accordion__item--fullwidth` : "") +
                 (elevated ? ` ${eccgui}-accordion__item--elevated` : "") +
+                (headerWhitespaceSize !== "medium"
+                    ? ` ${eccgui}-accordion__item--headerspace-${headerWhitespaceSize}`
+                    : "") +
+                (contentWhitespaceSize !== "medium"
+                    ? ` ${eccgui}-accordion__item--contentspace-${contentWhitespaceSize}`
+                    : "") +
+                (separationSize !== "none" ? ` ${eccgui}-accordion__item--separationspace-${separationSize}` : "") +
                 (condensed ? ` ${eccgui}-accordion__item--condensed` : "") +
                 (noBorder ? ` ${eccgui}-accordion__item--noborder` : "")
             }
diff --git a/src/components/Accordion/Stories/Accordion.stories.tsx b/src/components/Accordion/Stories/Accordion.stories.tsx
index 2faceed48..785c7e9fc 100644
--- a/src/components/Accordion/Stories/Accordion.stories.tsx
+++ b/src/components/Accordion/Stories/Accordion.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Accordion, AccordionItem } from "../../../../index";
 import { Default as AccordionStoryItem } from "../Stories/AccordionItem.stories";
@@ -13,14 +13,22 @@ export default {
             control: "none",
             description: "Elements to include into the Accordion component",
         },
+        whitespaceSize: {
+            control: "select",
+            options: ["none", "small", "medium", "large"],
+        },
+        separationSize: {
+            control: "select",
+            options: ["none", "small", "medium", "large"],
+        },
     },
-} as ComponentMeta<typeof Accordion>;
+} as Meta<typeof Accordion>;
 
-const TemplateIcons: ComponentStory<typeof Accordion> = (args) => <Accordion {...args} />;
+const TemplateIcons: StoryFn<typeof Accordion> = (args) => <Accordion {...args} />;
 export const Default = TemplateIcons.bind({});
 Default.args = {
     children: [
-        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 1" />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 1" fullWidth />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 2 (elevated)" elevated />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 3 (initially opened)" open />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 4 (disabled)" disabled />,
diff --git a/src/components/Accordion/Stories/AccordionItem.stories.tsx b/src/components/Accordion/Stories/AccordionItem.stories.tsx
index d6b328056..12e2bdc9b 100644
--- a/src/components/Accordion/Stories/AccordionItem.stories.tsx
+++ b/src/components/Accordion/Stories/AccordionItem.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
 
@@ -12,10 +12,18 @@ export default {
             control: "none",
             description: "content of accordion item",
         },
+        whitespaceSize: {
+            control: "select",
+            options: ["none", "small", "medium", "large"],
+        },
+        separationSize: {
+            control: "select",
+            options: ["none", "small", "medium", "large"],
+        },
     },
-} as ComponentMeta<typeof AccordionItem>;
+} as Meta<typeof AccordionItem>;
 
-const Template: ComponentStory<typeof AccordionItem> = (args) => (
+const Template: StoryFn<typeof AccordionItem> = (args) => (
     <Accordion>
         <AccordionItem {...args} />
     </Accordion>
diff --git a/src/components/Accordion/accordion.scss b/src/components/Accordion/accordion.scss
index 26814570f..578ae93db 100644
--- a/src/components/Accordion/accordion.scss
+++ b/src/components/Accordion/accordion.scss
@@ -1,21 +1,85 @@
 // lib import
+@use "sass:color";
 @use "~@carbon/styles/scss/components/accordion/accordion";
 @include accordion.accordion;
 
 // own vars
 $eccgui-color-accordion-background-elevated: rgba($eccgui-color-accent, 0.1) !default;
 $eccgui-color-accordion-toggler-hover: $menu-item-color-hover !default;
-$eccgui-color-accordion-toggler-elevated-hover: mix(
+$eccgui-color-accordion-toggler-elevated-hover: color.mix(
     $eccgui-color-accordion-background-elevated,
     $eccgui-color-accordion-toggler-hover,
     50%
 ) !default;
+$eccgui-size-accordion-header-baseheight: mini-units(5) !default;
+$eccgui-size-accordion-content-basespace: $eccgui-size-block-whitespace * 0.5 !default;
+$eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
 
 // changes
 
+.#{$prefix}--accordion {
+    --#{$eccgui}-accordion-header-height: #{$eccgui-size-accordion-header-baseheight};
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace};
+    --#{$eccgui}-accordion-separation: 0;
+}
+.#{$eccgui}-accordion__item--condensed,
+.#{$eccgui}-accordion__container--global-headerspace-none,
+.#{$eccgui}-accordion__item--headerspace-none {
+    --#{$eccgui}-accordion-header-height: 0;
+}
+.#{$eccgui}-accordion__item--condensed,
+.#{$eccgui}-accordion__container--global-contentspace-none,
+.#{$eccgui}-accordion__item--contentspace-none {
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-block-whitespace * 0.25};
+}
+.#{$eccgui}-accordion__container--global-headerspace-small,
+.#{$eccgui}-accordion__item--headerspace-small {
+    --#{$eccgui}-accordion-header-height: calc(
+        #{$eccgui-size-accordion-header-baseheight} - #{$eccgui-size-block-whitespace * 0.5}
+    );
+}
+.#{$eccgui}-accordion__container--global-contentspace-small,
+.#{$eccgui}-accordion__item--contentspace-small {
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace * 0.5};
+}
+.#{$eccgui}-accordion__container--global-headerspace-large,
+.#{$eccgui}-accordion__item--headerspace-large {
+    --#{$eccgui}-accordion-header-height: calc(
+        #{$eccgui-size-accordion-header-baseheight} + #{$eccgui-size-block-whitespace * 0.5}
+    );
+}
+.#{$eccgui}-accordion__container--global-contentspace-large,
+.#{$eccgui}-accordion__item--contentspace-large {
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace * 1.5};
+}
+
+.#{$eccgui}-accordion__container--global-separationspace-small,
+.#{$eccgui}-accordion__item--separationspace-small {
+    --#{$eccgui}-accordion-separation: #{$eccgui-size-accordion-separation * 0.5};
+}
+.#{$eccgui}-accordion__container--global-separationspace-medium,
+.#{$eccgui}-accordion__item--separationspace-medium {
+    --#{$eccgui}-accordion-separation: #{$eccgui-size-accordion-separation};
+}
+.#{$eccgui}-accordion__container--global-separationspace-large,
+.#{$eccgui}-accordion__item--separationspace-large {
+    --#{$eccgui}-accordion-separation: #{$eccgui-size-accordion-separation * 1.5};
+}
+
+.#{$eccgui}-accordion__item {
+    &:not(:last-child) {
+        margin-bottom: var(--#{$eccgui}-accordion-separation);
+    }
+
+    [class*="#{$eccgui}-accordion__container--global-separationspace-"] &:not(.#{$eccgui}-accordion__item--noborder),
+    &[class*="#{$eccgui}-accordion__item--separationspace-"]:not(.#{$eccgui}-accordion__item--noborder) {
+        border-bottom: 1px solid var(--#{$prefix}-border-subtle);
+    }
+}
+
 .#{$prefix}--accordion__heading {
     align-items: center;
-    min-height: mini-units(5);
+    min-height: var(--#{$eccgui}-accordion-header-height, mini-units(5));
     color: inherit;
 
     .#{$prefix}--accordion__arrow {
@@ -25,6 +89,23 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
             margin: 0 0 0 $eccgui-size-block-whitespace * 0.5;
         }
     }
+
+    .#{$eccgui}-accordion__item--condensed &,
+    .#{$eccgui}-accordion__container--global-contentspace-none &,
+    .#{$eccgui}-accordion__item--contentspace-none & {
+        .#{$prefix}--accordion__arrow {
+            margin: 0;
+        }
+
+        .#{$prefix}--accordion__title {
+            margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
+        }
+    }
+
+    &:hover::before,
+    &:focus::before {
+        background-color: $eccgui-color-accordion-toggler-hover;
+    }
 }
 
 .#{$prefix}--accordion__title {
@@ -43,15 +124,15 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
     position: fixed;
     left: -5000em;
     display: block;
-    padding: $eccgui-size-block-whitespace * 0.5;
+    padding: 0 $eccgui-size-block-whitespace * 0.5;
     margin: 0 calc(1rem + #{$eccgui-size-block-whitespace * 0.5}) 0 $eccgui-size-block-whitespace * 0.5;
     opacity: 0;
 
     .#{$prefix}--accordion__item--active & {
         position: static;
         left: auto;
-        padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace
-            $eccgui-size-block-whitespace * 0.5;
+        padding: calc(0.75 * var(--#{$eccgui}-accordion-content-whitespace)) $eccgui-size-block-whitespace * 0.5
+            calc(1.25 * var(--#{$eccgui}-accordion-content-whitespace)) $eccgui-size-block-whitespace * 0.5;
         opacity: 1;
     }
 
@@ -63,6 +144,23 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
         margin: 0;
     }
 
+    .#{$eccgui}-accordion__item--condensed &,
+    .#{$eccgui}-accordion__container--global-contentspace-none &,
+    .#{$eccgui}-accordion__item--contentspace-none & {
+        padding-right: 0;
+        padding-left: 0;
+    }
+
+    .#{$eccgui}-accordion__item--condensed:not(.#{$eccgui}-accordion__item--fullwidth) &,
+    .#{$prefix}--accordion--start.#{$eccgui}-accordion__container--global-contentspace-none
+        :not(.#{$eccgui}-accordion__item--fullwidth)
+        &,
+    .#{$prefix}--accordion--start
+        .#{$eccgui}-accordion__item--contentspace-none:not(.#{$eccgui}-accordion__item--fullwidth)
+        & {
+        margin-left: calc(1rem + #{$eccgui-size-block-whitespace * 0.25});
+    }
+
     *,
     *::before,
     *::after {
@@ -70,13 +168,6 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
     }
 }
 
-.#{$prefix}--accordion__heading {
-    &:hover::before,
-    &:focus::before {
-        background-color: $eccgui-color-accordion-toggler-hover;
-    }
-}
-
 .#{$eccgui}-accordion__item--elevated {
     background-color: $eccgui-color-accordion-background-elevated;
 
@@ -95,35 +186,3 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
         border-bottom: none;
     }
 }
-
-.#{$eccgui}-accordion__item--condensed {
-    .#{$prefix}--accordion__heading {
-        min-height: 0;
-        padding: 0;
-        line-height: 1em;
-
-        .#{$prefix}--accordion__arrow {
-            margin: 0;
-
-            .#{$prefix}--accordion--start & {
-                margin: 0;
-            }
-        }
-
-        .#{$prefix}--accordion__title {
-            margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
-
-            .#{$prefix}--accordion--start & {
-                margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
-            }
-        }
-    }
-
-    .#{$prefix}--accordion__content {
-        padding: $eccgui-size-block-whitespace * 0.25 0;
-
-        .#{$prefix}--accordion__item--active & {
-            padding: $eccgui-size-block-whitespace * 0.25 0;
-        }
-    }
-}
diff --git a/src/components/Application/ApplicationContainer.tsx b/src/components/Application/ApplicationContainer.tsx
index 7292c1376..9ec5c1156 100644
--- a/src/components/Application/ApplicationContainer.tsx
+++ b/src/components/Application/ApplicationContainer.tsx
@@ -3,12 +3,28 @@ import { OverlaysProvider } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type ApplicationContainerProps = React.HTMLAttributes<HTMLDivElement>;
+import { useDropzoneMonitor } from "./helper";
+
+export interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If set then the `element` is extended automatically by a `monitor-dropzone` data attribute.
+     * This need to match with a `dropzone-for` data attribute on available dropzones for dragged elements.
+     */
+    monitorDropzonesFor?: string[];
+}
+
+export const ApplicationContainer = ({
+    children,
+    className = "",
+    monitorDropzonesFor = [],
+    ...otherDivProps
+}: ApplicationContainerProps) => {
+    const containerRef = React.useRef<any>(null);
+    useDropzoneMonitor(monitorDropzonesFor);
 
-export const ApplicationContainer = ({ children, className = "", ...otherDivProps }: ApplicationContainerProps) => {
     return (
         <OverlaysProvider>
-            <div className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
+            <div ref={containerRef} className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
                 {children}
             </div>
         </OverlaysProvider>
diff --git a/src/components/Application/_dropzone.scss b/src/components/Application/_dropzone.scss
new file mode 100644
index 000000000..5c51670f2
--- /dev/null
+++ b/src/components/Application/_dropzone.scss
@@ -0,0 +1,36 @@
+[data-dropzone-for] {
+    transition: box-shadow 500ms;
+}
+
+body[data-monitor-dropzone] {
+    & > * {
+        pointer-events: none;
+    }
+    .#{$eccgui}-application__container,
+    .#{$eccgui}-dialog__portal {
+        *:not([data-dropzone-for], .uppy-DragDrop--isDragDropSupported) {
+            pointer-events: none;
+        }
+    }
+}
+
+body[data-monitor-dropzone~="application/reactflow"] [data-dropzone-for~="application/reactflow"],
+body[data-monitor-dropzone~="Files"] [data-dropzone-for~="Files"],
+body[data-monitor-dropzone~="Files"] .uppy-DragDrop--isDragDropSupported {
+    pointer-events: all !important;
+    box-shadow: 0 0 $eccgui-size-inline-whitespace $eccgui-color-accent inset;
+
+    & > * {
+        pointer-events: all;
+        opacity: $eccgui-opacity-regular;
+    }
+}
+
+body[data-monitor-dropzone]:has(.#{$eccgui}-dialog__portal > .#{$ns}-overlay-open) {
+    & > *:not(.#{$eccgui}-dialog__portal) {
+        &,
+        & * {
+            pointer-events: none !important;
+        }
+    }
+}
diff --git a/src/components/Application/application.scss b/src/components/Application/application.scss
index 257d2f55e..e98c18f85 100644
--- a/src/components/Application/application.scss
+++ b/src/components/Application/application.scss
@@ -8,3 +8,4 @@
 
 // @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
 @import "content";
+@import "dropzone";
diff --git a/src/components/Application/helper.ts b/src/components/Application/helper.ts
index 64222f8a0..d449c9de6 100644
--- a/src/components/Application/helper.ts
+++ b/src/components/Application/helper.ts
@@ -19,3 +19,42 @@ export const useApplicationHeaderOverModals = (elevate: boolean, className: stri
         }
     }, [elevate, className]);
 };
+
+/**
+ * Tracks drag operations over the application.
+ * Sets different data attributes to the body element.
+ * They can be used to apply styling rules.
+ */
+export const useDropzoneMonitor = (enabledTypes: string[]) => {
+    React.useEffect(() => {
+        const monitor = window.document.body;
+
+        const addMonitor = (event: DragEvent) => {
+            const types = event.dataTransfer?.types || [];
+            const monitorTypes = [...new Set(types.filter((type) => enabledTypes.includes(type)))];
+            if (monitorTypes.length > 0 && !monitor.dataset.monitorDropzone) {
+                monitor.dataset.monitorDropzone = monitorTypes.join(" ");
+            }
+            event.preventDefault();
+        };
+
+        const removeMonitor = (event: DragEvent) => {
+            if (event.type === "drop" || monitor === event.target) {
+                delete monitor.dataset.monitorDropzone;
+                event.preventDefault();
+            }
+        };
+
+        if (monitor) {
+            monitor.addEventListener("dragover", addMonitor);
+            monitor.addEventListener("dragleave", removeMonitor);
+            monitor.addEventListener("drop", removeMonitor);
+            return () => {
+                monitor.removeEventListener("dragover", addMonitor);
+                monitor.removeEventListener("dragleave", removeMonitor);
+                monitor.removeEventListener("drop", removeMonitor);
+            };
+        }
+        return;
+    }, []);
+};
diff --git a/src/components/TextField/TextArea.tsx b/src/components/TextField/TextArea.tsx
index f8514a3df..01ae7103b 100644
--- a/src/components/TextField/TextArea.tsx
+++ b/src/components/TextField/TextArea.tsx
@@ -116,7 +116,7 @@ export const TextArea = ({
                     );
                     leftIconElement.addEventListener("click", (_event: MouseEvent) => {
                         textAreaElement.focus();
-                    }); //onclick((_event: MouseEvent) => {textAreaElement.dispatchEvent("click")})
+                    });
                 }
 
                 if (rightElement && wrapperElement) {
diff --git a/src/components/TextField/stories/TextArea.stories.tsx b/src/components/TextField/stories/TextArea.stories.tsx
index 708d0799e..24bfd90ad 100644
--- a/src/components/TextField/stories/TextArea.stories.tsx
+++ b/src/components/TextField/stories/TextArea.stories.tsx
@@ -25,7 +25,12 @@ export default {
                 ),
                 "2 Icon buttons": (
                     <>
-                        <IconButton name={"item-comment"} onClick={() => alert("1 clicked")} text="Button 1" />
+                        <IconButton
+                            name={"item-comment"}
+                            onClick={() => alert("1 clicked")}
+                            text="Button 1"
+                            affirmative
+                        />
                         <IconButton name={"item-edit"} onClick={() => alert("2 clicked")} text="Button 2" />
                     </>
                 ),
diff --git a/src/components/TextField/textfield.scss b/src/components/TextField/textfield.scss
index e25e3d25f..bd73d22f8 100644
--- a/src/components/TextField/textfield.scss
+++ b/src/components/TextField/textfield.scss
@@ -184,6 +184,28 @@ $eccgui-map-intent-bgcolors: (
     position: absolute;
     top: 0;
     right: 0;
+    filter: grayscale(1);
+
+    &:hover,
+    .#{$eccgui}-textarea:focus ~ & {
+        filter: none;
+    }
+
+    & > .#{$eccgui}-button--icon {
+        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-regular;
+
+        &:last-of-type {
+            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-regular;
+        }
+    }
+
+    .#{$ns}-input.#{$ns}-small ~ & > .#{$eccgui}-button--icon {
+        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+
+        &:last-of-type {
+            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+        }
+    }
 }
 
 .#{$eccgui}-textfield--justifyclearance {
diff --git a/src/configuration/_variables.scss b/src/configuration/_variables.scss
index cd75ccacb..61d41ecdf 100644
--- a/src/configuration/_variables.scss
+++ b/src/configuration/_variables.scss
@@ -72,6 +72,7 @@ $eccgui-opacity-regular: 1 !default;
 $eccgui-opacity-narrow: 0.8 !default;
 $eccgui-opacity-muted: 0.61 !default;
 $eccgui-opacity-disabled: 0.39 !default;
+$eccgui-opacity-ghostly: 0.2 !default;
 $eccgui-opacity-invisible: 0 !default;
 
 // -- Configuration stack of z-indexes -----------------------------------------
diff --git a/src/extensions/_index.scss b/src/extensions/_index.scss
index be5ab90d6..8f23e9afd 100644
--- a/src/extensions/_index.scss
+++ b/src/extensions/_index.scss
@@ -5,3 +5,5 @@ CodeMirror styles are already included by the base component styles
 because it is used as lib for elements there already. 
 @import "./codemirror/codemirror";
 */
+
+@import "./uppy/fileupload";
diff --git a/src/extensions/uppy/_fileupload.scss b/src/extensions/uppy/_fileupload.scss
new file mode 100644
index 000000000..b5b01e7b1
--- /dev/null
+++ b/src/extensions/uppy/_fileupload.scss
@@ -0,0 +1,47 @@
+/**
+ * TODO: we need to create a own FileUpload component based on Uppy to justify its usage.
+ */
+
+$eccgui-size-fileupload-border-width: $button-border-width;
+$eccgui-size-fileupload-border-radius: $button-border-radius;
+$eccgui-color-fileupload-border: rgba($black, $pt-drop-shadow-opacity);
+$eccgui-color-fileupload-background: $eccgui-color-accordion-background-elevated;
+$eccgui-color-fileupload-text: inherit;
+
+.uppy-DragDrop-container {
+    background-color: $eccgui-color-fileupload-background;
+    border: solid $eccgui-size-fileupload-border-width $eccgui-color-fileupload-border;
+    border-radius: $eccgui-size-fileupload-border-radius;
+    transition: box-shadow 500ms;
+
+    * {
+        color: $eccgui-color-fileupload-text;
+    }
+
+    .uppy-DragDrop-inner {
+        padding: $eccgui-size-block-whitespace;
+        line-height: inherit;
+    }
+
+    .uppy-DragDrop-arrow {
+        width: 20px; // normal icon size
+        height: 20px;
+        margin-bottom: $eccgui-size-inline-whitespace;
+    }
+
+    .uppy-DragDrop-label {
+        margin-bottom: $eccgui-size-inline-whitespace;
+        font-size: inherit;
+    }
+}
+
+.uppy-DragDrop--isDraggingOver.uppy-DragDrop--isDragDropSupported {
+    background-color: rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
+    box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
+
+    & > * {
+        color: $eccgui-color-accent-contrast;
+        opacity: $eccgui-opacity-narrow;
+        fill: currentcolor;
+    }
+}
diff --git a/src/index.scss b/src/index.scss
index 8838390e4..50b055559 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -22,6 +22,9 @@
 // load blueprintjs components
 @import "./includes/blueprintjs/components";
 
+// set more readable variable for prefix
+$prefix-blueprintjs: $ns;
+
 // -- Carbon Elements ----------------------------------------------------------
 
 /*
@@ -41,11 +44,17 @@
 // load carbon components
 @import "./includes/carbon-components/components";
 
+// set more readable variable for prefix
+$prefix-carbon: $prefix;
+
 // == Load basic components styles =============================================
 
 @import "./components";
 @import "./extensions/codemirror/codemirror";
 
+// set more readable variable for prefix
+$prefix-eccgui: $eccgui;
+
 // == load tweaks ==============================================================
 
 @import "./shame";
diff --git a/yarn.lock b/yarn.lock
index de0e8d7d9..e7de842ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4633,13 +4633,13 @@ bl@^4.0.3, bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
-body-parser@1.20.1:
-  version "1.20.1"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
-  integrity sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==
+body-parser@1.20.2:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
+  integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==
   dependencies:
     bytes "3.1.2"
-    content-type "~1.0.4"
+    content-type "~1.0.5"
     debug "2.6.9"
     depd "2.0.0"
     destroy "1.2.0"
@@ -4647,7 +4647,7 @@ body-parser@1.20.1:
     iconv-lite "0.4.24"
     on-finished "2.4.1"
     qs "6.11.0"
-    raw-body "2.5.1"
+    raw-body "2.5.2"
     type-is "~1.6.18"
     unpipe "1.0.0"
 
@@ -5275,7 +5275,7 @@ content-disposition@0.5.4:
   dependencies:
     safe-buffer "5.2.1"
 
-content-type@~1.0.4:
+content-type@~1.0.4, content-type@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
@@ -5295,10 +5295,10 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
-cookie@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
-  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+cookie@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
+  integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
 
 copy-to-clipboard@^3.3.1:
   version "3.3.1"
@@ -5884,10 +5884,10 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-ejs@^3.1.8:
-  version "3.1.9"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
-  integrity sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==
+ejs@^3.1.10, ejs@^3.1.8:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.10.tgz#69ab8358b14e896f80cc39e62087b88500c3ac3b"
+  integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
   dependencies:
     jake "^10.8.5"
 
@@ -6442,17 +6442,17 @@ expect@^29.0.0, expect@^29.7.0:
     jest-message-util "^29.7.0"
     jest-util "^29.7.0"
 
-express@^4.17.3:
-  version "4.18.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
-  integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
+express@^4.17.3, express@^4.19.2:
+  version "4.19.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465"
+  integrity sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.20.1"
+    body-parser "1.20.2"
     content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.5.0"
+    cookie "0.6.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "2.0.0"
@@ -10533,10 +10533,10 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-raw-body@2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
-  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
+raw-body@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
   dependencies:
     bytes "3.1.2"
     http-errors "2.0.0"
@@ -12010,10 +12010,10 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
-tar@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.0.tgz#b14ce49a79cb1cd23bc9b016302dea5474493f73"
-  integrity sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==
+tar@^6.2.0, tar@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
+  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
   dependencies:
     chownr "^2.0.0"
     fs-minipass "^2.0.0"