diff --git a/printPreview.css b/printPreview.css
index 6c9963a..41b2474 100644
--- a/printPreview.css
+++ b/printPreview.css
@@ -106,3 +106,64 @@
     border: 1px solid #5689db;
     color: #fff;
 }
+.checkbox {
+  position: relative;
+  width: 20px;
+  height: 20px;
+}
+.checkbox label {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  background-color: #DEDEDE;
+  border: 1px solid #D4D4D4;
+}
+.checkbox label::after {
+	opacity: 0;
+	content: '';
+	position: absolute;
+	width: 9px;
+	height: 5px;
+	background: transparent;
+	top: 4px;
+	left: 4px;
+	border: 3px solid #333;
+	border-top: none;
+	border-right: none;
+
+	transform: rotate(-45deg);
+}
+.checkbox label:hover::after {
+	opacity: 0.5 !important;
+}
+.checkbox input[type=checkbox]:checked + label::after {
+	opacity: 1;
+}
+
+.numberInput input[type=number]{
+    font-size:1em;
+    width:1.5em;
+    padding:3px;
+    margin:0;
+    border:1px solid #ddd;
+    border-radius:5px;
+    text-align: center;
+    background-color: #eee;
+}
+.numberInput input[type=number]::-webkit-inner-spin-button,
+.numberInput input[type=number]::-webkit-outer-spin-button {
+   -webkit-appearance: none;
+}
+
+.numberInput input[type=number]:hover{
+    border:1px solid #ddd;
+    background-color: #f6f6f6;
+}
+.numberInput input[type=number]:focus{
+    outline:none;
+    border:1px solid #ddd;
+    background-color: #f6f6f6;
+}
diff --git a/printPreview.html b/printPreview.html
index 6b56054..d2547d9 100644
--- a/printPreview.html
+++ b/printPreview.html
@@ -14,23 +14,38 @@
     <div id="card-print-dialog-footer">
       <div class="buttons">
         <div class="ui-element" style="float: left;" >
-          <div style="float: left; position: relative; top: -2px;"><input id="columnCount" type="text" maxlength="1" style="width: 15px; padding: 2px;" value="1"/></div>
+          <input id="columnCount" type="number" min="0" max="9" class="numberInput" style="loat: left; width: 15px; padding: 2px;" value="1"/>
           <div style="float: left; margin-left: 5px; margin-right: 5px;">x</div>
-          <div style="float: left; position: relative; top: -2px;"><input id="rowCount" type="text" maxlength="1" style="width: 15px; padding: 2px;" value="2"/></div>
-          <div style="float: left; margin-left:5px;">Page Grid</div>
+          <input id="rowCount" type="number" min="0" max="9" class="numberInput" style="loat: left; width: 15px; padding: 2px;" value="2"/>
+          <label style="float: left; margin-left:5px;">Page Grid</label>
         </div>
         <div class="ui-element" style="float: left;">
           <form style="float: left;" oninput="amount.value=parseFloat(scaleRange.value).toFixed(1)">
             <input id="scaleRange" type="range" min="-1.0" max="1.0" step="0.1" value="0.0" style="float: left; width: 80px;" />
             <output style="float: left; width: 25px; margin-left:5px;" name="amount" for="scaleRange"></output>
           </form>
-          <div style="float: left; margin-left:5px;">Scale</div>
+          <label for="scaleRange">Scale</label>
+        </div>
+        <div class="ui-element checkbox" style="float: left;">
+          <input id="single-card-page-checkbox" type="checkbox"/>
+          <label for="single-card-page-checkbox">Single Card Per Page</label>
+        </div>
+        <div class="ui-element checkbox" style="float: left;">
+          <input id="description-checkbox" type="checkbox"/>
+          <label for="single-card-page-checkbox">Description</label>
+        </div>
+        <div class="ui-element checkbox" style="float: left;">
+          <input id="assignee-checkbox" type="checkbox"/>
+          <label for="assignee-checkbox">Assignee</label>
+        </div>
+        <div class="ui-element checkbox" style="float: left;">
+          <input id="due-date-checkbox" type="checkbox"/>
+          <label for="due-date-checkbox">Due Date</label>
+        </div>
+        <div class="ui-element checkbox" style="float: left;">
+          <input id="qr-code-checkbox" type="checkbox"/>
+          <label for="qr-code-checkbox">QR Code</label>
         </div>
-        <div class="ui-element" style="float: left;"><input id="single-card-page-checkbox" type="checkbox"/>Single Card Per Page</div>
-        <div class="ui-element" style="float: left;"><input id="description-checkbox" type="checkbox"/>Description</div>
-        <div class="ui-element" style="float: left;"><input id="assignee-checkbox" type="checkbox"/>Assignee</div>
-        <div class="ui-element" style="float: left;"><input id="due-date-checkbox" type="checkbox"/>Due Date</div>
-        <div class="ui-element" style="float: left;"><input id="qr-code-checkbox" type="checkbox"/>QR Code</div>
 
         <div id="card-print-dialog-print" class="ui-element button button-primary" style="float: right;" >Print</div>
         <div id="card-print-dialog-cancel" class="ui-element button" style="float: right;" >Cancel</div>