diff --git a/assets/images/widget.png b/assets/images/widget.png
new file mode 100644
index 0000000..bd19635
Binary files /dev/null and b/assets/images/widget.png differ
diff --git a/index.html b/index.html
index a9d054e..59d77a0 100755
--- a/index.html
+++ b/index.html
@@ -4,8 +4,7 @@
     <meta charset="utf-8">
     <title>aframe-material😲😆😛</title>
     <meta name="description" content="Aframe-Material">
-    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
-    <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
+    <script src="https://rawgit.com/aframevr/aframe/b37f317/dist/aframe-master.min.js"></script>
     <script src="https://cdn.rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
     <script src="dist/aframe-material.js"></script>
     <script type="text/javascript">
@@ -13,38 +12,19 @@
     </script>
   </head>
   <body>
-    <a-scene>
+    <a-scene stats>
       <a-entity laser-controls="hand: right"></a-entity>
 
-      <a-entity> <a-camera look-controls-enabled wasd-controls-enabled mouse-cursor></a-camera></a-entity>
+      <a-entity cursor="rayOrigin: mouse"></a-entity>
 
       <!-- BEGIN INPUTS/KEYBOARD -->
-      <a-keyboard physical-keyboard="true"></a-keyboard>
+      <a-keyboard></a-keyboard>
       <a-input position="-0.7 1 -2.5" placeholder="Username" color="black" width="1"></a-input>
       <a-input position="-0.7 0.8 -2.5" type="password" placeholder="Password" color="black" width="1"></a-input>
       <!-- END INPUTS/KEYBOARD -->
 
-      <!-- BEGIN FORM -->
-      <a-rounded position="0.5 0.5 -2.5" width="4" height="3.1" radius="0.05" rotation="0 -20 0" scale="0.3 0.3 0.3">
-        <a-form>
-          <a-switch position="0.2 2.7 0" enabled="true"></a-switch>
-          <a-radio position="0.2 2.4 0" width="3" name="food" label="Burger with fries and pizza" value="pizza"></a-radio>
-          <a-radio position="0.2 2.1 0" width="3" name="food" label="Veggies" checked="true" disabled="true"></a-radio>
-          <a-radio position="0.2 1.8 0" width="3" name="food" label="Ice cream"></a-radio>
-          <a-checkbox position="0.2 1.5 0" width="3" name="stuff" label="I am a checkbox" checked="true"></a-checkbox>
-          <a-checkbox position="0.2 1.2 0" width="3" name="stuff" label="And I am another one" checked="true" disabled="true"></a-checkbox>
-          <a-button position="0.2 0.8 0" name="stuff" value="Click me" type="raised"></a-button>
-          <a-button position="0.2 0.35 0" width="3" name="stuff" value="You cannot click me" disabled="true"></a-button>
-        </a-form>
-      </a-rounded>
-      <!-- END FORM -->
-
-      <!-- BEGIN TOAST -->
-      <a-toast message="This is a toast" action="Got it"></a-toast>
-      <!-- END TOAST -->
-
       <!-- BEGIN ENVIRONEMENT -->
-      <a-gradient-sky material="shader: gradient; topColor: 255 0 0; bottomColor: 0 121 255;"></a-gradient-sky>
+      <a-gradient-sky material="shader: gradient; topColor: 255 0 0; bottomColor: 0 121 255; side: back"></a-gradient-sky>
       <!-- END ENVIRONEMENT -->
     </a-scene>
     <script type="text/javascript">
diff --git a/package.json b/package.json
index ed36dec..05f4b83 100755
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "vr"
   ],
   "dependencies": {
-    "aframe-rounded": "^1.0.3"
+    "aframe-rounded": "^1.0.3",
+    "aframe-slice9-component": "^1.0.0"
   }
 }
diff --git a/src/fade/index.js b/src/fade/index.js
index 9f010f9..16e5809 100755
--- a/src/fade/index.js
+++ b/src/fade/index.js
@@ -8,7 +8,9 @@ var opacityUpdate = function(opacity) {
     }
   });
   for (let text of this.textEntities) {
-    text.setAttribute('opacity', opacity);
+    if (text.components.text) {
+      text.components.text.material.uniforms.opacity.value = opacity;
+    }
   }
 }
 
