diff --git a/src/components/module.component.ts b/src/components/module.component.ts
new file mode 100644
index 00000000..44fcbbbd
--- /dev/null
+++ b/src/components/module.component.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit, Input, DynamicComponentLoader, ElementRef, ComponentRef } from 'angular2/core';
+
+import {KeyboardButton} from './keyboard-button.model';
+import {KeyboardButtonGroupComponent} from './keyboard-button-group.component';
+
+@Component({
+    selector: 'module',
+    template:
+    `
+        <div #row></div>
+    `,
+    styles:
+    [`
+        :host {
+            display: flex;
+            height: 100%;
+            width: 100%;
+            flex-direction: column;
+        }
+    `]
+})
+export class ModuleComponent implements OnInit {
+    @Input() case: any;
+    @Input() keyboardButtons: KeyboardButton[];
+    @Input() fill: string;
+
+    constructor(private dcl: DynamicComponentLoader, private elementRef: ElementRef) {
+        this.keyboardButtons = [];
+    }
+
+    ngOnInit() {
+        this.getButtonGroups().forEach(buttonGroup => {
+            this.dcl.loadIntoLocation(KeyboardButtonGroupComponent, this.elementRef, "row").then((bttnComponentRef: ComponentRef) => {
+                var group: KeyboardButtonGroupComponent = bttnComponentRef.instance;
+                group.keyboardButtons = buttonGroup;
+                //  console.log(keyboardButtonComponent);
+            });
+        });
+    }
+
+
+    private getButtonGroups(): KeyboardButton[][] {
+        var buttonGroups: KeyboardButton[][] = [];
+        var buttonGroup: KeyboardButton[] = [];
+        this.keyboardButtons.forEach((keyboardButton, index) => {
+            if (buttonGroup.length > 0 && buttonGroup[buttonGroup.length - 1].y !== keyboardButton.y) {
+                buttonGroups.push(buttonGroup);
+                buttonGroup = [];
+            }
+            buttonGroup.push(keyboardButton);
+        });
+        //console.log(buttonGroups, buttonGroup, this.keyboardButtons);
+        return buttonGroups;
+    }
+
+}
\ No newline at end of file
diff --git a/src/components/module.model.ts b/src/components/module.model.ts
new file mode 100644
index 00000000..161ad9a1
--- /dev/null
+++ b/src/components/module.model.ts
@@ -0,0 +1,12 @@
+import {KeyboardButton} from './keyboard-button.model';
+
+export class Module {
+    private case: any;
+    private keyboardButtons: KeyboardButton[];
+
+    constructor(obj: { rect: any[], path: any[] }, fill?: string) {
+        this.keyboardButtons = obj.rect.map(obj => obj.$);
+        this.keyboardButtons.forEach(keyboardButton => keyboardButton.fill = fill ? fill : 'black');
+        this.case = obj.path[0].$;
+    }
+}
\ No newline at end of file
diff --git a/src/components/module.ts b/src/components/module.ts
new file mode 100644
index 00000000..54e5251d
--- /dev/null
+++ b/src/components/module.ts
@@ -0,0 +1,3 @@
+import {Module} from './module.model';
+import {ModuleComponent} from './module.component';
+export {Module, ModuleComponent};
\ No newline at end of file