diff --git a/packages/editor/src/classes/actions-config/index.ts b/packages/editor/src/classes/action-config/index.ts
similarity index 100%
rename from packages/editor/src/classes/actions-config/index.ts
rename to packages/editor/src/classes/action-config/index.ts
diff --git a/packages/editor/src/components/header/index.tsx b/packages/editor/src/components/header/index.tsx
new file mode 100644
index 00000000..b797a149
--- /dev/null
+++ b/packages/editor/src/components/header/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import ActionConfig from '../../classes/action-config';
+import MaterialToolbar from '@mui/material/Toolbar';
+import AppBar from '@mui/material/AppBar';
+import { ToolbarMenuItem } from '../toolbar/Toolbar';
+
+/**
+ * App bar
+ * @param props.configurations the configurations array
+ * @returns toolbar wich contains an entry for each configuration in the array
+ */
+const Header = (props: { configurations: ActionConfig[] }) => {
+  return (
+    <AppBar
+      role="menubar"
+      position="absolute"
+      color="default"
+      className="material-menubar"
+      sx={{
+        '& MuiButtonBase-root': {
+          marginX: '1rem',
+        },
+      }}
+    >
+      <MaterialToolbar>
+        {props.configurations.map((c, i) => {
+          return <ToolbarMenuItem key={i} configuration={c} />;
+        })}
+      </MaterialToolbar>
+    </AppBar>
+  );
+};
+
+export default Header;
diff --git a/packages/editor/src/components/toolbar/AppBar.tsx b/packages/editor/src/components/toolbar/AppBar.tsx
index d5635d92..64483ffe 100644
--- a/packages/editor/src/components/toolbar/AppBar.tsx
+++ b/packages/editor/src/components/toolbar/AppBar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ActionConfig from '../../classes/actions-config';
+import ActionConfig from '../../classes/action-config';
 import MaterialToolbar from '@mui/material/Toolbar';
 import AppBar from '@mui/material/AppBar';
 import { ToolbarMenuItem } from './Toolbar';
diff --git a/packages/editor/src/components/toolbar/Toolbar.tsx b/packages/editor/src/components/toolbar/Toolbar.tsx
index 7aead644..7cf1db31 100644
--- a/packages/editor/src/components/toolbar/Toolbar.tsx
+++ b/packages/editor/src/components/toolbar/Toolbar.tsx
@@ -6,7 +6,7 @@ import Popover, { PopoverOrigin } from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
 import './appbar-buttons.css';
 import Box from '@mui/material/Box';
-import ActionConfig from '../../classes/actions-config';
+import ActionConfig from '../../classes/action-config';
 import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';
 
 /**
diff --git a/packages/editor/src/components/toolbar/contents.tsx b/packages/editor/src/components/toolbar/contents.tsx
new file mode 100644
index 00000000..45e57425
--- /dev/null
+++ b/packages/editor/src/components/toolbar/contents.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { NoteForm, UrlForm } from './toolbarCustomComponents';
+
+function linkContent(linkModel, closeModal): React.ReactElement {
+  return <UrlForm closeModal={closeModal} urlModel={linkModel}></UrlForm>;
+}
+
+function noteContent(noteModel, closeModal): React.ReactElement {
+  return <NoteForm closeModal={closeModal} noteModel={noteModel}></NoteForm>;
+}
+
+export { linkContent, noteContent };
diff --git a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx b/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx
index 58fefb0a..509cce61 100644
--- a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx
+++ b/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx
@@ -34,7 +34,7 @@ import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
 import Palette from '@mui/icons-material/Square';
 import SquareOutlined from '@mui/icons-material/SquareOutlined';
 import { $msg, Designer } from '@wisemapping/mindplot';
-import ActionConfig from '../../classes/actions-config';
+import ActionConfig from '../../classes/action-config';
 import { SwitchValueDirection, NodePropertyValueModelBuilder } from './ToolbarValueModelBuilder';
 import {
   ColorPicker,
diff --git a/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx b/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx
index e336ceee..df12e1ed 100644
--- a/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx
+++ b/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx
@@ -19,7 +19,7 @@ import Link from '@mui/material/Link';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import { ToolbarMenuItem } from './Toolbar';
-import ActionConfig from '../../classes/actions-config';
+import ActionConfig from '../../classes/action-config';
 
 /**
  * Color picker for toolbar
diff --git a/packages/editor/src/components/toolbar/useMuiWidgetManager.ts b/packages/editor/src/components/toolbar/useMuiWidgetManager.ts
new file mode 100644
index 00000000..42db5fab
--- /dev/null
+++ b/packages/editor/src/components/toolbar/useMuiWidgetManager.ts
@@ -0,0 +1,10 @@
+import { useState, useRef } from 'react';
+import DefaultWidgetManager from '../../classes/default-widget-manager';
+
+export const useMuiWidgetManager = (): [boolean, Element | undefined, DefaultWidgetManager] => {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [popoverTarget, setPopoverTarget] = useState(undefined);
+  const widgetManager = useRef(new DefaultWidgetManager(setPopoverOpen, setPopoverTarget));
+
+  return [popoverOpen, popoverTarget, widgetManager.current];
+};
diff --git a/packages/editor/test/unit/toolbar/toolbar.test.tsx b/packages/editor/test/unit/toolbar/toolbar.test.tsx
index 32f18622..e319a8a7 100644
--- a/packages/editor/test/unit/toolbar/toolbar.test.tsx
+++ b/packages/editor/test/unit/toolbar/toolbar.test.tsx
@@ -9,7 +9,7 @@ import Toolbar, {
   ToolbarMenuItem,
   ToolbarSubmenu,
 } from '../../../src/components/toolbar/Toolbar';
-import ActionConfig from '../../../src/classes/actions-config';
+import ActionConfig from '../../../src/classes/action-config';
 import Menubar from '../../../src/components/toolbar/AppBar';
 require('babel-polyfill');
 jest.mock('../../../src/components/toolbar/appbar-buttons.css', () => '');