diff --git a/src/index.js b/src/index.js
index fa0cc6c..8956677 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 (()=>{
   if (!AFRAME) { return console.error('AFRAME is required!'); }
   if (!AFRAME.ASSETS_PATH) { AFRAME.ASSETS_PATH = "./assets"; }
+  if (!AFRAME.components.slice9) { require('aframe-slice9-component'); }
   require('aframe-rounded');
   require("./fade");
   //require("./alert"); @TODO ;)
diff --git a/src/keyboard/assets.js b/src/keyboard/assets.js
index bea8bed..8be3ea7 100755
--- a/src/keyboard/assets.js
+++ b/src/keyboard/assets.js
@@ -1,4 +1,5 @@
 module.exports = {
+  slice: `${AFRAME.ASSETS_PATH}/images/widget.png`,
   aframeKeyboardShift: `${AFRAME.ASSETS_PATH}/images/ShiftIcon.png`,
   aframeKeyboardShiftActive: `${AFRAME.ASSETS_PATH}/images/ShiftActiveIcon.png`,
   aframeKeyboardGlobal: `${AFRAME.ASSETS_PATH}/images/GlobalIcon.png`,
diff --git a/src/keyboard/behaviors.js b/src/keyboard/behaviors.js
index 3542b05..a8a3ce2 100755
--- a/src/keyboard/behaviors.js
+++ b/src/keyboard/behaviors.js
@@ -1,18 +1,15 @@
 const Assets = require('./assets');
 const Config = require('./config');
 const Utils = require('../utils');
-const Event = require('../core/event');
 const SFX = require('./sfx');
-const Behaviors = {};
-
-Behaviors.el = null;
 
 // -----------------------------------------------------------------------------
 // KEYBOARD METHODS
 
-Behaviors.showKeyboard = function(el) {
-  if (el.o_position) {
-    el.object3D.position.copy(el.o_position);
+function showKeyboard (component) {
+  var el = component.el;
+  if (component.o_position) {
+    el.object3D.position.copy(component.o_position);
   }
   el.isOpen = true;
   for(let item of el.querySelectorAll('[data-ui]') ) {
@@ -24,29 +21,35 @@ Behaviors.showKeyboard = function(el) {
   if (parent) { return; }
   el.sceneEl.appendChild(el);
 };
+module.exports.showKeyboard = showKeyboard;
 
-Behaviors.hideKeyboard = function(el) {
+function hideKeyboard (component) {
+  var el = component.el;
   let position = el.getAttribute("position");
   if (position.x !== -10000) {
-    if (!el.o_position) {
-      el.o_position = new THREE.Vector3();
+    if (!component.o_position) {
+      component.o_position = new THREE.Vector3();
     }
-    el.o_position.copy(position);
+    component.o_position.copy(position);
   }
   el.isOpen = false;
   el.setAttribute("position", "-10000 -10000 -10000");
   el.setAttribute('fadeout', {duration: 1});
 }
+module.exports.hideKeyboard = hideKeyboard;
 
-Behaviors.destroyKeyboard = function(el) {
+function destroyKeyboard (component) {
+  var el = component.el;
   let parent = el.parentNode;
   if (!parent) { return; }
   parent.removeChild(el);
 };
+module.exports.destroyKeyboard = destroyKeyboard;
 
-Behaviors.openKeyboard = function(el) {
-  if (el.o_position) {
-    el.object3D.position.copy(o_position);
+function openKeyboard (component) {
+  var el = component.el;
+  if (component.o_position) {
+    el.object3D.position.copy(component.o_position);
   }
   el.isOpen = true;
   el._transitioning = true;
@@ -60,7 +63,7 @@ Behaviors.openKeyboard = function(el) {
       item.children[0].removeEventListener('animationend', animationend)
       setTimeout(function() {
         item.children[1].setAttribute('fadein', {duration: 160});
-        Event.emit(Behaviors.el, 'didopen');
+        el.emit('didopen');
         el._transitioning = false;
       }, 10)
     }
@@ -68,8 +71,10 @@ Behaviors.openKeyboard = function(el) {
     item.children[0].addEventListener('animationend', animationend)
   }
 };
+module.exports.openKeyboard = openKeyboard;
 
-Behaviors.dismissKeyboard = function(el) {
+function dismissKeyboard (component) {
+  var el = component.el;
   el._transitioning = true;
   for(let item of el.querySelectorAll('[data-ui]') ) {
     for (let child of item.children) {
@@ -81,8 +86,8 @@ Behaviors.dismissKeyboard = function(el) {
       setTimeout(function() {
         function animationend() {
           item.children[0].removeEventListener('animationend', animationend);
-          Behaviors.hideKeyboard(el);
-          Event.emit(Behaviors.el, 'diddismiss');
+          hideKeyboard(component);
+          el.emit('diddismiss');
           el._transitioning = false;
         }
         item.children[0].setAttribute('fadeout', {duration: 160});
@@ -93,28 +98,31 @@ Behaviors.dismissKeyboard = function(el) {
     item.children[1].addEventListener('animationend', animationend)
   }
 };
+module.exports.dismissKeyboard = dismissKeyboard;
 
 // -----------------------------------------------------------------------------
 // KEY EVENTS
 
-Behaviors.addKeyEvents = (el)=>{
-  el.addEventListener('click', Behaviors.keyClick);
-  el.addEventListener('mousedown', Behaviors.keyDown);
-  el.addEventListener('mouseup', Behaviors.keyOut);
-  el.addEventListener('raycaster-intersected', Behaviors.keyIn );
-  el.addEventListener('raycaster-intersected-cleared', Behaviors.keyOut );
+function addKeyEvents (component, el) {
+  el.addEventListener('click', () => { keyClick(component, el) });
+  el.addEventListener('mousedown', () => { keyDown(component, el) });
+  el.addEventListener('mouseup', () => { keyOut(component, el) });
+  el.addEventListener('raycaster-intersected', () => { keyIn (component, el) });
+  el.addEventListener('raycaster-intersected-cleared', () => { keyOut (component, el) });
   //triggerdown
   // https://aframe.io/docs/0.6.0/components/hand-controls.html
 };
+module.exports.addKeyEvents = addKeyEvents;
 
 // -----------------------------------------------------------------------------
 // KEYCLICK
 
-Behaviors.keyClick = function() {
-  SFX.keyDown(Behaviors.el);
+function keyClick (keyEl) {
+  var el = keyEl;
+  SFX.keyDown(el);
 
-  let type = this.getAttribute('key-type');
-  let value = this.getAttribute('key-value');
+  let type = el.getAttribute('key-type');
+  let value = el.getAttribute('key-value');
 
   if (type === 'text' || type === 'spacebar') {
     if (type === 'spacebar') { value = ' '; }
@@ -125,76 +133,95 @@ Behaviors.keyClick = function() {
     else if (Behaviors.isSymbols) {
       Behaviors.symbolsToggle();
     }
-    Event.emit(Behaviors.el, 'input', value);
+    el.emit('input', value);
   }
   else if (type === 'shift') {
-    Behaviors.shiftToggle();
+    shiftToggle();
   }
   else if (type === 'symbol') {
-    Behaviors.symbolsToggle();
+    symbolsToggle();
   }
   else if (type === 'backspace') {
-    Event.emit(Behaviors.el, 'backspace');
+    el.emit('backspace');
   }
   else if (type === 'enter') {
-    Event.emit(Behaviors.el, 'input', '\n');
-    Event.emit(Behaviors.el, 'enter', '\n');
+    el.emit('input', '\n');
+    el.emit('enter', '\n');
   }
   else if (type === 'dismiss') {
-    Event.emit(Behaviors.el, 'dismiss');
+    el.emit('dismiss');
   }
 }
+module.exports.keyClick = keyClick;
 
 // -----------------------------------------------------------------------------
 // KEYDOWN
 
-Behaviors.keyDown = function() {
-  if (Behaviors.el._transitioning) { return; }
-  this.object3D.position.z = 0.003;
-  if (this.getAttribute('key-type') === 'spacebar') {
-    this.setAttribute('color', Config.SPACEBAR_COLOR_ACTIVE);
+function keyDown (component, keyEl) {
+  var el = keyEl;
+  var keyHighlight;
+  if (el._transitioning) { return; }
+  el.object3D.position.z = 0.003;
+  if (el.getAttribute('key-type') === 'spacebar') {
+    el.setAttribute('color', Config.SPACEBAR_COLOR_ACTIVE);
   } else {
-    this.setAttribute('color', Config.KEY_COLOR_ACTIVE);
+    keyHighlight = component.hoverHighlight;
+    keyHighlight.object3D.position.copy(el.object3D.position);
+    keyHighlight.object3D.position.x += 0.04;
+    keyHighlight.object3D.position.y += 0.036;
   }
 };
+module.exports.keyDown = keyDown;
 
 // -----------------------------------------------------------------------------
 // KEYIN
 
-Behaviors.keyIn = function() {
-  if (Behaviors.el._transitioning) { return; }
-  if (this.object3D.children[2] && this.object3D.children[2].material && !this.object3D.children[2].material.opacity) {
+function keyIn (component, keyEl) {
+  var el = keyEl;
+  var keyHighlight;
+  if (el._transitioning) { return; }
+  if (el.object3D.children[2] && el.object3D.children[2].material &&
+      !el.object3D.children[2].material.opacity) {
     return
   }
-  SFX.keyIn(Behaviors.el);
-  if (this.getAttribute('key-type') === 'spacebar') {
-    this.setAttribute('color', Config.SPACEBAR_COLOR_HIGHLIGHT);
+  SFX.keyIn(el);
+  if (el.getAttribute('key-type') === 'spacebar') {
+    el.children[0].setAttribute('slice9', 'color', Config.SPACEBAR_COLOR_HIGHLIGHT);
   } else {
-    this.setAttribute('color', Config.KEY_COLOR_HIGHLIGHT);
+    keyHighlight = component.hoverHighlight;
+    keyHighlight.object3D.visible = true;
+    keyHighlight.object3D.position.copy(el.object3D.position);
+    keyHighlight.object3D.position.x += 0.04;
+    keyHighlight.object3D.position.y += 0.036;
   }
 };
+module.exports.keyIn = keyIn;
 
 // -----------------------------------------------------------------------------
 // KEYOUT
 
-Behaviors.keyOut = function() {
-  this.object3D.position.z = 0;
-  if (this.getAttribute('key-type') === 'spacebar') {
-    this.setAttribute('color', Config.KEY_COLOR_ACTIVE);
+function keyOut (component, keyEl) {
+  var el = keyEl;
+  var keyHighlight;
+  el.object3D.position.z = 0;
+  if (el.getAttribute('key-type') === 'spacebar') {
+    el.children[0].setAttribute('slice9', 'color', Config.KEY_COLOR_ACTIVE);
   } else {
-    this.setAttribute('color', Config.KEYBOARD_COLOR);
+    keyHighlight = component.hoverHighlight;
+    keyHighlight.object3D.visible = false;
   }
 }
+module.exports.keyOut = keyOut;
 
 // -----------------------------------------------------------------------------
 // SHIFT
 
-Behaviors.isShiftEnabled = false;
-Behaviors.shiftToggle = function() {
-  Behaviors.isShiftEnabled = !Behaviors.isShiftEnabled;
+function shiftToggle (component) {
+  var el = component.el;
+  component.isShiftEnabled = !component.isShiftEnabled;
 
-  var icon_el = Behaviors.el.shiftKey.querySelector('[data-type]');
-  if (Behaviors.isShiftEnabled) {
+  var icon_el = el.shiftKey.querySelector('[data-type]');
+  if (component.isShiftEnabled) {
     icon_el.setAttribute('src', Assets.aframeKeyboardShiftActive);
   } else {
     icon_el.setAttribute('src', Assets.aframeKeyboardShift);
@@ -206,33 +233,31 @@ Behaviors.shiftToggle = function() {
       let textEl = keyEl.querySelector('a-text');
       if (textEl) {
         let value = textEl.getAttribute('value').toLowerCase();
-        if (this.isShiftEnabled) { value = value.toUpperCase(); }
+        if (el.isShiftEnabled) { value = value.toUpperCase(); }
         textEl.setAttribute('value', value);
       }
     }
   }
 }
+module.exports.shiftToggle = shiftToggle;
 
 // -----------------------------------------------------------------------------
 // SYMBOLS
 
-Behaviors.isSymbols = false;
-Behaviors.symbolsToggle = function() {
-  Behaviors.isSymbols = !Behaviors.isSymbols;
-  if (!Behaviors.isSymbols) {
-    let parent = Behaviors.el.symbolsLayout.parentNode;
-    parent.removeChild(Behaviors.el.symbolsLayout);
-    parent.appendChild(Behaviors.el.alphabeticalLayout);
+function symbolsToggle (component) {
+  var el = component.el;
+  component.isSymbols = !component.isSymbols;
+  if (!component.isSymbols) {
+    let parent = el.symbolsLayout.parentNode;
+    parent.removeChild(el.symbolsLayout);
+    parent.appendChild(el.alphabeticalLayout);
     setTimeout(function() {
-      Utils.updateOpacity(Behaviors.el.alphabeticalLayout, 1);
+      Utils.updateOpacity(el.alphabeticalLayout, 1);
     }, 0)
   } else {
-    let parent = Behaviors.el.alphabeticalLayout.parentNode;
-    parent.removeChild(Behaviors.el.alphabeticalLayout);
-    parent.appendChild(Behaviors.el.symbolsLayout);
+    let parent = el.alphabeticalLayout.parentNode;
+    parent.removeChild(el.alphabeticalLayout);
+    parent.appendChild(el.symbolsLayout);
   }
 }
-
-
-
-module.exports = Behaviors;
+module.exports.symbolsToggle = symbolsToggle;
diff --git a/src/keyboard/draw.js b/src/keyboard/draw.js
index 96a269a..316279f 100755
--- a/src/keyboard/draw.js
+++ b/src/keyboard/draw.js
@@ -2,30 +2,71 @@ const Assets = require('./assets');
 const Layouts = require('./layouts');
 const Config = require('./config');
 const Behaviors = require('./behaviors');
-const Draw = {};
 
-Draw.el = null;
+module.exports.drawKeyboard = function (component) {
+  // Init keyboard UI
+  component.actionsUI  = drawActionsUI(component);
+  component.mainUI = drawMainUI(component);
+  component.numericalUI = drawNumericalUI(component);
+  component.hoverHighlight = drawHoverHighlight(component);
 
-Draw.init = (el)=>{
-  Draw.el = el;
-  Behaviors.el = el;
-  Behaviors.SFX = el.SFX;
-}
+  // Create layout
+  component.alphabeticalLayout = drawAlphabeticalLayout(component);
+  component.symbolsLayout = drawSymbolsLayout(component);
+
+  // Append layouts to UI
+  component.numericalUI.appendChild( drawNumericalLayout(component) );
+  component.mainUI.appendChild( component.alphabeticalLayout );
+  component.actionsUI.appendChild( drawActionsLayout(component) );
+
+  component.el.appendChild( component.numericalUI );
+  component.el.appendChild( component.mainUI );
+  component.el.appendChild( component.actionsUI );
+  component.el.appendChild( component.hoverHighlight  );
+};
+
+// -----------------------------------------------------------------------------
+// DRAW HOVER HIGHLIGHT
+function drawHoverHighlight (component) {
+  var slice;
+  slice = document.createElement('a-entity');
+  slice.setAttribute('id', 'aframeKeyboardHighlight');
+  slice.setAttribute('slice9', {
+    color: Config.KEY_COLOR_ACTIVE,
+    src: Assets.slice,
+    left: 50,
+    right: 52,
+    top: 50,
+    bottom: 52,
+    padding: 0.04,
+    width: Config.KEY_WIDTH,
+    height: Config.KEY_WIDTH
+  });
+  return slice;
+};
 
 // -----------------------------------------------------------------------------
 // DRAW NUMERICAL UI
 
-Draw.numericalUI = ()=> {
+function drawNumericalUI (component) {
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.025 0 0.12');
   wrapper.setAttribute('rotation', '0 25 0');
   wrapper.setAttribute('data-ui', true);
 
-  var el = document.createElement('a-rounded');
-  el.setAttribute('width', '0.280');
-  el.setAttribute('height', '0.360');
-  el.setAttribute('radius', '0.02');
-  el.setAttribute('color', Config.KEYBOARD_COLOR);
+  var el = document.createElement('a-entity');
+  el.setAttribute('slice9', {
+    color: Config.KEYBOARD_COLOR,
+    src: Assets.slice,
+    left: 50,
+    right: 50,
+    top: 50,
+    bottom: 50,
+    padding: 0.04,
+    width: 0.280,
+    height: 0.360
+  });
+  el.setAttribute('position', '0.14 0.18 0');
   wrapper.appendChild(el);
 
   return wrapper;
@@ -34,16 +75,24 @@ Draw.numericalUI = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW MAIN UI
 
-Draw.mainUI = ()=>{
+function drawMainUI (component) {
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.312 0 0');
   wrapper.setAttribute('data-ui', true);
 
-  var el = document.createElement('a-rounded');
-  el.setAttribute('width', '0.840');
-  el.setAttribute('height', '0.360');
-  el.setAttribute('radius', '0.02');
-  el.setAttribute('color', Config.KEYBOARD_COLOR);
+  var el = document.createElement('a-entity');
+  el.setAttribute('slice9', {
+    color: Config.KEYBOARD_COLOR,
+    src: Assets.slice,
+    left: 50,
+    right: 50,
+    top: 50,
+    bottom: 50,
+    padding: 0.04,
+    width: 0.840,
+    height: 0.360
+  });
+  el.setAttribute('position', '0.42 0.18 0');
   wrapper.appendChild(el);
 
   return wrapper;
@@ -52,17 +101,25 @@ Draw.mainUI = ()=>{
 // -----------------------------------------------------------------------------
 // DRAW ACTION UI
 
-Draw.actionsUI = ()=> {
+function drawActionsUI (component) {
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '1.180 0 0.01');
   wrapper.setAttribute('rotation', '0 -25 0');
   wrapper.setAttribute('data-ui', true);
 
-  var el = document.createElement('a-rounded');
-  el.setAttribute('width', '0.180');
-  el.setAttribute('height', '0.360');
-  el.setAttribute('radius', '0.02');
-  el.setAttribute('color', Config.KEYBOARD_COLOR);
+  var el = document.createElement('a-entity');
+  el.setAttribute('slice9', {
+    color: Config.KEYBOARD_COLOR,
+    src: Assets.slice,
+    left: 50,
+    right: 50,
+    top: 50,
+    bottom: 50,
+    padding: 0.04,
+    width: 0.180,
+    height: 0.360
+  });
+  el.setAttribute('position', '0.09 0.18 0');
   wrapper.appendChild(el);
 
   return wrapper;
@@ -71,7 +128,7 @@ Draw.actionsUI = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW NUMERICAL LAYOUT
 
-Draw.numericalLayout = ()=> {
+function drawNumericalLayout (component) {
   var data = Layouts.numerical;
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.02 0.26 0.001');
@@ -79,10 +136,10 @@ Draw.numericalLayout = ()=> {
   let index_y = 0;
   for (var i in data) {
     let key_id = 'num-'+i;
-    let key = Draw.key(key_id, data[i].type, data[i].value);
+    let key = drawKey(component, key_id, data[i].type, data[i].value);
     let index_x = i%3;
-    let x = Config.KEY_WIDTH*index_x;
-    let y = Config.KEY_WIDTH*index_y;
+    let x = Config.KEY_WIDTH * index_x;
+    let y = Config.KEY_WIDTH * index_y;
     key.setAttribute('position', `${x} -${y} 0`);
     if (index_x === 2) { index_y++; }
     wrapper.appendChild(key);
@@ -93,8 +150,7 @@ Draw.numericalLayout = ()=> {
 
 // -----------------------------------------------------------------------------
 // DRAW ALPHABETICAL LAYOUT
-
-Draw.alphabeticalLayout = ()=> {
+function drawAlphabeticalLayout (component) {
   var data = Layouts.alphabetical;
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.02 0.26 0.001');
@@ -103,7 +159,7 @@ Draw.alphabeticalLayout = ()=> {
 
   for (var i in data) {
     let key_id = 'main-'+i;
-    let key = Draw.key(key_id, data[i].type, data[i].value);
+    let key = drawKey(component, key_id, data[i].type, data[i].value);
 
     let x = Config.KEY_WIDTH*index_x;
     let y = Config.KEY_WIDTH*index_y;
@@ -126,7 +182,6 @@ Draw.alphabeticalLayout = ()=> {
     }
 
     key.setAttribute('position', `${x} -${y} 0`);
-
     if (index_y === 1 && index_x === 8) {
       index_x = -1;
       index_y++;
@@ -145,7 +200,7 @@ Draw.alphabeticalLayout = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW SYMBOLS LAYOUT
 
-Draw.symbolsLayout = ()=> {
+function drawSymbolsLayout (component) {
   var data = Layouts.symbols;
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.02 0.26 0.001');
@@ -155,7 +210,7 @@ Draw.symbolsLayout = ()=> {
   for (var i in data) {
 
     let key_id = 'symbols-'+i;
-    let key = Draw.key(key_id, data[i].type, data[i].value);
+    let key = drawKey(component, key_id, data[i].type, data[i].value);
     let x = Config.KEY_WIDTH*index_x;
     let y = Config.KEY_WIDTH*index_y;
 
@@ -187,7 +242,7 @@ Draw.symbolsLayout = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW ACTIONS LAYOUT
 
-Draw.actionsLayout = ()=> {
+function drawActionsLayout (component) {
   var data = Layouts.actions;
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.02 0.26 0.001');
@@ -195,7 +250,7 @@ Draw.actionsLayout = ()=> {
   let val_y = 0;
   for (var i in data) {
     let key_id = 'action-'+i;
-    let key = Draw.key(key_id, data[i].type, data[i].value);
+    let key = drawKey(component, key_id, data[i].type, data[i].value);
 
     key.setAttribute('position', `0 -${val_y} 0`);
     if (i == 0) {
@@ -213,33 +268,31 @@ Draw.actionsLayout = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW KEY
 
-Draw.key = (id, type, value)=> {
-  var that = this;
+function drawKey(component, id, type, value) {
+  var el;
+  var slice;
 
-  var el = document.createElement('a-rounded');
+  el = document.createElement('a-entity');
+  el.classList.add('aframeMaterialKey');
   el.setAttribute('key-id', id);
-  el.setAttribute('width', Config.KEY_WIDTH);
-  el.setAttribute('height', Config.KEY_WIDTH);
-  el.setAttribute('radius', '0.008');
-  el.setAttribute('position', '0 0 0');
   el.setAttribute('key-type', type);
   el.setAttribute('key-value', value);
-  el.setAttribute('color', Config.KEYBOARD_COLOR);
-
-  // ---------------------------------------------------------------------------
-  // EVENTS
-
-  Behaviors.addKeyEvents(el);
 
-  // ---------------------------------------------------------------------------
-  // SHADOW
-
-  el.shadow_el = document.createElement('a-image');
-  el.shadow_el.setAttribute('width', Config.KEY_WIDTH*1.25);
-  el.shadow_el.setAttribute('height', Config.KEY_WIDTH*1.25);
-  el.shadow_el.setAttribute('position', Config.KEY_WIDTH/2+' '+Config.KEY_WIDTH/2+' -0.002');
-  el.shadow_el.setAttribute('src', Assets.aframeKeyboardShadow);
-  el.appendChild(el.shadow_el);
+  if (type === 'spacebar') {
+    slice = document.createElement('a-entity');
+    slice.setAttribute('slice9', {
+      color: Config.KEYBOARD_COLOR,
+      src: Assets.slice,
+      left: 50,
+      right: 52,
+      top: 50,
+      bottom: 52,
+      padding: 0.04,
+      width: Config.KEY_WIDTH,
+      height: Config.KEY_WIDTH
+    });
+    el.appendChild(slice);
+  }
 
   // ---------------------------------------------------------------------------
   // TEXT KEY
@@ -248,7 +301,11 @@ Draw.key = (id, type, value)=> {
     var letter_el = document.createElement('a-text');
     letter_el.setAttribute('value', value);
     letter_el.setAttribute('color', '#dbddde');
-    letter_el.setAttribute('position', Config.KEY_WIDTH/2+' '+Config.KEY_WIDTH/2+' 0.01');
+    letter_el.setAttribute('position', {
+      x: Config.KEY_WIDTH / 2,
+      y: Config.KEY_WIDTH / 2,
+      z: 0.01
+    });
     letter_el.setAttribute('scale', '0.16 0.16 0.16');
     letter_el.setAttribute('align', 'center');
     letter_el.setAttribute('baseline', 'center');
@@ -259,12 +316,12 @@ Draw.key = (id, type, value)=> {
   // SPACEBAR KEY
 
   if (type === 'spacebar') {
-    el.setAttribute('width', Config.SPACE_KEY_WIDTH);
-    el.setAttribute('height', Config.SPACE_KEY_HEIGHT);
-    el.setAttribute('color', '#404b50');
-    el.shadow_el.setAttribute('width', Config.SPACE_KEY_WIDTH*1.12);
-    el.shadow_el.setAttribute('height', Config.SPACE_KEY_HEIGHT*1.2);
-    el.shadow_el.setAttribute('position', Config.SPACE_KEY_WIDTH/2+' '+Config.SPACE_KEY_HEIGHT/2+' -0.02');
+    slice.setAttribute('slice9', {
+      color: '#404b50',
+      width: Config.SPACE_KEY_WIDTH,
+      height: Config.SPACE_KEY_HEIGHT
+    });
+    slice.setAttribute('position', '0.19 0.02 0');
     letter_el.setAttribute('color', '#adb1b3');
     letter_el.setAttribute('scale', '0.12 0.12 0.12');
     letter_el.setAttribute('position', Config.SPACE_KEY_WIDTH/2+' '+Config.SPACE_KEY_HEIGHT/2+' 0');
@@ -277,15 +334,6 @@ Draw.key = (id, type, value)=> {
     letter_el.setAttribute('scale', '0.12 0.12 0.12');
   }
 
-  // ---------------------------------------------------------------------------
-  // ACTION KEY
-
-  if (type === 'backspace' || type === 'enter' || type === 'dismiss') {
-    el.setAttribute('width', Config.ACTION_WIDTH);
-    el.shadow_el.setAttribute('width', Config.ACTION_WIDTH*1.25);
-    el.shadow_el.setAttribute('position', Config.ACTION_WIDTH/2+' '+Config.KEY_WIDTH/2+' -0.02');
-  }
-
   // ---------------------------------------------------------------------------
   // SHIFT KEY
 
@@ -297,7 +345,7 @@ Draw.key = (id, type, value)=> {
     icon_el.setAttribute('position', '0.04 0.04 0.01')
     icon_el.setAttribute('src', Assets.aframeKeyboardShift);
     el.appendChild(icon_el);
-    Draw.el.shiftKey = el;
+    component.shiftKey = el;
   }
 
   // ---------------------------------------------------------------------------
@@ -328,16 +376,11 @@ Draw.key = (id, type, value)=> {
   // ENTER
 
   else if (type === 'enter') {
-    el.setAttribute('height', Config.ACTION_WIDTH);
-    el.shadow_el.setAttribute('height', Config.ACTION_WIDTH*1.25);
-    el.shadow_el.setAttribute('position', Config.ACTION_WIDTH/2+' '+Config.ACTION_WIDTH/2+' -0.02');
-
     var circle_el = document.createElement('a-circle');
     circle_el.setAttribute('color', '#4285f4');
     circle_el.setAttribute('radius', 0.044);
     circle_el.setAttribute('position', '0.07 0.07 0.01')
     el.appendChild(circle_el);
-
     var icon_el = document.createElement('a-image');
     icon_el.setAttribute('width', '0.034');
     icon_el.setAttribute('height', '0.034');
@@ -358,7 +401,6 @@ Draw.key = (id, type, value)=> {
     el.appendChild(icon_el);
   }
 
+  component.keys.push(el);
   return el;
 }
-
-module.exports = Draw;
diff --git a/src/keyboard/index.js b/src/keyboard/index.js
index 0b9b9f5..d561231 100755
--- a/src/keyboard/index.js
+++ b/src/keyboard/index.js
@@ -1,48 +1,49 @@
-const Utils = require('../utils');
 const Draw = require('./draw');
 const Behaviors = require('./behaviors');
 const SFX = require('./sfx');
-const Event = require('../core/event');
 
 AFRAME.registerComponent('keyboard', {
   schema: {
     isOpen: { type: "boolean", default: false },
     physicalKeyboard: { type: "boolean", default: false }
   },
-  currentInput: null,
+
   init: function () {
     let that = this;
 
-    // SFX
-    SFX.init(this.el);
+    this.actionsUI  = null;
+    this.mainUI = null;
+    this.numericalUI = null;
+    this.hoverHighlight = null;
+    this.alphabeticalLayout = null;
+    this.symbolsLayout = null;
 
-    // Draw
-    Draw.init( this.el );
+    this.currentInput = null;
+    this.isShiftEnabled = false;
+    this.isSymbols = false;
+    this.shiftKey = null;
 
-    // Init keyboard UI
-    let numericalUI = Draw.numericalUI(),
-        mainUI      = Draw.mainUI(),
-        actionsUI   = Draw.actionsUI();
+    this.keys = [];
 
-    // Create layout
-    this.el.alphabeticalLayout = Draw.alphabeticalLayout();
-    this.el.symbolsLayout = Draw.symbolsLayout();
+    // SFX
+    SFX.init(this.el);
+
+    // Create keyboard.
+    Draw.drawKeyboard(this);
 
-    // Append layouts to UI
-    numericalUI.appendChild( Draw.numericalLayout() );
-    mainUI.appendChild( this.el.alphabeticalLayout );
-    actionsUI.appendChild( Draw.actionsLayout() );
+    this.mainUI.addEventListener('raycaster-intersected', evt => {
+      console.log(evt);
+    });
 
-    this.el.appendChild( numericalUI );
-    this.el.appendChild( mainUI );
-    this.el.appendChild( actionsUI );
+    // Add event listeners to keys.
+    this.keys.forEach(key => Behaviors.addKeyEvents(that, key) );
 
-    // Inject methods in elements..
-    this.el.show = function() { Behaviors.showKeyboard(that.el); }
-    this.el.hide = function() { Behaviors.hideKeyboard(that.el); }
-    this.el.open = function() { Behaviors.openKeyboard(that.el); }
-    this.el.dismiss = function() { Behaviors.dismissKeyboard(that.el); }
-    this.el.destroy = function() { Behaviors.destroyKeyboard(that.el); }
+    // Inject methods in keyboard element.
+    this.el.show = function() { Behaviors.showKeyboard(that); }
+    this.el.hide = function() { Behaviors.hideKeyboard(that); }
+    this.el.open = function() { Behaviors.openKeyboard(that); }
+    this.el.dismiss = function() { Behaviors.dismissKeyboard(that); }
+    this.el.destroy = function() { Behaviors.destroyKeyboard(that); }
 
     // Set default value
     this.el.setAttribute("scale", "2 2 2");
@@ -59,14 +60,15 @@ AFRAME.registerComponent('keyboard', {
     document.body.addEventListener('didfocusinput', this.didFocusInputEvent.bind(this));
     document.body.addEventListener('didblurinput', this.didBlurInputEvent.bind(this));
   },
+
   update: function () {
     if (this.data.isOpen) {
-      Behaviors.showKeyboard(this.el);
+      Behaviors.showKeyboard(this);
     } else {
-      Behaviors.hideKeyboard(this.el);
+      Behaviors.hideKeyboard(this);
     }
   },
-  tick: function () {},
+
   remove: function () {
     this.el.removeEventListener('input', this.inputEvent.bind(this));
     this.el.removeEventListener('backspace', this.backspaceEvent.bind(this));
@@ -76,8 +78,6 @@ AFRAME.registerComponent('keyboard', {
     document.body.removeEventListener('didfocusinput', this.didFocusInputEvent.bind(this));
     document.body.removeEventListener('didblurinput', this.didBlurInputEvent.bind(this));
   },
-  pause: function () {},
-  play: function () {},
 
   // Fired on keyboard key press
   inputEvent: function(e) {
@@ -106,17 +106,17 @@ AFRAME.registerComponent('keyboard', {
       e.stopPropagation();
 
       if (e.key === 'Enter') {
-        Event.emit(Behaviors.el, 'input', '\n');
-        Event.emit(Behaviors.el, 'enter', '\n');
+        this.el.emit('input', '\n');
+        this.el.emit('enter', '\n');
       }
       else if (e.key === 'Backspace') {
-        Event.emit(Behaviors.el, 'backspace');
+        this.el.emit('backspace');
       }
       else if (e.key === 'Escape') {
-        Event.emit(Behaviors.el, 'dismiss');
+        this.el.emit('dismiss');
       }
       else if (e.key.length < 2) {
-        Event.emit(Behaviors.el, 'input', e.key);
+        this.el.emit('input', e.key);
       }
     }
   },
@@ -128,14 +128,14 @@ AFRAME.registerComponent('keyboard', {
     }
     this.currentInput = e.detail;
     if (!this.el.isOpen) {
-      Behaviors.openKeyboard(this.el);
+      Behaviors.openKeyboard(this);
     }
   },
 
   // Fired when an input has been deselected
   didBlurInputEvent: function(e) {
     this.currentInput = null;
-    Behaviors.dismissKeyboard(this.el);
+    Behaviors.dismissKeyboard(this);
   }
 });
 
