diff --git a/bower.json b/bower.json
index 02a4c90..c752ade 100644
--- a/bower.json
+++ b/bower.json
@@ -4,7 +4,8 @@
   "main": "key-pad.html",
   "dependencies": {
     "polymer": "Polymer/polymer#^1.4.0",
-    "iron-flex-layout": "^1.3.1"
+    "iron-flex-layout": "^1.3.1",
+    "iron-icons": "^1.2.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
diff --git a/demo/index.html b/demo/index.html
index 0e1517d..b9377b7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -18,9 +18,33 @@
   <body>
     <div class="vertical-section-container centered">
       <h3>Basic key-pad demo</h3>
+
       <demo-snippet>
         <template>
-          <key-pad></key-pad>
+
+          <key-pad shuffle>
+          </key-pad>
+
+        </template>
+      </demo-snippet>
+
+      <h3>Max length</h3>
+      <demo-snippet>
+        <template>
+
+          <key-pad max-length="6">
+          </key-pad>
+
+        </template>
+      </demo-snippet>
+
+      <h3>Unordering keys</h3>
+      <demo-snippet>
+        <template>
+
+          <key-pad shuffle>
+          </key-pad>
+
         </template>
       </demo-snippet>
     </div>
diff --git a/key-pad-key-styles.html b/key-pad-key-styles.html
new file mode 100644
index 0000000..843aedd
--- /dev/null
+++ b/key-pad-key-styles.html
@@ -0,0 +1,48 @@
+<dom-module id="key-pad-key-styles">
+    <template>
+        <style>
+            :host {
+                
+            }
+
+            .key-pad-key__keyNums {
+                @apply(--layout);
+                @apply(--layout-wrap);
+            }
+
+            .key-pad-key__keyNum {
+                flex: 1 0 33.3%;
+                @apply(--layout);
+                @apply(--layout-center-justified);
+            }
+
+            .key-pad-key__keyNum:nth-of-type(10) {
+                flex-basis: 66.6%;
+                @apply(--layout-end-justified);
+            }
+
+            .key-pad-key__keyNum-content {
+                border: 1px solid #CCC;
+                border-radius: 50%;
+                text-align: center;
+                margin: 10px 0;
+                padding: 30px 0;
+                width: 75px;
+            }
+                .key-pad-key__keyNum:nth-of-type(10) .key-pad-key__keyNum-content {
+                    margin-right: 20px;
+                }
+
+                .key-pad-key__keyNum-content:hover {
+                    cursor: pointer;
+                    background-color: #CCC;
+                }
+        </style>
+    </template>
+</dom-module>
+
+<dom-module id="key-pad-key-animations">
+    <template>
+        <style></style>
+    </template>
+</dom-module>
diff --git a/key-pad-key.html b/key-pad-key.html
new file mode 100644
index 0000000..218e185
--- /dev/null
+++ b/key-pad-key.html
@@ -0,0 +1,48 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../iron-icons/maps-icons.html">
+
+<link rel="import" href="key-pad-key-styles.html">
+<!--
+`key-pad-key`
+A custom UI keypad
+
+@demo demo/index.html 
+-->
+<dom-module id="key-pad-key">
+    <style include="key-pad-key-styles key-pad-key-animations"></style>
+    <template>
+        <div class$="key-pad-key__keyNum key-pad-key__[[ label ]]"
+             on-tap="_onTapKey">
+            <div class="key-pad-key__keyNum-content">
+                [[ label ]]
+            </div>
+        </div>
+    </template>
+
+    <script>
+        'use strict';
+
+        Polymer({
+            is: 'key-pad-key',
+            properties: {
+                key: {
+                    type: String
+                },
+                label: {
+                    type: String
+                }
+            },
+            ready: function() {
+                if (!this.label) {
+                    this.set('label', this.key);
+                }
+            },
+
+            _onTapKey: function(evt) {
+                this.fire('key-pad-key.key', evt.model.key);
+                console.log('key-pad-key.key', evt.model.key);
+            }
+        })
+    </script>
+</dom-module>
diff --git a/key-pad-styles.html b/key-pad-styles.html
index 9cbb8d9..1e47989 100644
--- a/key-pad-styles.html
+++ b/key-pad-styles.html
@@ -65,4 +65,43 @@
                 }
         </style>
     </template>
