diff --git a/config-serializer/uhk-config.json b/config-serializer/uhk-config.json
index 1dce7960..105c5136 100644
--- a/config-serializer/uhk-config.json
+++ b/config-serializer/uhk-config.json
@@ -350,6 +350,11 @@
                                     "keymapId": 1
                                 }
                             ]
+                        },
+                         {
+                            "id": 1,
+                            "pointerRole": "none",
+                            "keyActions": []
                         }
                     ]
                 },
diff --git a/src/components/svg-keyboard.component.ts b/src/components/svg-keyboard.component.ts
index 19ea22e3..7ad83a19 100644
--- a/src/components/svg-keyboard.component.ts
+++ b/src/components/svg-keyboard.component.ts
@@ -1,18 +1,15 @@
-import { Component, OnInit} from 'angular2/core';
+import { Component, OnInit, Input} from 'angular2/core';
 
-import {DataProviderService} from '../services/data-provider.service';
 import {Module} from '../../config-serializer/config-items/Module';
 import {SvgModule} from './svg-module.model';
 import {SvgModuleComponent} from './svg-module.component';
 
-import {UhkConfiguration} from '../../config-serializer/config-items/UhkConfiguration';
-
 @Component({
     selector: 'svg-keyboard',
     template:
     `
-        <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
-            <svg:g [attr.transform]="transform" [attr.fill]="fill">
+        <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="svgAttributes.viewBox" height="100%" width="100%">
+            <svg:g [attr.transform]="svgAttributes.transform" [attr.fill]="svgAttributes.fill">
                 <svg:g svg-module *ngFor="let module of modules; let i = index"
                         [coverages]="module.coverages"
                         [keyboardKeys]="module.keyboardKeys"
@@ -33,31 +30,14 @@ import {UhkConfiguration} from '../../config-serializer/config-items/UhkConfigur
     directives: [SvgModuleComponent]
 })
 export class SvgKeyboardComponent implements OnInit {
-    private viewBox: string;
-    private modules: SvgModule[];
-    private svg: any;
-    private transform: string;
-    private fill: string;
-    private moduleConfig: Module[];
+    @Input() svgAttributes: { viewBox: string, transform: string, fill: string };
+    @Input() modules: SvgModule[];
+    @Input() moduleConfig: Module[];
 
-    constructor(private dps: DataProviderService) {
+    constructor() {
         this.modules = [];
     }
 
-    ngOnInit() {
-        this.svg = this.dps.getBaseLayer();
-        this.viewBox = this.svg.$.viewBox;
-        this.transform = this.svg.g[0].$.transform;
-        this.fill = this.svg.g[0].$.fill;
-        this.modules = this.svg.g[0].g.map(obj => new SvgModule(obj));
-
-        let uhkConfig: UhkConfiguration = new UhkConfiguration();
-        uhkConfig.fromJsObject(this.dps.getUHKConfig());
-        this.moduleConfig = uhkConfig.keyMaps.elements[0].layers.elements[0].modules.elements;
-        this.modules = this.svg.g[0].g.map(obj => {
-            return new SvgModule(obj);
-        });
-        this.modules = [this.modules[1], this.modules[0]]; // TODO: remove if the svg will be correct
-    }
+    ngOnInit() { }
 
 }
diff --git a/src/components/svg-module.component.ts b/src/components/svg-module.component.ts
index b2aed5c3..01a5f973 100644
--- a/src/components/svg-module.component.ts
+++ b/src/components/svg-module.component.ts
@@ -36,7 +36,6 @@ export class SvgModuleComponent implements OnInit, OnChanges {
 
     ngOnInit() {
         this.setLabels();
-        console.log(this);
     }
 
     ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
diff --git a/src/main-app.component.ts b/src/main-app.component.ts
index 8744d225..5859bffa 100644
--- a/src/main-app.component.ts
+++ b/src/main-app.component.ts
@@ -1,6 +1,12 @@
 import { Component, OnInit, AfterViewInit, Renderer, ViewChildren, QueryList, ElementRef} from 'angular2/core';
 
+import {UhkConfiguration} from '../config-serializer/config-items/UhkConfiguration';
+import {Layers} from '../config-serializer/config-items/Layers';
+
 import {SvgKeyboardComponent} from './components/svg-keyboard.component';
+import {SvgModule} from './components/svg-module.model';
+
+import {DataProviderService} from './services/data-provider.service';
 
 @Component({
     selector: 'main-app',
@@ -20,7 +26,13 @@ import {SvgKeyboardComponent} from './components/svg-keyboard.component';
             </button>
         </div>
         <div>
-            <svg-keyboard></svg-keyboard>
+            <svg-keyboard *ngFor="let layer of layers.elements"
+                            [svgAttributes]="svgAttributes"
+                            [modules]="modules"
+                            [moduleConfig]="layer.modules.elements"
+                            (animationend)="onKeyboardAnimationEnd($event)"
+                            hidden>
+            </svg-keyboard>
         </div>
     `,
     styles:
@@ -28,6 +40,7 @@ import {SvgKeyboardComponent} from './components/svg-keyboard.component';
         :host {
             display: flex;
             flex-direction: column;
+            overflow: hidden;
         }
 
         :host > div:first-child {
@@ -44,12 +57,44 @@ import {SvgKeyboardComponent} from './components/svg-keyboard.component';
         :host > div:last-child {
             display: flex;
             flex: 5;
-            justify-content: center;
+            position: relative;
         }
 
        :host > div:last-child > svg-keyboard {
            width: 80%;
+           position: absolute;
+           left: 50%;
+           transform: translateX(-50%);
+           animation-duration: 0.75s;
+           animation-timing-function: ease-in-out;
        }
+
+        @keyframes animate-center-left {
+            0% {
+                transform: translateX(-50%);
+                left: 50%;
+            }
+            100% {
+                transform: translateX(-100%);
+                left: 0%;
+            }
+        }
+
+        @keyframes animate-center-right {
+            0% {
+                transform: translateX(-50%);
+                left: 50%;
+            }
+            100% {
+                transform: translateX(0%);
+                left: 100%;
+            }
+        }
+
+        [hidden] {
+            display: none
+        }
+
     `],
     directives: [SvgKeyboardComponent]
 })
@@ -57,28 +102,104 @@ export class MainAppComponent implements OnInit, AfterViewInit {
     @ViewChildren('baseButton,modButton,fnButton,mouseButton')
     buttonsQueryList: QueryList<ElementRef>;
 
+    @ViewChildren(SvgKeyboardComponent, { read: ElementRef })
+    keyboardsQueryList: QueryList<ElementRef>;
+
     private buttons: ElementRef[];
+    private keyboards: ElementRef[];
     private selectedLayerIndex: number;
 
-    constructor(private renderer: Renderer) {
+    private svgAttributes: { viewBox: string, transform: string, fill: string };
+    private modules: SvgModule[];
+    private layers: Layers;
+
+    private numAnimationInProgress: number;
+
+    constructor(private renderer: Renderer, private dps: DataProviderService) {
         this.buttons = [];
+        this.keyboards = [];
         this.selectedLayerIndex = -1;
+        this.numAnimationInProgress = 0;
     }
 
-    ngOnInit() { }
+    ngOnInit() {
+        let svg: any = this.dps.getBaseLayer();
+        this.svgAttributes = {
+            viewBox: svg.$.viewBox,
+            transform: svg.g[0].$.transform,
+            fill: svg.g[0].$.fill
+        };
+        this.modules = svg.g[0].g.map(obj => new SvgModule(obj));
+        this.modules = [this.modules[1], this.modules[0]]; // TODO: remove if the svg will be correct
+
+        let uhkConfig: UhkConfiguration = new UhkConfiguration();
+        uhkConfig.fromJsObject(this.dps.getUHKConfig());
+        this.layers = uhkConfig.keyMaps.elements[0].layers;
+
+    }
 
     ngAfterViewInit() {
         this.buttons = this.buttonsQueryList.toArray();
+        this.keyboards = this.keyboardsQueryList.toArray();
         this.selectedLayerIndex = 0;
+        this.renderer.setElementAttribute(this.keyboards[0].nativeElement, 'hidden', undefined);
     }
 
     /* tslint:disable:no-unused-variable */
     /* selectLayer is used in the template string */
     private selectLayer(index: number): void {
         /* tslint:enable:no-unused-variable */
+        if (this.selectedLayerIndex === index || index > this.keyboards.length - 1 || this.numAnimationInProgress > 0) {
+            return;
+        }
+
         this.renderer.setElementClass(this.buttons[this.selectedLayerIndex].nativeElement, 'btn-primary', false);
         this.renderer.setElementClass(this.buttons[index].nativeElement, 'btn-primary', true);
+
+        if (index > this.selectedLayerIndex) {
+            this.renderer.setElementStyle(
+                this.keyboards[this.selectedLayerIndex].nativeElement,
+                'animation-name',
+                'animate-center-left'
+            );
+            this.renderer.setElementStyle(
+                this.keyboards[index].nativeElement,
+                'animation-name',
+                'animate-center-right'
+            );
+            this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-direction', 'reverse');
+        } else {
+            this.renderer.setElementStyle(
+                this.keyboards[this.selectedLayerIndex].nativeElement,
+                'animation-name',
+                'animate-center-right'
+            );
+            this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-name', 'animate-center-left');
+            this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-direction', 'reverse');
+        }
+        this.numAnimationInProgress += 2;
+
+        this.renderer.setElementAttribute(this.keyboards[index].nativeElement, 'hidden', undefined);
+
         this.selectedLayerIndex = index;
     }
 
+    /* tslint:disable:no-unused-variable */
+    /* onKeyboardAnimationEnd is used in the template string */
+    private onKeyboardAnimationEnd(event: AnimationEvent) {
+        /* tslint:enable:no-unused-variable */
+        let animationNameTokens: string[] = event.animationName.split('-');
+        let animationFrom: string = animationNameTokens[1];
+        let animationTo: string = animationNameTokens[2];
+        if ((<HTMLElement> event.target).style.animationDirection === 'reverse') {
+            animationFrom = animationNameTokens[2];
+            animationTo = animationNameTokens[1];
+            this.renderer.setElementStyle(event.target, 'animation-direction', undefined);
+        }
+
+        --this.numAnimationInProgress;
+        this.renderer.setElementStyle(event.target, 'animation-name', undefined);
+        this.renderer.setElementAttribute(event.target, 'hidden', (animationTo === 'center') ? undefined : '');
+    }
+
 }