diff --git a/src/baseComponents.js b/src/baseComponents.js
deleted file mode 100644
index e736240..0000000
--- a/src/baseComponents.js
+++ /dev/null
@@ -1,230 +0,0 @@
-/**
- * Represents a Component (of an HTMLElement) that is capable of receiving input.
- * @extends Component
- * @inheritdoc
- */
-class InputComponent extends Component {
-    /**
-     * 
-     * @param {string} element 
-     * @param {Attr} attr 
-     * @param {Modifier} modifier 
-     */
-    constructor(element, attr = {}, modifier = null) {
-        super(element, attr);
-        this.addStyleClass("el-input-comp");
-        if (modifier) {
-            this.modifier(modifier);
-        }
-    }
-
-    /**
-     * The parameter makes it optional to trigger the state by a variable
-     * @param {boolean} readonly 
-     * @returns {Component}
-     */
-    readonly(readonly = true) {
-        if (readonly) {
-            this._element.setAttribute("readonly", readonly);
-        }
-        return this;
-    }
-
-    /**
-     * Sets the value of the InputComponent
-     * @param {string} Value 
-     * @returns {InputComponent|Component}
-     */
-    value(value) {
-        this._element.value = value;
-        return this;
-    }
-
-    /**
-     * 
-     * @param {string} name 
-     * @returns {InputComponent|Component}
-     */
-    name(name) {
-        return this.setAttribute("name", name);
-    }
-}
-
-
-/**
- * Represents container Components.
- * Some predefined modifications are applied on the child components.
- * @extends Component
- * @inheritdoc
- */
-class FlexContainerComponent extends Component {
-    /**
-     * @type {boolean}
-     */
-    _distributeEvenglyAfterGenerate;
-    /**
-     * @type {string}
-     */
-    _flexDirection;
-    /**
-     * 
-     * @param {Attr} attr 
-     * @param {Modifier} modifier 
-     */
-    constructor(attr = {}, modifier = null, baseElement = "div") {
-        super(document.createElement(baseElement), attr);
-        this._flexDirection = "";
-        this._distributeEvenglyAfterGenerate = false;
-        this.addStyleClass("flex-container-component");
-        if (modifier) {
-            this.modifier(modifier);
-        }
-    }
-
-    /**
-     * 
-     * @param {boolean} [vertical=true] 
-     * @returns {FlexContainerComponent}
-     */
-    setFlexDirection(vertical = true) {
-        return this.modifier(
-            new Modifier()
-                .setStyleRule(
-                    "flex-direction",
-                    (vertical ? "column" : "row")
-                )
-        )
-    }
-
-    /**
-     * 
-     * @param {Component|Array<Component>} innerComponent 
-     * @returns {FlexContainerComponent} this component object
-     */
-    childContext(innerComponent) {
-        if (innerComponent instanceof Array) {
-            innerComponent
-                .map(cl => {
-                    if (cl instanceof Component) {
-                        return cl
-                    } else {
-                        return cl.ensureModifier().toComponent()
-                    }
-                })
-                .forEach(icomp => {
-                    icomp._modifier = new Modifier()
-                        .setStyleRule("flex", "none")
-                        .join(icomp._modifier)
-
-                })
-        }
-        return super.childContext(innerComponent);
-    }
-
-    /**
-     * 
-     * @returns {FlexContainerComponent}
-     */
-    distibuteSpacingEvenly() {
-        this._distributeEvenglyAfterGenerate = true;
-        return this;
-    }
-
-
-    /**
-     * @override
-     * @inheritdoc
-     * @extends Component.generate()
-     */
-    generate(modifier = null, styleStore = null, functionStore = null) {
-        if (this._children && this._children.length > 0) {
-
-            if (this._distributeEvenglyAfterGenerate) {
-                let childDistributionFraction = Math.floor(
-                    ((100 - this._children.length) / this._children.length) * 100
-                ) / 100;
-
-                let direction = (this._flexDirection === 'column' ? 'height' : "width");
-
-                for (const icomp of this._children) {
-                    /* sets the width for all elements, 
-                    to avoid overlapping or line break because of lacking width,
-                    a percent is subtracted for every child element  */
-                    /* To enable "override" a new Modifier is generated and joined 
-                    with the modifier of the component */
-                    icomp._modifier._modifications[direction] = childDistributionFraction + "%";
-                    icomp._modifier._modifications["max-"+direction] = childDistributionFraction + "%";
-                }
-            }
-        }
-
-        return super.generate(modifier, styleStore, functionStore);
-    }
-}
-
-/**
- * A FlexContainerComponent, which organizes the children in a column like manner.
- * @extends FlexContainerComponent
- * @inheritdoc
- */
-class Column extends FlexContainerComponent {
-    /**
-     * 
-     * @param {Attr} attr 
-     * @param {Modifier} modifier 
-     */
-    constructor(attr = {}, modifier = null) {
-        super(attr, modifier);
-        this.addStyleClass("column-component");
-        this._flexDirection = "column";
-        this.setFlexDirection();
-    }
-
-}
-
-/**
- * A FlexContainerComponent, which organizes the children in a row like manner.
- * 
- * @extends FlexContainerComponent
- * @inheritdoc
- */
-class Row extends FlexContainerComponent {
-    /**
-     * 
-     * @param {Attr} attr 
-     * @param {Modifier} modifier 
-     */
-    constructor(attr = {}, modifier = null) {
-        super(attr, modifier);
-        this.addStyleClass("row-component")
-        this._flexDirection = "row";
-        //this.modifier(new Modifier().fillMaxWidth());
-        this.setFlexDirection(false);
-    }
-
-    /**
-     * 
-     * @param {Component|Array<Component>} innerComponent 
-     * @returns {Row}
-     */
-    childContext(innerComponent) {
-        function setFloat(comp, side = "right") {
-            comp._modifier = new Modifier()
-                .setStyleRule("float", side)
-                .join(comp._modifier);
-        }
-
-        super.childContext(innerComponent);
-
-        for (const child of this._children) {
-            onSingleOrArray(
-                child,
-                (e, i) => setFloat(e, (i === 0 ? "left" : "right"))
-            );
-        }
-
-        return this;
-    }
-
-}
-
diff --git a/src/component/Column.js b/src/component/Column.js
new file mode 100644
index 0000000..0c067cc
--- /dev/null
+++ b/src/component/Column.js
@@ -0,0 +1,19 @@
+/**
+ * A FlexContainerComponent, which organizes the children in a column like manner.
+ * @extends FlexContainerComponent
+ * @inheritdoc
+ */
+class Column extends FlexContainerComponent {
+    /**
+     *
+     * @param {Attr} attr
+     * @param {Modifier} modifier
+     */
+    constructor(attr = {}, modifier = null) {
+        super(attr, modifier);
+        this.addStyleClass("column-component");
+        this._flexDirection = "column";
+        this.setFlexDirection();
+    }
+
+}
diff --git a/src/component/FlexContainerComponent.js b/src/component/FlexContainerComponent.js
new file mode 100644
index 0000000..768509a
--- /dev/null
+++ b/src/component/FlexContainerComponent.js
@@ -0,0 +1,110 @@
+/**
+ * Represents container Components.
+ * Some predefined modifications are applied on the child components.
+ * @extends Component
+ * @inheritdoc
+ */
+class FlexContainerComponent extends Component {
+    /**
+     * @type {boolean}
+     */
+    _distributeEvenglyAfterGenerate;
+    /**
+     * @type {string}
+     */
+    _flexDirection;
+    /**
+     *
+     * @param {Attr} attr
+     * @param {Modifier} modifier
+     */
+    constructor(attr = {}, modifier = null, baseElement = "div") {
+        super(document.createElement(baseElement), attr);
+        this._flexDirection = "";
+        this._distributeEvenglyAfterGenerate = false;
+        this.addStyleClass("flex-container-component");
+        if (modifier) {
+            this.modifier(modifier);
+        }
+    }
+
+    /**
+     *
+     * @param {boolean} [vertical=true]
+     * @returns {FlexContainerComponent}
+     */
+    setFlexDirection(vertical = true) {
+        return this.modifier(
+            new Modifier()
+                .setStyleRule(
+                    "flex-direction",
+                    (vertical ? "column" : "row")
+                )
+        );
+    }
+
+    /**
+     *
+     * @param {Component|Array<Component>} innerComponent
+     * @returns {FlexContainerComponent} this component object
+     */
+    childContext(innerComponent) {
+        if (innerComponent instanceof Array) {
+            innerComponent
+                .map(cl => {
+                    if (cl instanceof Component) {
+                        return cl;
+                    } else {
+                        return cl.ensureModifier().toComponent();
+                    }
+                })
+                .forEach(icomp => {
+                    icomp._modifier = new Modifier()
+                        .setStyleRule("flex", "none")
+                        .join(icomp._modifier);
+
+                });
+        }
+        return super.childContext(innerComponent);
+    }
+
+    /**
+     *
+     * @returns {FlexContainerComponent}
+     */
+    distibuteSpacingEvenly() {
+        this._distributeEvenglyAfterGenerate = true;
+        return this;
+    }
+
+
+    /**
+     * @override
+     * @inheritdoc
+     * @extends Component.generate()
+     */
+    generate(modifier = null, styleStore = null, functionStore = null) {
+        if (this._children && this._children.length > 0) {
+
+            if (this._distributeEvenglyAfterGenerate) {
+                let childDistributionFraction = Math.floor(
+                    ((100 - this._children.length) / this._children.length) * 100
+                ) / 100;
+
+                let direction = (this._flexDirection === 'column' ? 'height' : "width");
+
+                for (const icomp of this._children) {
+                    /* sets the width for all elements,
+                    to avoid overlapping or line break because of lacking width,
+                    a percent is subtracted for every child element  */
+                    /* To enable "override" a new Modifier is generated and joined
+                    with the modifier of the component */
+                    icomp._modifier._modifications[direction] = childDistributionFraction + "%";
+                    icomp._modifier._modifications["max-" + direction] = childDistributionFraction + "%";
+                }
+            }
+        }
+
+        return super.generate(modifier, styleStore, functionStore);
+    }
+}
diff --git a/src/component/InputComponent.js b/src/component/InputComponent.js
new file mode 100644
index 0000000..151684c
--- /dev/null
+++ b/src/component/InputComponent.js
@@ -0,0 +1,51 @@
+/**
+ * Represents a Component (of an HTMLElement) that is capable of receiving input.
+ * @extends Component
+ * @inheritdoc
+ */
+class InputComponent extends Component {
+    /**
+     *
+     * @param {string} element
+     * @param {Attr} attr
+     * @param {Modifier} modifier
+     */
+    constructor(element, attr = {}, modifier = null) {
+        super(element, attr);
+        this.addStyleClass("el-input-comp");
+        if (modifier) {
+            this.modifier(modifier);
+        }
+    }
+
+    /**
+     * The parameter makes it optional to trigger the state by a variable
+     * @param {boolean} readonly
+     * @returns {Component}
+     */
+    readonly(readonly = true) {
+        if (readonly) {
+            this._element.setAttribute("readonly", readonly);
+        }
+        return this;
+    }
+
+    /**
+     * Sets the value of the InputComponent
+     * @param {string} Value
+     * @returns {InputComponent|Component}
+     */
+    value(value) {
+        this._element.value = value;
+        return this;
+    }
+
+    /**
+     *
+     * @param {string} name
+     * @returns {InputComponent|Component}
+     */
+    name(name) {
+        return this.setAttribute("name", name);
+    }
+}
diff --git a/src/component/Row.js b/src/component/Row.js
new file mode 100644
index 0000000..8e962e8
--- /dev/null
+++ b/src/component/Row.js
@@ -0,0 +1,46 @@
+/**
+ * A FlexContainerComponent, which organizes the children in a row like manner.
+ * 
+ * @extends FlexContainerComponent
+ * @inheritdoc
+ */
+class Row extends FlexContainerComponent {
+    /**
+     * 
+     * @param {Attr} attr 
+     * @param {Modifier} modifier 
+     */
+    constructor(attr = {}, modifier = null) {
+        super(attr, modifier);
+        this.addStyleClass("row-component")
+        this._flexDirection = "row";
+        //this.modifier(new Modifier().fillMaxWidth());
+        this.setFlexDirection(false);
+    }
+
+    /**
+     * 
+     * @param {Component|Array<Component>} innerComponent 
+     * @returns {Row}
+     */
+    childContext(innerComponent) {
+        function setFloat(comp, side = "right") {
+            comp._modifier = new Modifier()
+                .setStyleRule("float", side)
+                .join(comp._modifier);
+        }
+
+        super.childContext(innerComponent);
+
+        for (const child of this._children) {
+            onSingleOrArray(
+                child,
+                (e, i) => setFloat(e, (i === 0 ? "left" : "right"))
+            );
+        }
+
+        return this;
+    }
+
+}
+