-</dom-module>
\ No newline at end of file
+</dom-module>
+
+<dom-module id="key-pad-animations">
+    <template>
+        <style>
+            
+            @-webkit-keyframes shake {
+                0%   { -webkit-transform: translateX( 2px); }
+                20%  { -webkit-transform: translateX(-4px); }
+                40%  { -webkit-transform: translateX( 2px); }
+                60%  { -webkit-transform: translateX(-2px); }
+                80%  { -webkit-transform: translateX( 4px); }
+                100% { -webkit-transform: translateX(-2px); }
+            }
+
+            @keyframes shake {
+                0%   { transform: translateX( 2px);}
+                20%  { transform: translateX( -4px);}
+                40%  { transform: translateX( 2px);}
+                60%  { transform: translateX( -2px);}
+                80%  { transform: translateX( 4px);}
+                100% { transform: translateX( -2px);}
+            }
+
+            .shake {
+                animation-name: shake;
+                animation-duration: 0.6s;
+                transform-origin: 50% 50%;
+                animation-iteration-count: 1;
+                animation-timing-function: linear;
+                -webkit-animation-name: shake;
+                -webkit-animation-duration: 0.6s;
+                -webkit-transform-origin: 50% 50%;
+                -webkit-animation-iteration-count: 1;
+                -webkit-animation-timing-function: linear;
+
+            }       
+        </style>
+    </template>
+</dom-module>
diff --git a/key-pad.html b/key-pad.html
index e7384a4..015849d 100644
--- a/key-pad.html
+++ b/key-pad.html
@@ -1,5 +1,8 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../iron-icons/maps-icons.html">
+
+<link rel="import" href="key-pad-key.html">
 
 <link rel="import" href="key-pad-styles.html">
 <!--
@@ -9,7 +12,7 @@
 @demo demo/index.html 
 -->
 <dom-module id="key-pad">
-    <style include="key-pad-styles"></style>
+    <style include="key-pad-styles key-pad-animations"></style>
     <template>
         <section class="key-pad__wrapper">
 
@@ -17,25 +20,23 @@
 
             <header class="key-pad__containerPoints">
                 <div class="key-pad__points">
-                    <div class="key-pad__point key-pad__point--selected key-pad__point--1"></div>
-                    <div class="key-pad__point key-pad__point--2"></div>
-                    <div class="key-pad__point key-pad__point--3"></div>
-                    <div class="key-pad__point key-pad__point--4"></div>
+                    <template is="dom-repeat" items="{{ _getInputLength(maxLength) }}">
+                        <div class="key-pad__point key-pad__point--[[index + 1]]"></div>
+                    </template>
+
+                    <!-- <div class="key-pad__point key-pad__point--selected key-pad__point--1"></div> -->
                 </div>
-                <div class="key-pad__reset">a
-                    <!-- Icon (iron-icons) -->
+                <div class="key-pad__reset">
+                    <iron-icon icon="icons:close"></iron-icon>
                 </div>
             </header>
 
             <div class="key-pad__keyNums">
                 <template is="dom-repeat" items="[[ _keypadNums ]]" as="keyNum">
-                    <div class$="key-pad__keyNum key-pad__[[ index ]]">
-                        <div class="key-pad__keyNum-content">
-                            [[ keyNum ]]
-                        </div>
-                    </div>
+                    <key-pad-key key="[[ keyNum ]]"></key-pad-key>
                 </template>
-                <div class="key-pad__keyNum key-pad__ok">
+                <div class="key-pad__keyNum key-pad__ok"
+                     on-tap="">
                     <div class="key-pad__keyNum-content">OK</div>
                 </div>
             </div>
diff --git a/key-pad.js b/key-pad.js
index 7a5b3bf..832d869 100644
--- a/key-pad.js
+++ b/key-pad.js
@@ -10,10 +10,21 @@ Polymer({
          * @type {String}
          */
         model: {
-            type: String
+            type: String,
+            readOnly: true,
+            value: ''
         },
 
-        keyLength: {
+        maxLength: {
+            type: Number,
+            value: 4
+        },
+
+        shuffle: {
+            type: Boolean
+        },
+
+        _keyLength: {
             type: Number,
             value: 0
         },
@@ -24,12 +35,23 @@ Polymer({
 
     },
 
+    ready: function() {
+
+    },
+
     attached: function() {
-        this.set('_keypadNums', this._getRandomNumbers());
+        var shuffle = this.shuffle ? true : false;
+
+        this.set('_keypadNums', this._getRandomNumbers(shuffle));
     },
 
     reset: function() {
+        this._setModel('');
+        this.set('_keyLength', 0);
+    },
 
+    _getInputLength: function() {
+        return new Array(this.maxLength);
     },
 
     _fillPoints: function() {
@@ -38,13 +60,22 @@ Polymer({
 
     },
 
-    _shake: function() {
-        //TODO
-        //Add class shake to the points
+    ////// EVENTS
+
+    _onTapKey: function(evt) {
+        if (this.model.length < this.maxLength) {
+            this._setModel(this.model + evt.model.keyNum);
+            this.fire('key-pad.num-clicked', evt.model.keyNum);
+            console.log(evt.model.keyNum);
+        }
     },
 
     _onTapOk: function() {
+        this.fire('key-pad.ok-clicked');
+    },
 
+    _onTapReset: function() {
+        this.fire('key-pad.reset-clicked');
     },
 
     /**
@@ -86,14 +117,15 @@ Polymer({
         var arrTmp = [];
         var row    = [];
 
-        for (var i = 0, len = arr.length; i < len; i++) {
+        /*for (var i = 0, len = arr.length; i < len; i++) {
             if (i % 3 === 0) {
                 row = [];
                 arrTmp.push(row);
             }
             row.push(arr[i]);
         }
-        return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+        */
+        return arr;
         // return arrTmp;
     }
 
