diff --git a/index.html b/index.html
index a35414f1c3147c3adb0ce741d84fe7c47ffc2d4d..1f6629ebc5d1961a8b82f4bb66275d7de4a8da37 100644
--- a/index.html
+++ b/index.html
@@ -2,231 +2,10 @@
 <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>
+    <script src="client.js"></script>
     <link href='https://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'>
-    <style type="text/css">
+    <link rel="stylesheet" type="text/css" href="style.css">
 
-        body{
-            margin-top:120px;
-            background-color:#1c1a1a;
-            font-family: 'Codystar', cursive;
-            color:#9d0000;
-        }
-
-        #container{
-            width:500px;
-            margin:auto;
-        }
-
-        .beatIndicator{
-            border: 1px solid black;
-            width: 8px;
-            height: 8px;
-            margin-right:8px;
-            margin-left:8px;
-            border-radius: 5px;
-            float: left;
-        }
-
-        .beatIndicator.inactive{
-            background-color:#303030;
-        }
-
-        .beatIndicator.active{
-            background-color:#9d0000;
-        }
-
-
-        .checkbox{
-            width:20px!important;
-        }
-        .four{
-            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;
-        }
-
-        .styled-select select {
-           background: #303030;
-           color:#d3d3d3;
-           padding: 5px;
-           font-size: 16px;
-           line-height: 1;
-           border: 0;
-           border-radius: 5px;
-           height: 25px;
-           -webkit-appearance: none;
-
-        }
-
-        #bpm{
-            width:100%;
-        }
-
-    </style>
-
-    <script>
-
-
-    var stepPos = 0;
-       
-
-        $(function(){
-            // generate graphics
-            generateSteps();
-
-            var iosocket = io.connect();
-            iosocket.on('connect', function () {
-
-            }); 
-
-            // metronome
-            iosocket.on('metronome', function(serverStepPos){
-                stepPos = serverStepPos;
-                advanceStep(stepPos);
-                playSound();
-            });
-
-            // if bpm changes from other client, update slider pos here
-            iosocket.on('setBpmSlider', function(newSliderVal){
-                $('#bpm').val(newSliderVal);
-                console.log(newSliderVal);
-            });
-            
-            // send bpm change to server
-            $( "#bpm" ).change(function() {
-                iosocket.emit('bpm', $(this).val());
-            });
-        });
-
-
-        function advanceStep(serverStepPos){
-        /*           
-            if(stepPos >= 16){
-               stepPos = 0;
-            }
-        */  
-            $('.step'+serverStepPos).removeClass('inactive').addClass('active');
-               
-            for(var i = 0; i < 16; i++){
-                if(i != serverStepPos){
-                    $('.step'+i).removeClass('active').addClass('inactive');
-                }
-            }
-        //   stepPos++;
-        }
-        
-
-        function generateSteps(){
-            for (var i = 0; i < 5; i++){
-                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 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 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(
-                        '<div class="styled-select">'+
-                            '<select>'+
-                                '<option value="bd">Kick</option>'+
-                                '<option value="cowbell">Cowbell</option>'+
-                                '<option value="cymbal">Cymbal</option>'+
-                                '<option value="glitch">Glitch</option>'+
-                                '<option value="hhc">HiHat Closed</option>'+
-                                '<option value="hho">HiHat Open</option>'+
-                                '<option value="ht">Tom High</option>'+
-                                '<option value="mt">Tom Medium</option>'+
-                                '<option value="lt">Tom Low</option>'+
-                                '<option value="perch">Percussion High</option>'+
-                                '<option value="percl">Percussion Low</option>'+
-                                '<option value="rim">Rimshot</option>'+
-                                '<option value="shaker">Shaker</option>'+
-                                '<option value="snare">Snare</option>'+
-                            '</select>'+
-                        '</div>'
-                     );
-                    $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="sounds">');
-
-                    $('#steps').append('</div>');
-                }else{
-                    $('#steps').append('<tr>');
-                    for(var j = 0; j < 16; j++){
-                        $('#steps').append('<td class="row beatIndicator step'+j+' inactive" id="metronome"/>');
-                    }
-                    $('#steps').append('<tr/>');
-                }
-            }
-        }
-
-        function playSound(){
-            for (var i = 0; i < 4; i++){
-                if($('.step'+stepPos)[i].checked){
-                    //if(i == 0){
-                        $('body').css('background-color', randomColor());
-                    //}
-                    var sound = $('#row'+i+' select').val();
-                    this[sound].pause();
-                    this[sound].currentTime = 0;
-                    this[sound].playbackRate = $('#pitchRow'+i).val();
-                    //this[sound].doperShift = 100;
-                    this[sound].play();
-                }
-            }
-        }
-
-        function randomColor(){
-            var value = Math.random() * 0xFF | 0;
-            var grayscale = (value << 16) | (value << 8) | value;
-            var color = '#' + grayscale.toString(16);
-            return color;
-            //return(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') +
-            //s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5)
-        }
-
-
-
-
-    </script>
 </head>
 <body>
     <center><h1>JDRUMMER XPRIENCE</h1></center>