diff --git a/pages/wkfs/editor.tsx b/pages/wkfs/editor.tsx
new file mode 100644
index 0000000..929eb56
--- /dev/null
+++ b/pages/wkfs/editor.tsx
@@ -0,0 +1,295 @@
+/**
+ * @author Martin Karkowski
+ * @email m.karkowski@zema.de
+ * @create date 2021-02-09 10:36:35
+ * @modify date 2021-02-09 10:36:35
+ * @desc [description]
+ */
+
+import { faHashtag, faHatWizard } from "@fortawesome/free-solid-svg-icons";
+import React from "react";
+import {
+  Alert,
+  Button,
+  Col,
+  Container,
+  Jumbotron,
+  Row,
+  Table
+} from "react-bootstrap";
+import { dynamicSort } from "../../lib/helpers/arrayMethods";
+import { INopeDispatcher } from "../../lib/types/nope/nopeDispatcher.interface";
+import { INopeModuleDescription } from "../../lib/types/nope/nopeModule.interface";
+import { INopeObserver } from "../../lib/types/nope/nopeObservable.interface";
+import AvailableDispatchers from "../../resources/admin-shell/dispatchers";
+import { IDynamicLayoutProps } from "../../resources/ui/layout/dynamicLayout";
+import Toolbar from "../../resources/ui/layout/toolbar";
+
+class WKFSEditor extends React.Component<
+  { dispatcher: INopeDispatcher },
+  { instances: INopeModuleDescription[]; connected: boolean }
+> {
+  private _observer: INopeObserver[] = [];
+
+  private __refresh() {
+    const connected = this.props.dispatcher.communicator.connected.getContent();
+
+    this.setState({
+      instances: connected
+        ? this.props.dispatcher.availableInstances
+            .getContent()
+            .sort(dynamicSort("identifier"))
+        : [],
+      connected
+    });
+  }
+
+  /**
+   * Function will be called if the Item has been rendered sucessfully.
+   */
+  componentDidMount() {
+    if (this.props.dispatcher) {
+      // Subscribe to the Instances.
+
+      this.__refresh();
+
+      const _this = this;
+
+      this._observer.push(
+        this.props.dispatcher.availableInstances.subscribe(() => {
+          _this.__refresh();
+        })
+      );
+
+      this._observer.push(
+        this.props.dispatcher.communicator.connected.subscribe(() => {
+          _this.__refresh();
+        })
+      );
+    }
+  }
+
+  /**
+   * Function, that will be called before the network fails.
+   */
+  componentWillUnmount() {
+    // Call the unmount
+    for (const _observer of this._observer) {
+      _observer.unsubscribe();
+    }
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      instances: [],
+      connected: false
+    };
+  }
+
+  public render() {
+    const settings: IDynamicLayoutProps = {
+      components: [
+        {
+          visible: true,
+          component() {
+            return <># Test Widget 1 </>;
+          },
+          gridSettings: {
+            h: 5,
+            w: 5,
+            x: 0,
+            y: 0,
+            minW: 3,
+            maxH: 5,
+            minH: 5,
+            maxW: 5
+          },
+          id: "test",
+          label: "Test Widget 1",
+          props: {},
+          hideable: true
+        },
+        {
+          visible: true,
+          component() {
+            return (
+              <TabEntry
+                tabs={{
+                  active: "-1",
+                  allowNewTabs: true,
+                  items: []
+                }}
+              ></TabEntry>
+            );
+          },
+          gridSettings: {
+            h: 5,
+            w: 10,
+            x: 5,
+            y: 0,
+            minW: 5,
+            maxH: 5,
+            minH: 5
+          },
+          id: "test2",
+          label: "# Test Widget 2",
+          props: {},
+          hideable: false,
+          bg: "light"
+        }
+      ],
+      layoutSettings: {
+        width: process.browser ? window.innerWidth : 1920,
+        autoSize: false,
+        preventCollision: false,
+        cols: 15,
+        compactType: "horizontal"
+      },
+      toolbar: {
+        items: [
+          {
+            type: "link",
+            label: "docs",
+            ref: "/docs",
+            icon: faHatWizard
+          }
+        ]
+      },
+      generateData() {
+        return {
+          content: "hello"
+        };
+      }
+    };
+
+
+    let idx = 0;
+    return (
+      <>
+        <Container>
+          <Toolbar<undefined>
+            toolbar={{
+              items: [
+                {
+                  type: "link",
+                  ref: "/docs",
+                  label: "docs",
+                  icon: faHashtag
+                }
+              ]
+            }}
+            generateData={() => undefined}
+            brand={{
+              ref: "/",
+              type: "link",
+              icon: "/nope/logo_light.png",
+              label: " Overview"
+            }}
+          ></Toolbar>
+          <Jumbotron>
+            {this.state.connected ? (
+              <Alert variant={"success"}>Backend online</Alert>
+            ) : (
+              <>
+                <Alert variant={"danger"}>
+                  Not able to connect to the Backend <b>:'(</b>
+                </Alert>
+                <p>
+                  Please start a Nope-Backend with the following command:{" "}
+                  <code>
+                    node .\dist\lib\cli\runNopeBackend.js -c io-server
+                  </code>
+                </p>
+              </>
+            )}
+            <Button
+              variant="light"
+              style={{ width: "100%" }}
+              onClick={() => this.__refresh()}
+            >
+              Manual Refresh
+            </Button>
+          </Jumbotron>
+          <Row>
+            <Col>
+              <AvailableDispatchers
+                dispatcher={this.props.dispatcher}
+              ></AvailableDispatchers>
+            </Col>
+          </Row>
+          {this.state.instances.length > 0 ? (
+            <Row>
+              <Col>
+                <Jumbotron>
+                  <h1>Instances</h1>
+                  <p>The Following instances has been found:</p>
+                  <Table striped bordered hover>
+                    <thead>
+                      <tr>
+                        <th>Identifier</th>
+                        <th>Type</th>
+                        <th></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {this.state.instances.map((instance) => {
+                        return (
+                          <tr key={idx++}>
+                            <td>{instance.identifier}</td>
+                            <td>
+                              <code>{instance.type}</code>
+                            </td>
+                            <td></td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </Table>
+                </Jumbotron>
+              </Col>
+            </Row>
+          ) : (
+            ""
+          )}
+          {this.state.instances.length > 0 ? (
+            <Row>
+              <Col>
+                <Jumbotron>
+                  <h1>Instances</h1>
+                  <p>The Following instances has been found:</p>
+                  <Table striped bordered hover>
+                    <thead>
+                      <tr>
+                        <th>Identifier</th>
+                        <th>Type</th>
+                        <th></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {this.state.instances.map((instance) => {
+                        return (
+                          <tr key={idx++}>
+                            <td>{instance.identifier}</td>
+                            <td>
+                              <code>{instance.type}</code>
+                            </td>
+                            <td></td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </Table>
+                </Jumbotron>
+              </Col>
+            </Row>
+          ) : (
+            ""
+          )}
+        </Container>
+      </>
+    );
+  }
+}
+
+export default WKFSEditor;