diff --git a/printPreview.css b/printPreview.css
index 13a8b3c..6f39053 100644
--- a/printPreview.css
+++ b/printPreview.css
@@ -82,20 +82,22 @@
   line-height: 30px;
 }
 .ui-element {
+  color: #656565;
   font-size: 14px;
+  font-weight: 600;
   display: inline-block;
   margin: 5px 10px;
   vertical-align: baseline;
 }
 .button {
-    background-color: #F5F5F5;
-    border: 1px solid #F5F5F5;
+    background-color: #DEDEDE;
+    border: 1px solid #D4D4D4;
     border-radius: 3px;
     display: inline-block;
-    color: #8C8C8C;
     font-size: 13px;
     font-weight: 700;
-    padding: 7px 28px;
+    padding: 5.8px 20px;
+    margin: 0px 2px;
     text-decoration: none;
     text-align: center;
 }
diff --git a/printPreview.html b/printPreview.html
index afb6f8e..cae2a3a 100644
--- a/printPreview.html
+++ b/printPreview.html
@@ -4,8 +4,8 @@
       <div id="card-print-dialog-title">Card Printer</div>
       <div id="info">
         <label id="info-line"><b>Jira</b> - <b>PivotalTracker</b> - <b>Trello</b> - <b>YouTrack</b></label>
-        <input id="report-issue" type="button" class="aui-button" value="Report Issues" />
-        <input id="about" type="button" class="aui-button" value="About" />
+        <div id="report-issue" class="ui-element button" />Report Issues</div>
+        <div id="about" class="ui-element button"/>About</div>
       </div>
     </div>
     <div id="card-print-dialog-content">
@@ -14,14 +14,14 @@
     <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" class="text" maxlength="1" style="width: 15px; padding: 2px;" value="1"/></div>
+          <div style="float: left; position: relative; top: -2px;"><input id="columnCount" type="text" maxlength="1" style="width: 15px; padding: 2px;" value="1"/></div>
           <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" class="text" maxlength="1" style="width: 15px; padding: 2px;" value="2"/></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>
         </div>
         <div class="ui-element" style="float: left;">
           <form style="float: left;" oninput="amount.value=parseFloat(scaleRange.value).toFixed(1)">
-            <input style="float: left; width: 80px;"  type="range" id="scaleRange" min="-1.0" max="1.0" step="0.1" value="0.0" style="width: 80px;" />
+            <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>
@@ -32,8 +32,8 @@
         <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 class="ui-element button button-primary" style="float: right;" id="card-print-dialog-print">Print</div>
-        <div class="ui-element button" style="float: right;" id="card-print-dialog-cancel">Cancel</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>
       </div>
     </div>
   </div>