diff --git a/app.js b/app.js
index b0e9fab513583fd79818a4d2af5ebfca61ce5ffa..4fac3e93edbd26acdd9c2dc1f0a81ff306e05f68 100644
--- a/app.js
+++ b/app.js
@@ -41,7 +41,7 @@ setInterval(function(){
   }, speed);
 */
 setInterval(function(){ 
-    io.sockets.emit('click', getStepPos());
+    io.sockets.emit('metronome', getStepPos());
 }, (60000 / bpm)/4);
 
 function getStepPos(){
diff --git a/index.html b/index.html
index 193e7e97f2f1aa1dcccced65ac1893409c4db50a..c6dc5b6d1250ed9418248280ab6336da4b26b147 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,19 @@
 <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script src="/socket.io/socket.io.js"></script>
-   
+    <link href='https://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'>
     <style type="text/css">
+
+        body{
+            margin-top:120px;
+            background-color:#1c1a1a;
+            font-family: 'Codystar', cursive;
+            color:#9d0000;
+        }
+
         #container{
             width:500px;
+            margin:auto;
         }
 
         .beatIndicator{
@@ -19,11 +28,11 @@
         }
 
         .beatIndicator.inactive{
-            background-color:white;
+            background-color:#303030;
         }
 
         .beatIndicator.active{
-            background-color:red;
+            background-color:#9d0000;
         }
 
 
@@ -31,7 +40,41 @@
             width:20px!important;
         }
         .four{
-            background-color:grey!important;
+            background-color:#3f0e0e!important;
+        }
+
+        input[type=checkbox].css-checkbox {
+            position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
+        }
+
+        input[type=checkbox].css-checkbox + label.css-label {
+            padding-left:20px;
+            height:20px; 
+            display:inline-block;
+            line-height:20px;
+            background-repeat:no-repeat;
+            background-position: 0 0;
+            font-size:20px;
+            vertical-align:middle;
+            cursor:pointer;
+
+        }
+
+        input[type=checkbox].css-checkbox:checked + label.css-label {
+            background-position: 0 -20px;
+        }
+        label.css-label {
+            background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_e735e2688b7676957c8e335c4c9e2311.png);
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        td{
+            vertical-align: middle!important;
         }
 
     </style>
@@ -43,11 +86,8 @@
        
 
         $(function(){
-            /*
-            **  SOUNDS
-            */
-            //var bd = $("#bd")[0];
 
+            // generate graphics
             generateSteps();
 
             var iosocket = io.connect();
@@ -55,7 +95,8 @@
 
             }); 
 
-            iosocket.on('click', function(serverStepPos){
+            // metronome
+            iosocket.on('metronome', function(serverStepPos){
                 stepPos = serverStepPos;
                 advanceStep(serverStepPos);
                 playSound();
@@ -88,11 +129,16 @@
                 if(i<4){
                     $('#steps').append('<tr class="row" id="row'+i+'">');
                     for(var j = 0; j < 16; j++){
-                        if(j%4==0){
-                            $('#row'+i).append('<td class="four"><input class="checkbox step'+j+' row'+i+'" type="checkbox"/></td>');
+                        //if(j%4==0){
+                            $('#row'+i).append('<td id="td'+j+i+'"><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>');
+                            if(j%4==0){
+                            $('#td'+j+i).addClass('four');
+                            }
+                        /*
                         }else{
-                            $('#row'+i).append('<td><input class="checkbox step'+j+' row'+i+'" type="checkbox"/></td>');    
-                        }   
+                            $('#row'+i).append('<td><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>');
+                        } 
+                        */  
                         
                     }
                     $('#row'+i).append(
@@ -113,7 +159,7 @@
                             '<option value="snare">Snare</option>'+
                         '</select>'
                      );
-                    $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="2" step=".1" name="power" list="powers">');
+                    $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="powers">');
 
                     $('#steps').append('</div>');
                 }else{
@@ -146,6 +192,7 @@
     </script>
 </head>
 <body>
+    <center><h1>JDRUMMER XPRIENCE</h1></center>
     <div id="container">
         <table id="steps">
         </table>