diff --git a/src/keyboard.vue b/src/keyboard.vue
index 10025e8..a1016c8 100644
--- a/src/keyboard.vue
+++ b/src/keyboard.vue
@@ -3,7 +3,8 @@
 		// input(type="text", v-model="keyboardText", v-if="!input")
 		.keyboard
 			.line(v-for="(line, index) in keySet", :key="index")
-				span(v-for="(key, index) in line", :key="index", :class="getClassesOfKey(key)", v-text="getCaptionOfKey(key)", @click="e => clickKey(e, key)", @mousedown="mousedown", :style="getKeyStyle(key)")
+				div(v-for="(key, index) in line", :key="index", :class="getClassesOfKey(key)", :style="getKeyStyle(key)")
+					div(v-if="!key.placeholder" v-text="getCaptionOfKey(key)", @click="e => clickKey(e, key)", @mousedown="mousedown")
 
 
 </template>
@@ -310,78 +311,76 @@
 			.line {
 				display: flex;
 				justify-content: space-around;    
+				margin-right: -$margin;
 				&:not(:last-child) {
 					margin-bottom: $margin;
 				}
 			}
 			
 			.key {
-				&:not(:last-child) {
-					margin-right: $margin;
-				}
-
 				flex: $width;
-				//width: $btnW;
-				height: $height;
-				line-height: $height;
-				overflow: hidden;
 
-				vertical-align: middle;
-				border: 1px solid #ccc;
-				color: #333;
-				background-color: #fff;
-				box-shadow: 0px 2px 2px rgba(0, 0, 0, .6);
-				border-radius: $radius;
+				&.half {
+					flex: $width / 2;
+				}
 
-				font-size: 1.25em;
-				text-align: center;
-				white-space: nowrap;
-				user-select: none;
-				cursor: pointer;
+				> div {
+					height: $height;
+					line-height: $height;
+					overflow: hidden;
+					margin-right: $margin;
 
+					vertical-align: middle;
+					border: 1px solid #ccc;
+					color: #333;
+					background-color: #fff;
+					box-shadow: 0px 2px 2px rgba(0, 0, 0, .6);
+					border-radius: $radius;
+
+					font-size: 1.25em;
+					text-align: center;
+					white-space: nowrap;
+					user-select: none;
+					cursor: pointer;
+				}
 
-				&.backspace {
+				&.backspace > div {
 					background-image: url("./icons/backspace.svg");
 					background-position: center center;
 					background-repeat: no-repeat;
 					background-size: 35%;
 				}
-			
-				&.half {
-					flex: $width / 2;
-				}
 
-				&.control {
+				&.control > div {
 					color: #fff;
 					background-color: #7d7d7d;
 					border-color: #656565;
 				}
 							
-				&.featured {
+				&.featured > div {
 					color: #fff;
 					background-color: #337ab7;
 					border-color: #2e6da4;
 				}
 
-				&:hover {
+				&:hover > div {
 					color: #333;
 					background-color: #d6d6d6;
 					border-color: #adadad;
 				}
 				
-				&:active {
+				&:active > div {
 					transform: scale(.98); // translateY(1px);
 					color: #333;
 					background-color: #d4d4d4;
 					border-color: #8c8c8c;					
 				}
 
-				&.activated {
+				&.activated > div {
 					color: #fff;
 					background-color: #5bc0de;
 					border-color: #46b8da;
 				}
-
 			} // .key
 			/*
 			// Apple style
@@ -425,10 +424,6 @@
 				flex: $width / 2;
 				height: $height;
 				line-height: $height;
-				
-				&:not(:last-child) {
-					margin-right: $margin;
-				}
 			}
 			
 			
diff --git a/src/layouts.js b/src/layouts.js
index d0ee0c2..247d60e 100644
--- a/src/layouts.js
+++ b/src/layouts.js
@@ -49,7 +49,7 @@ module.exports = {
 			"backspace": { func: "backspace", classes: "control"},
 			"accept": { func: "accept", text: "Close", classes: "control featured"},
 			"next": { func: "next", text: "Next", classes: "featured"},
-			"zero": { key: "0", width: 130}
+			"zero": { key: "0", width: 120}
 		},
 
 		default: [
@@ -80,7 +80,7 @@ module.exports = {
 			"backspace": { func: "backspace", classes: "control"},
 			"accept": { func: "accept", text: "Close", classes: "control featured"},
 			"next": { func: "next", text: "Next", classes: "control featured"},
-			"zero": { key: "0", width: 130}
+			"zero": { key: "0", width: 120}
 		},
 
 		default: [